how to get json in javascript in un order list

Question

how can i get json data by using javascript in to un order list. i tried a lot and trying to get help from google but i couldn't find any solution. i am new with json and javascript.

i want to get json data like that image

let assetsdata=[];
function getAssets(){
    for ( let assets in assetsdata ){
        //console.log(assetsdata[assets]);
        let userID = assetsdata[assets].userId;
        let list2 = assetsdata[assets].dataList;
        for (let key in list2) {
            let list3 = list2[key];
            document.getElementById('demo').innerHTML +=  "<li>"+ key + '<ul id="listTwo"></ul></li>' ;
            for (let key2 in list3) {
                document.getElementById('listTwo').innerHTML +=  " <li> "+ list3[key2] + "</li>";
            }
        }
    };
}
fetch('js/getJson.json').then(function(resp){
    return resp.json();
})
.then(function(data){
    assetsdata = data.assetsData;
    getAssets();
});

here is my json data

{
    "assetsData": [
        {
            "userId": 1,
            "description": "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.",
            "dataList": { 
                "GUIDELINES" :
                [
                    "Guidlines 1",
                    "Guidlines 2",
                    "Guidlines 3",
                    "Guidlines 4"
                ]
            }
        },
        {
            "userId": 2,
            "description": "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.",
            "dataList": { 
                "AFTER-SALES" : 
                [   
                    "NISMO",
                    "down" , {
                        "Market" : [
                            "DIGITAL",
                            "OpH",
                            "Pos",
                            "print",
                            "social gif",
                            "social videos"
                        ]
                    } 

                ]
            }
        }
    ]
}

Why are you using a global variable `assetsData` instead of making it a function parameter? — Barmar, Dec 12 '19 at 06:22
IDs need to be unique, you can't use `id="listTwho"` for every `
` — Barmar, Dec 12 '19 at 06:23
yes actually i trying to get the data first then i will modify it more... — saira, Dec 12 '19 at 06:27

Barmar · Answer 1 · 2019-12-12T07:11:23.097

0

You're reusing the ID listTwo for every <ul>. But document.getElementById("listTwo") will always return the first one, not the one you just added.

Instead of adding the <li> to the inner HTML of an ID, concatenate it into the string of the <ul> before you append it.

It's often easiest to construct the entire string, and then assign to innerHTML once at the end.

You should also pass the data as a function parameter rather than a global variable. And you can use ES6 template literals to simplify substituting variables into the HTML.

function getAssets(assetsdata) {
  let html = "";
  for (let assets in assetsdata) {
    //console.log(assetsdata[assets]);
    let userID = assetsdata[assets].userId;
    let list2 = assetsdata[assets].dataList;
    for (let key in list2) {
      let list3 = list2[key];
      html += `<li>${key}<ul class="listTwo">`;
      for (let key2 in list3) {
        html += `<li>${list3[key2]}</li>`;
      }
      html += "</ul></li>";
    }
  };
  document.getElementById("demo").innerHTML += html;
}
fetch('js/getJson.json').then(function(resp) {
    return resp.json();
  })
  .then(function(data) {
    getAssets(data.assetsData);
  });

edited Dec 12 '19 at 07:11

answered Dec 12 '19 at 06:34

Barmar

741,623
53
500
612

its return "GUIDELINES" two times – saira Dec 12 '19 at 06:49
I had the `innerHTML` assignment at the end of the wrong loop. – Barmar Dec 12 '19 at 07:10
here is another issue at very end of the loop the [object Object] is show...can i get key if i dont have value? like "Market" should you instead of [object Object] – saira Dec 12 '19 at 08:07
What is it supposed to show if the value is an object instead of a string? It sounds like you need to write a recursive function that creates a list for each level. – Barmar Dec 12 '19 at 08:13
Look here: https://stackoverflow.com/questions/41367907/create-nested-list-dynamically-from-json-object – Barmar Dec 12 '19 at 08:31
i hope this will help me a lot – saira Dec 12 '19 at 09:10

how to get json in javascript in un order list

1 Answers1