Click here to Skip to main content
14,694,505 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?

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

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

.catch(function (err) {
	console.log(err);
});
   
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.

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);
}
   
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