MichaelChad Ответов: 2

Не удается отобразить JSON в HTML с помощью javascript


Итак, у меня есть этот файл JSON (прилагается). Я не могу заставить его отображаться в HTML, когда я вызываю функцию в JavaScript.
Кто-нибудь поможет?

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


Что я уже пробовал:

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

2 Ответов

Рейтинг:
0

MadMyche

Ну для начала в вашем коде есть опечатка

fetch('url')
	.then(function (response) {
		return response.json();
	})
	.then(fucntion(data) {         // function ( not fucntion )
		appendData(data);
	})

.catch(function (err) {
	console.log(err);
});


Рейтинг:
0

Ashutosh Gpta

мое первое впечатление заключается в том, что ваш JSON содержит вложенный массив, и вы зацикливаете только первый массив, где as name и order являются частью вашего второго массива. проверить это.

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