Load text from JSON

Using JavaScript with Hype
1

Looking for a simple example of loading text & images from a json file. I’ve searched the forums a lot and nothing that was strictly just that.

For example I’d like to load the following json. Let’s call it animation-text.json.

{
    "mydata" : {
        "block-a" : {
            "text-1" : {
              "option-0": "Dude",
              "option-1": "Awesome",
              "option-2": "Bogus",
              "option-3": "WTF",
              "option-4": "Strange"
            },
            "title" : "Click bait stinks",
            "subtitle" : "I've got nothing!"
        },
        "block-b" : {
            "text-1" : {
              "option-0": "Dude",
              "option-1": "Awesome",
              "option-2": "Bogus",
              "option-3": "WTF",
              "option-4": "Strange"
            },
            "title" : "Thought of something new",
            "subtitle" : "Still have nothing.",
            "graphic" : "./images/fielname.png"
        }
    }

}

Then how would I apply values to different elements?

If someone could share an example file, that would be of huge help. I do well with reverse engineering.

1 Like
2

there’ll be tons of examples doing a forum search. :wink:

3

Perhaps you can point one out that is helpful? I’ve read a bunch and this seams to be you’re standard response on each. These forums are all that intuitive to search either.

4 
var request = new XMLHttpRequest();
request.open('GET', '/my/url/animation-text.json', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {

    var obj = JSON.parse(request.responseText);
var titleA = obj.mydata.block-a.title;
hypeDocument.getElementById('yourHypeElementsId').innerHTML = titleA;
  } else {


  }
};

request.onerror = function() {

};

request.send();
4 Likes
5

Thank you. That worked perfectly.

7

Thats exactly what Im looking for, an example of how to load up to 9 boxes or selections pulling an image, price... via a JSON file.

8

Seems like you found it? Hans answered above: Load text from JSON

This is the same whether you're doing this in our outside of Hype, the only difference between loading this result in a regular HTML element is in Hans' code you're placing the result in a Hype element (this line):
hypeDocument.getElementById('yourHypeElementsId').innerHTML = titleA;