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>

do you want to create divs for each message as given above ? — Mritunjay
– Mritunjay, Commented Apr 6, 2015 at 14:23
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. — Eric Lease
– Eric Lease, Commented Apr 6, 2015 at 14:51

mohamedrias · Accepted Answer · 2015-04-06 15:01:27Z

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>

edited Apr 6, 2015 at 15:01

answered Apr 6, 2015 at 14:24

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1242574 Over a year ago

Thanks!, this works but only for 1 object. How can I get all the object from the array like this?

user1242574 Over a year ago

Thanks, but I get error: Uncaught SyntaxError: Unexpected token function. in this line: array.forEach(array[0], function(function(object) {

mohamedrias Over a year ago

I've added function twice, tht's why it didn't work last time. try it now

ozil · Accepted Answer · 2015-04-07 06:18:14Z

0

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

edited Apr 7, 2015 at 6:18

answered Apr 6, 2015 at 14:36

ozil

7,1639 gold badges38 silver badges61 bronze badges

3 Comments

mohamedrias Over a year ago

you're creating div's with duplicate id messageContent. ID must be unique in a page

ozil Over a year ago

@ mohamedrias you can append i with id. it will make then unique.

mohamedrias Over a year ago

Your above code will nt work. You're inserting HTML inside your javascript. It must be either as string or as DOM elements.

Collectives™ on Stack Overflow

Get object from array?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related