I want to make a list of books in JavaScript, and first I made the code so it would print out in the console window, but now I want to have the list in web page, because via a DOM-event (button) I want the user to be able to put in another book in the list. With certain criterias. But now as I try to put it in web I only get object object] [object object], and since I'm a noob I don't understand how to merge so the list I made with JavaScript is shown in the webpage? Sorry if this is confusing.
var array = [{
"Title": "Machine Learning",
"Year": 2020,
"Price": 500
}, {
"Title": "Artificial Intelligence",
"Year": 2020,
"Price": 1100
}, {
"Title": "Algorithms and Data Structure",
"Year": 1995,
"Price": 400
}, {
"Title": "Programming in C++",
"Year": 1999,
"Price": 200
}, {
"Title": "Database Systems",
"Year": 2020,
"Price": 500
}];
document.getElementById("test").innerHTML = array
for (var i = 0; i < array.length; i++) {
console.log(array[i])
}<h1>Velkommen til mitt arbeidskrav i emnet:
</h1>
<h1>Intro til programmering! </h1>
<div id="test">
</div>
<input id="NewBook" placeholder="Enter book"></input>
<button id="btnNewBook">Click to add book</button>
<p> My book list:
<ul id="MyBookList">
</ul>What you're trying to show in the webpage is just an array (Object). You should loop over that array and show the title of the item, not the item.
const el = document.getElementById("test");
for (var i = 0; i < array.length; i++) {
el.innerHTML += `<div>${array[i].Title}</div>`;
}
Also a tip: instead of rebuilding the dom with innerHTML you might think to use appendChild or insertAdjacentHTML functions.