Click here to Skip to main content
15,884,032 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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?

HTML
`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:

JavaScript
`<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>`
Posted
Updated 10-Dec-19 5:49am
v2

Well for starters there is a typo in your code
JavaScript
fetch('url')
	.then(function (response) {
		return response.json();
	})
	.then(fucntion(data) {         // function ( not fucntion )
		appendData(data);
	})

.catch(function (err) {
	console.log(err);
});
 
Share this answer
 
my first impression is that your JSON contains nested array and you are looping only the first array where as name and order is part of your second array. check this.

JavaScript
for (var i = 0; i < data.items.length; i++) {
var div = document.createElement("div");
div.innerHTML = 'Name: ' + data.items[i].order + ' ' + data.items[i].name;
mainContainer.appendChild(div);
}
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900