2021-06-15 07:49:18 +00:00
---
id: 587d7fae367417b2b2512be5
2021-06-30 15:17:19 +00:00
title: Convertire dati JSON ad HTML
2021-06-15 07:49:18 +00:00
challengeType: 6
forumTopicId: 16807
dashedName: convert-json-data-to-html
---
# --description--
2021-06-30 15:17:19 +00:00
Ora che stai ricevendo dati da un'API JSON, puoi mostrarlo nell'HTML.
2021-06-15 07:49:18 +00:00
2021-06-30 15:17:19 +00:00
Puoi usare un metodo `forEach` per iterare sui dati visto che gli oggetti di foto per gatti sono immagazzinati in un array. Iterando su ogni elemento, puoi modificare gli elementi HTML.
2021-06-15 07:49:18 +00:00
2021-06-30 15:17:19 +00:00
Come prima cosa, dichiara una variabile html con `let html = "";` .
2021-06-15 07:49:18 +00:00
2021-06-30 15:17:19 +00:00
Poi, itera sul JSON, aggiungendo HTML alla variabile con le chiavi degli oggetti racchiuse in tag `strong` , seguite dal valore. Quando il ciclo ha finito, lo presenti.
2021-06-15 07:49:18 +00:00
2021-06-30 15:17:19 +00:00
Ecco il codice che lo fa:
2021-06-15 07:49:18 +00:00
```js
let html = "";
json.forEach(function(val) {
const keys = Object.keys(val);
html += "< div class = 'cat' > ";
keys.forEach(function(key) {
html += "< strong > " + key + "< / strong > : " + val[key] + "< br > ";
});
html += "< / div > < br > ";
});
```
2021-06-30 15:17:19 +00:00
**Nota:** per questa sfida devi aggiungere nuovi elementi HTML alla pagina quindi non puoi usare `textContent` . Invece, devi usare `innerHTML` , il quale può rendere i siti vulnerabili ad attacchi di cross-site scripting.
2021-06-15 07:49:18 +00:00
# --instructions--
2021-06-30 15:17:19 +00:00
Aggiungi un metodo `forEach` per iterare sui dati JSON e creare gli elementi HTML per mostrarli.
2021-06-15 07:49:18 +00:00
2021-06-30 15:17:19 +00:00
Ecco alcuni esempi di JSON:
2021-06-15 07:49:18 +00:00
```json
[
{
"id":0,
"imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
"altText":"A white cat wearing a green helmet shaped melon on its head. ",
"codeNames":[ "Juggernaut", "Mrs. Wallace", "Buttercup"
]
}
]
```
# --hints--
2021-06-30 15:17:19 +00:00
Il tuo codice dovrebbe salvare i dati nella variabile `html`
2021-06-15 07:49:18 +00:00
```js
assert(__helpers.removeWhiteSpace(code).match(/html(\+=|=html\+)/g))
```
2021-06-30 15:17:19 +00:00
Il tuo codice dovrebbe usare un metodo `forEach` per iterare sui dati JSON ricevuti dalla API.
2021-06-15 07:49:18 +00:00
```js
assert(code.match(/json\.forEach/g));
```
2021-06-30 15:17:19 +00:00
Il tuo codice dovrebbe racchiudere i nomi delle proprietà in tag `strong` .
2021-06-15 07:49:18 +00:00
```js
assert(code.match(/< strong > .+< \/strong > /g));
```
# --seed--
## --seed-contents--
```html
< script >
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick = function(){
const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload = function(){
const json = JSON.parse(req.responseText);
let html = "";
// Add your code below this line
// Add your code above this line
document.getElementsByClassName('message')[0].innerHTML = html;
};
};
});
< / script >
< style >
body {
text-align: center;
font-family: "Helvetica", sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
}
.box {
border-radius: 5px;
background-color: #eee ;
padding: 20px 5px;
}
button {
color: white;
background-color: #4791d0 ;
border-radius: 5px;
border: 1px solid #4791d0 ;
padding: 5px 10px 8px 10px;
}
button:hover {
background-color: #0F5897 ;
border: 1px solid #0F5897 ;
}
< / style >
< h1 > Cat Photo Finder< / h1 >
< p class = "message box" >
The message will go here
< / p >
< p >
< button id = "getMessage" >
Get Message
< / button >
< / p >
```
# --solutions--
```html
< script >
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick = function(){
const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload = function(){
const json = JSON.parse(req.responseText);
let html = "";
// Add your code below this line
json.forEach(function(val) {
var keys = Object.keys(val);
html += "< div class = 'cat' > ";
keys.forEach(function(key) {
html += "< strong > " + key + "< / strong > : " + val[key] + "< br > ";
});
html += "< / div > < br > ";
});
// Add your code above this line
document.getElementsByClassName('message')[0].innerHTML = html;
};
};
});
< / script >
< style >
body {
text-align: center;
font-family: "Helvetica", sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
}
.box {
border-radius: 5px;
background-color: #eee ;
padding: 20px 5px;
}
button {
color: white;
background-color: #4791d0 ;
border-radius: 5px;
border: 1px solid #4791d0 ;
padding: 5px 10px 8px 10px;
}
button:hover {
background-color: #0F5897 ;
border: 1px solid #0F5897 ;
}
< / style >
< h1 > Cat Photo Finder< / h1 >
< p class = "message" >
The message will go here
< / p >
< p >
< button id = "getMessage" >
Get Message
< / button >
< / p >
```