I have currently placed the entire array within a single div, but I would like to be able to display each element of the array separately so that I can style "date", "title", and "text" individually.
This is my JSON structure:
[
{
"date": "Example Date",
"title": "Example Title",
"text": "Example Text"
},
{
"date": "Example Date",
"title": "Example Title",
"text": "Example Text"
},
{
"date": ""Example Date",
"title": "Example Title",
"text": "Example Text"
}
]
This is my HTML setup:
<div id="myData"></div>
Using Fetch API:
fetch('example.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = data[i].date + data[i].title + data[i].text;
mainContainer.appendChild(div);
}
}
Is there a way to create 3 separate divs instead of one, with each individual div displaying the "date", "title", or "text" elements for styling purposes, instead of having all 3 items within one div?
I attempted to use 3 functions to segregate "date", "title", and "text", but it only displays the last item in the array, which is typically the "text" information. Keep in mind that I am new to JavaScript.