Click here to Skip to main content
14,661,404 members

Cannot display JSON in HTML using javascript

MichaelChad asked:

Open original thread
So I've got this JSON file (attached). I cannot get it to display in HTML when I call the function in JavaScript.
Any help?

`const data = {
"layers": [{
"order": 0,
"items": [{
"order": 2,
"name": "Randomly Generous Red",
"imgSrc": "jeb.png"
},

        {
            "order": 1,
            "name": "Too Agreeable Silver",
            "imgSrc": "VRC.png"
        },

        {
            "order": 3,
            "name": "Almost Whispy Blue",
            "imgSrc": "58Z.png"
        },

        {
            "order": 0,
            "name": "Some Times Juicy Red",
            "imgSrc": "081.png"
        }
    ]
},

{
    "order": 1,
    "items": [{
            "order": 0,
            "name": "Never Substantial Silver",
            "imgSrc": "BWK.jpg"
        },

        {
            "order": 1,
            "name": "Really Adorable Pink",
            "imgSrc": "hk9.jpg"
        }
    ]
},

{
    "order": 2,
    "items": [{
            "order": 2,
            "name": "Very Honest Black",
            "imgSrc": "0Og.png"
        },

        {
            "order": 4,
            "name": "Never Eager Red",
            "imgSrc": "2Ks.png"
        },

        {
            "order": 0,
            "name": "Kind Of Adorable Silver",
            "imgSrc": "L99.png"
        },

        {
            "order": 3,
            "name": "Some Times Confident Pink",
            "imgSrc": "Wx4.png"
        },

        {
            "order": 1,
            "name": "Never Brave Blue",
            "imgSrc": "020.png"
        }
    ]
}
],
"default_configuration": [
0,
1,
4
]
};

const sorted = {
'layers': data.layers
.sort(({ order: a }, { order: b}) => a - b)
.map(o => { 
o.items.sort(({ order: a }, { order: b}) => a - b);
return o;
}),
'default_configuration': data.default_configuration
};

console.log(sorted);`


What I have tried:

`<script>

fetch('url')
.then(function (response) {
return response.json();
})
.then(fucntion(data) {
appendData(data);
})
.catch(function (err) {
console.log(err);
});

function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = 'Name: ' + data.order + ' ' + data.name;
mainContainer.appendChild(div);
}
}

</script>`
Tags: Javascript, JSON, client-side

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the http://www.codeproject.com/info/cpol10.aspx.




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100