How to print out an element from a JavaScript array of objects

Question

I have this array, how I can print out an element inside it?

For example, I want to print out, inside a new "div", the number "4" of "Date" and the text "descrizione descrizione" of "Title".

to create a new "div" I have used: document.getElementsByTagName("body")[0].appendChild(div);

// EVENT MANAGER
var events = [
 {'Date': new Date(2017, 5, 4), 'Title': 'descrizione descrizione'},
 {'Date': new Date(2017, 5, 18), 'Title': 'desrizione descrizione', 'Link': 'www.google.com'},
 {'Date': new Date(2017, 6, 27), 'Title': 'descrizione descrizione'},
 {'Date': new Date(2017, 6, 28), 'Title': 'descrizione descrizione'},
 {'Date': new Date(2017, 6, 29), 'Title': 'descrizione descrizione'},
 {'Date': new Date(2017, 6, 10), 'Title': 'descrizione descrizione'},
 {'Date': new Date(2017, 6, 22), 'Title': 'descrizione descrizione'},
];
var settings = {};
var element = document.getElementById('caleandar');
caleandar(element, events, settings);

Thanks

EDIT: Thanks ALL

• Álvaro González: I've edited the term JSON out of your question, since your question has absolutely nothing to do with JSON.
• Luca: Ok thanks. and sorry for mistake

Answer 1

HTML:

<div id="calendar"></div>

.JS:

// EVENT MANAGER
var events = [
 {'Date': new Date(2017, 5, 4), 'Title': 'descrizione descrizione'},
 {'Date': new Date(2017, 5, 18), 'Title': 'desrizione descrizione', 'Link': 'www.google.com'},
 {'Date': new Date(2017, 6, 27), 'Title': 'descrizione descrizione'},
 {'Date': new Date(2017, 6, 28), 'Title': 'descrizione descrizione'},
 {'Date': new Date(2017, 6, 29), 'Title': 'descrizione descrizione'},
 {'Date': new Date(2017, 6, 10), 'Title': 'descrizione descrizione'},
 {'Date': new Date(2017, 6, 22), 'Title': 'descrizione descrizione'},
];
document.getElementById("calendar").append("Day: "+events[0].Date.getDate()+" ; Title: "+events[0].Title)

• Luca: This is perfectly works, can I ".append" another value when I click another element? I have a calendar and I need to "append" different values at different "divs"... thanks for your time.
• Luciano Huguenin: Yes, you can make a js function like this in which you pass the value from the html, like: HTML: <button onclick="appendDate('number of events index')">Append</button> JS: var appendDate = function(i){ document.getElementById("calendar").append("<div>Day: "+events[i].Date.getDate()+" ; Title: "+events[i].Title+"</div>") }

Answer 2

// Using forEach loop 
function(events) {
 events.forEach(function(event) {
 console.log(event.Date);
 console.log(event.Title);
 });
}

• Luca: ok, only one thing... its says "Uncaught SyntaxError: Unexpected token ("

Answer 3

create the DOM node and add the content to it's innerHTML

events.forEach(function(event){
 var divToAdd = document.createElement('div');
 divToAdd.innerHTML = event.Date.getDate() + " - " + event.Title;
 document.body.appendChild(divToAdd);
});

Answer 4

Use a foreach-loop on the array, to create the divs with the content and to append it to the body. You can use the day accessor of a Date object to get the day. See documentation here

var body = document.getElementsByTagName("body")[0];
events.forEach(function(event){
 var day = String(event.Date.day);
 var title = event.Title;
 var div = document.createElement("div");
 div.innerHTML = day+" - "+title;
 body.appendChild(div);
});