How to generate a li from this JSON

Asked

Viewed 112 times

-4

I’m making a requisicao to get this JSON, and would like to know how to assemble a li using this request

var url = "data.json";

        var httpRequest = new XMLHttpRequest();
        httpRequest.open("GET", url);
        httpRequest.responseType = "json";
        httpRequest.addEventListener("readystatechange", function () {
          if (httpRequest.readyState == 4){
            if (httpRequest.status == 200){
              console.log(httpRequest.response);
              console.log(httpRequest.response.headDocument);
              console.log(httpRequest.response.headDocument.authors);
              console.log(httpRequest.response.headDocument.content);
            } else {
                console.log("fiz algo errado xD")
            }
          }
        });

        httpRequest.send();
javascript

  • You can use the Handlebars to build a template, then combine the template to json

  • could give me an example using my code above?

  • 1

    Bruno, check the formatting and content of your question. It’s hard to understand what you meant.

  • It’s gotten a little better, Bruno, but there’s still an example of in and out. Show what your JSON looks like and how you want your JSON to look like.

  • @Pablo, he mentioned the JSON source in another question... follow the example: https://jsfiddle.net/TobyMosque/xtk52m1o/

  • @Tobymosque Blz, but he still has to explain how he wants this read

  • Which part of json will be used to build the list? It’s huge! headDocument.content ?

  • @Felipemoraes, so we are asking for a template of what will be generated.

  • That httpRequest.open("GET", url); shouldn’t be this httpRequest.open("GET", url, true); in order to use the readystatechange?

  • Friend I would vote right away to close the question a asked that it remains obscure after 2 days, not this clear enough where is the problem, as I just came back from a penalty for voting too fast I will vote to leave open until you rephrase the question ok.

Show 5 more comments

1 answer

0


You can do a foreach to get the data:

//...
if (httpRequest.status == 200){
    httpRequest.response.headDocument.content.forEach(function(o){
        console.log("source: " + o.source);
        console.log("collectionId: " + o.collectionId);
        console.log("generator ID: " + o.content.generator.id);
        console.log("parent ID: " + o.content.parentId);
        //...
    });
}
//...

Your problem is understanding how to navigate within a json object. By understanding this, you will be able to build your list.

See the json that was used in the question, there is a collection of json objects within your json array httpRequest.response.headDocument.content.

JSON arrays are bounded by [ ] square brackets, with their elements separated by comma:

{
    headDocument: { //objecto json
        content: [ //array json com uma coleção de objectos json
            { source: 1,collectionId: "155985417", //... }, //objecto json
            { source: 2,collectionId: "556454847", //... }, //objecto json
            //...
        ]
    }
 }

So we use forEach to have access to all array elements content. Each element of this array is an object json which is passed as parameter to the callback function:

httpRequest.response.headDocument.content.forEach(function(o){
    //O parâmetro "o" é um objecto json
}

As parameter "o" is an object json, we can navigate by its properties:

o.source //source é uma propriedade do objecto "o"
o.collectionId //collectionId é uma propriedade do objecto "o"
//...

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.