Get object from array?

Question

I'm working on a JavaScript chat app. I'm trying to retrieve chat messages from a history array. Currently I have 1 object in this array but there will be more objects.

When I stringify the array this comes out:

[[{"chatName":"Piet","time":"13:00","message":"asdasdasd"}],
 "14282568276220321","14282568276220321"]

In console it looks like this:

[Array[1], "14282568276220321", "14282568276220321"]
 0: Array[1]
 0: Object
 chatName: "Piet"
 message: "asdasdasd"
 time: "13:00"
 __proto__: Object
 length: 1
 __proto__: Array[0]
 1: "14282568276220321"
 2: "14282568276220321"
 length: 3
 __proto__: Array[0]

I would like to retrieve all messages from the array in a way that I can style it width css, like this for example per message:

<div id"messageContent">
 <b>Piet</b>
 <span>13:00</span>
 <p>asdasdasd</p>
</div>

• Mritunjay: do you want to create divs for each message as given above ?
• Eric Lease: What you're looking for has become standardized as client side MVC. It may seem like overkill for this one task, trust me it will be worth it to learn the MVC pattern. Try googling something like "js mvc frameworks" to compare the popular frameworks. I happen to be familiar with AngularJS, so in that terminology, I would create a module with a controller that has the data on it's $scope, and a custom element directive, with a template like <div id='{{msg.id}}'><b>{{msg.chatName}}</b><span>'{{msg.time}}'</span><p>{{msg.message}}</p></div>, and bind the controller to your json data.

Answer 1

You can get it using array notation [] and using object properties.

var array = [[{"chatName":"Piet","time":"13:00","message":"asdasdasd"}],"14282568276220321","14282568276220321"];
var objects = array[0]; // will give the first item in array
var object = objects[0]; // will erturn you first item in that inner array
object.chatName; // Piet
object.time; // 13.00
object.message; // message

to populate it in that dom:

var div = document.querySelector("#messageContent");
 div.querySelector("b").textContent = object.chatName;
 div.querySelector("span").textContent = object.time;
 div.querySelector("p").textContent = object.message;

Mostly you may desire to create those messages via loop:

 var array = [[{"chatName":"Piet","time":"13:00","message":"asdasdasd"}],"14282568276220321","14282568276220321"];
var div = document.querySelector("#messagecontent"),
 html = "";
 console.log(div);
 
array[0].forEach(function(object) {
 // you can create a wrapper div for this as well
 html +="<div>";
 html += "<b>"+object.chatName+"</b>";
 html += "<span>"+object.time+"</span>";
 html += "<p>"+object.message+"</p>";
 html += "</div>";
});
div.innerHTML += html;

<div id"messagecontent"></div>

• user1242574: Thanks!, this works but only for 1 object. How can I get all the object from the array like this?
• user1242574: Thanks, but I get error: Uncaught SyntaxError: Unexpected token function. in this line: array.forEach(array[0], function(function(object) {
• mohamedrias: I've added function twice, tht's why it didn't work last time. try it now

Answer 2

var array =[[{"chatName":"Piet","time":"13:00","message":"asdasdasd"}],"14282568276220321","14282568276220321"];
var html='';
var arrayObjects=array[0];
for (var i=0; i<arrayObjects.length; i++){
var object=arrayObjects[i];
html = '<div id="messageContent" + 'i'><b>object.chatName</b>
<span>object.time</span><p>object.message</p></div>'
}

• mohamedrias: you're creating div's with duplicate id messageContent. ID must be unique in a page
• ozil: @ mohamedrias you can append i with id. it will make then unique.
• mohamedrias: Your above code will nt work. You're inserting HTML inside your javascript. It must be either as string or as DOM elements.