thanks for this, Jonathan. The fetch function was the straight-forward approach I needed for my simple project. No need to use npm, install frameworks and bloated libraries. I got the js script to grab the text inside my json file and update my html. Success! I got my dopamine hit for the day and now I can pull away from the computer, get some fresh air, walk down to the local Starbucks and celebrate with a "java" chip frappuccino.
I am having problems here trying to do this for the Cloud Resume Challenge. I want to extract values from a JSON file and manipulate them. I want to at least convert the JSON file into a single string I can parse into another piece of code and I am stuck. I get the JSON object to display in the console, but I cannot get it to work elsewhere. I know about the CORS issue, which I did resolve, but I am still stuck.
Very nice, thank you. What about arrays ? If the content of my sample-file.json is the following, and I need to retrieve the "notes" and "created_at" key values ? [ { "enteredBy": "Boss", "eventType": "Announcement", "notes": "glargine 14", "created_at": "2021-03-23T19:00:25.889Z", }, { "created_at": "2021-03-23T17:27:29.472Z", "eventType": "Meal Bolus", "carbs": 40, "insulin": null } ]
how do we catch the data so that we can use it later in the code, ie. outside of fetch, I tried something like .then(Data => json_obj = Data) but as soon as we get out of the fetch function it no longer recognises json_obj
/// I Have Used this fetch but they will given error // please give some instruction any body fetch("card.json") .then(tha=>tha.json) .then(data3=>{ console.log(data3); })
Hi, Do you have a video that shows how to create a website that reads a jason file directly from AWS cloudntrial logs or JSON file from local host? Thanks
This video is so helpful! Thank you! What if we have multiple arrays in the JSON file that we want to write into the HTML file one after another. When I tried copy-pasting the two lines for the other arrays, it just overrides the original one in the html file. Do you have any tips for how to solve this? console.log(data.sentence) document.querySelector("#debug").innerHTML = data.sentence
Hello, thanks for the tutorial. There is a JSON data that I want to extract from a webpage, I can visually see the data when I right click and View Page Source. However, the data is below and inside of a eventlistener. window.addEventListener("DOMContentLoaded", function() { renderClientSide(....json data...)}) Like this. Can I use a similar method to extract this data? Or is there any other way?
What if my file is on a syntology diskstation and not on my pc? I have the website on my diskstation and want to read the json file which is also on the diskstaion. Does anyone know a answer for that? Thank you
I've never tried, but I have some ideas! I believe you can sync from a DiskStation to Amazon S3 (might depend on your model) - if you watch the others in the series you'll see how to connect your JavaScript to S3. If you only want it locally on your machine you could use Web Station to start a web server on your synology, and have the URL point to that. Or put your index.html/etc on the diskstation in the same folder as the JSON and use it as a shared drive.
can i know what is the command that i can to get rid of the URL scheme must be "http" or "https" for CORS request through Javascript instead of Python?
You must install an addon called live server on your Visual Studio Code because fetch does not support file:// I think you can use fetch and open your index.html in firefox but you have to configure it to support file://. Once you install live server you can run your index.html or another HTML page in chrome but you have to choose the option Open with Live Server in yours Visual Studio Code and it's work. I hope I have helped you.
You're free to just upload it all to the internet and it'll work without it! Or use Firefox from like 2009 when security was nbd and you could read files from your comp willy-nilly.
thanks for this, Jonathan. The fetch function was the straight-forward approach I needed for my simple project. No need to use npm, install frameworks and bloated libraries. I got the js script to grab the text inside my json file and update my html. Success! I got my dopamine hit for the day and now I can pull away from the computer, get some fresh air, walk down to the local Starbucks and celebrate with a "java" chip frappuccino.
I have literally spent like 3 hours trying to do this. Thank you!!
Same
Man.... I been looking for this for a long time. You made my day. Thank you.
same bruh same lmao.. literally been searching for HOURS!
Loved the way you simplify thinks Jonathan
If you're getting [object Object], just wrap your JSON variable like:
.innerText = JSON.stringify(data);
Thanks man
Was suffering without this video. Thank you so much.
Glad it was helpful!
bruuuhh..! finally i get the right video, i spent more than 4 hours searching thank youu
thanks for this video i was looking for something like this for ages
I cannot thank you enough for your video! you are a great savior!
This was super helpful today, for me, and helped me overcome a hurdle in my understanding of how javascript works.
Thank you so much, i watched like 10 videos and got the same error. your vid helped me alot
JEzz! 3 days searching!! Tks-a-LOT!!!
now this is what I was looking for...thanx a lot man...u just earned a subscriber 👍👍👍
I was trying to find something like that whole day and i came across you.Thank you so much mate.
Thank you 😂 I was looking for how to use fetch.
I am having problems here trying to do this for the Cloud Resume Challenge. I want to extract values from a JSON file and manipulate them. I want to at least convert the JSON file into a single string I can parse into another piece of code and I am stuck. I get the JSON object to display in the console, but I cannot get it to work elsewhere. I know about the CORS issue, which I did resolve, but I am still stuck.
Fetch method is not working for me. I am using node js server. Any solution please
Thank you so much. I have spent the whole day looking a solution and I found this. God bless you
Nice vid Jonathan, good clear explanation.
Very good video, nice funny speech :)
Thanks for help buddy!
Amazing Explanation, Thanks a lot.
is that working on Live server extension that vscode provides?
(Edited)
Yes
Very nice, thank you.
What about arrays ? If the content of my sample-file.json is the following, and I need to retrieve the "notes" and "created_at" key values ?
[
{
"enteredBy": "Boss",
"eventType": "Announcement",
"notes": "glargine 14",
"created_at": "2021-03-23T19:00:25.889Z",
},
{
"created_at": "2021-03-23T17:27:29.472Z",
"eventType": "Meal Bolus",
"carbs": 40,
"insulin": null
}
]
Did you find how?
You are a life saver, cheers.
how do we catch the data so that we can use it later in the code, ie. outside of fetch, I tried something like .then(Data => json_obj = Data)
but as soon as we get out of the fetch function it no longer recognises json_obj
How to update this json file using vanilla JS
Thanks man,. Very Helpful video.
/// I Have Used this fetch but they will given error // please give some instruction any body
fetch("card.json")
.then(tha=>tha.json)
.then(data3=>{
console.log(data3);
})
I think I get it but how might I make my data into a list, also my json that turns into an html just says object?
finally, it worked, thanks a lot
I can access the data when I do all this but what when I publish the website?
Brilliant explanation, thank you very much! Subscribed!
hello it says error response on my webbrowser
Thanks A Lot! It Really Helped :)
Thankyou very very very much for this video ❤️❤️😘😘😘😘😘
thx man very good tutorial and explanation!
lifesaver king !!!!
Hi, Do you have a video that shows how to create a website that reads a jason file directly from AWS cloudntrial logs or JSON file from local host? Thanks
I have a question, when yo want to put this files to the web hosting, does it still works?
Thank you so much!
amazing, thanks. nice and simple.
Thank you! Helped me solve my problem.
Thanks for the great video. Would doing this in react be any different?
adding this script is not letting my css file load
This video is so helpful! Thank you! What if we have multiple arrays in the JSON file that we want to write into the HTML file one after another. When I tried copy-pasting the two lines for the other arrays, it just overrides the original one in the html file. Do you have any tips for how to solve this?
console.log(data.sentence)
document.querySelector("#debug").innerHTML = data.sentence
5:54 Minecraft damage taken sound effect
now how to write and modify json data..........
and then What I do to see my json in this html?
It depends on what you're trying to do! Check around 5:14, it might be what you're looking for to insert parts of the JSON data into your HTML.
FINALLY!!!!!!!!! I LOVE YOU
Bros vid quality is on life support 💀
Thank you very much.
Thank you so much sir ❤️
can you send code
Thank you for this
can we render image using this?
Hello, thanks for the tutorial. There is a JSON data that I want to extract from a webpage, I can visually see the data when I right click and View Page Source. However, the data is below and inside of a eventlistener.
window.addEventListener("DOMContentLoaded", function() {
renderClientSide(....json data...)})
Like this. Can I use a similar method to extract this data? Or is there any other way?
What if my file is on a syntology diskstation and not on my pc? I have the website on my diskstation and want to read the json file which is also on the diskstaion. Does anyone know a answer for that? Thank you
I've never tried, but I have some ideas! I believe you can sync from a DiskStation to Amazon S3 (might depend on your model) - if you watch the others in the series you'll see how to connect your JavaScript to S3. If you only want it locally on your machine you could use Web Station to start a web server on your synology, and have the URL point to that. Or put your index.html/etc on the diskstation in the same folder as the JSON and use it as a shared drive.
cant thank enough !!
You got it, you're fine!! 🤣😂🤣
How can I do the same thing but with.txt files?
Instead of response.json(), you use response.text()!
ez tut. thx
can i know what is the command that i can to get rid of the URL scheme must be "http" or "https" for CORS request through Javascript instead of Python?
You must install an addon called live server on your Visual Studio Code because fetch does not support file://
I think you can use fetch and open your index.html in firefox but you have to configure it to support file://. Once you install live server you can run your index.html or another HTML page in chrome but you have to choose the option Open with Live Server in yours Visual Studio Code and it's work. I hope I have helped you.
Great, thanks!!
Thank you
we're gonna use just plain ole javascript. except we'll also use python of course...
You're free to just upload it all to the internet and it'll work without it! Or use Firefox from like 2009 when security was nbd and you could read files from your comp willy-nilly.
I love you. Tanks
ma man
pog
If it is not a sentence but array, what do I put?