Slightly different example but it loads JSON via Ajax. So this should work for you.
Hope it helps
Thanks Max! I’m not really sure if I’m there yet in terms of coding but I will try to decipher this.
Appreciate the response!
One Simple example of fetching json objects.
The text elements all have class names that match the keys of the json properties
i.e class name OntPrice etc…
The code then pulls the json and iterates over its property key names, finds the corresponding element with the class and set its text.
Simple Example_Json Fetch.hype.zip (24.0 KB)
So I think it would be helpful to watch…
He gets to json in video 4. But watch from video one…
Thanks Mark! Yes, I believe this may be a little easier to understand. I am going to watch the videos you referenced this evening. That guy is great. I have been trying to learn code and he’s pretty clear with things. Hey can I ask a silly question though before I get to watching this. Where does the actual text.json file in your sample reside? I don’t see a reference to a server in the javascript. Sorry I am such a newbie. I really need some courses in coding. Maybe it will become more clear when I watch the video.
Yep, he is great.
The file is in the resource folder.
You just need to set you path to the path of the file on the server…
'./text.json'
And put a file there.
Oh my gosh, I got it working on the server. This is brilliant.
Just needed this last step explainer. Thank you so so much Mark! And I will still watch the videos! I need to learn more.
1 Like
Hi Mark, I’m having a little trouble recreating this in my actual graphic. I believe I have followed all of the steps but I still don’t know why it doesn’t work. I feel I may be close. Perhaps I am just missing a small step? Here is the file if you or anyone has time to take a look at it. The main text boxes that I am aiming to have updated are within the symbols, KenoraBlurb, ThunderBayBlurb etc… I’ve included the .json file as well in case I am missing something there. Thanks in advance if you have time to look at it. Also the numbers that show up are just the ones I typed in, not the ones coming from the .json file. Archive.zip (419.9 KB)
Just looks like you had som esyntax errors in your json.
i.e did not match the last quotes around a value and also you had an extra “,” terminator at the end.text.json.zip (865 Bytes)
Also , and I am sure you realise this…
Best to have the place holder text something other than a price.
Or added code to deal with an error loading the data by putting some text that explains unavailable data at this time.
Thanks Mark, that did the trick. It’s an exact science isn’t it. lol.
I didn’t know about the place holder text. I am still really new at this all.
Thanks for the tip and for taking the time to look at my file! Have a lovely day.
No prob.
When I say place holder, I mean the text price you manually entered in Hype.
If for some reason the data cannot be loaded, like what you just ran into then as you see the text in hype is displayed. For the sort of site you are working on having that text as a dummy price would be a bad idea.
So maybe give each price element an extra class name line priceText.
Then change the code to something like this that will set the text to a default “…” then the price from the data.
If there is an issue with the data the the displayed text will be “…”
//-- run this part always
const priceTexts = document.querySelectorAll(".priceText" )
for (i = 0; i < priceTexts.length; ++i) {
priceTexts[i].innerText = "...";
}
loadPrices()
}
1 Like