从数组获取对象？

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>

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> 

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>'
}