Displaying keys and values of an object with jQuery

Question

I am trying to display the keys and values of an object but I'm getting only an error saying:

0[object Object]1[object Object]2[object Object]3[object Object]

What am I doing wrong?

My object, according to console.log is:

(4) [{…}, {…}, {…}, {…}]
0
:
{text: "Now", time: "Now"}
1
:
{text: "09:00", time: "09:00"}
2
:
{text: "09:30", time: "09:30"}
3
:
{text: "10:00", time: "10:00"}
length
:
4
__proto__
:
Array(0)

I am trying t display it with:

var html='';
$.each( data.times, function( key, val ) { 
      html+=key+val;
});
createElement("times", html );

Your response don't have key called "times" thus data.times is nothing. — amit wadhwani
– amit wadhwani, Commented Aug 23, 2017 at 15:27
Why you think 0[object Object] is an "error"? data.times is an array of objects. key will be the index of the current element (0, 1, 2, ...) and val is the element (an object) at that index. Calling .toString() on one of these objects returns [object Object] -> 0[object Object] — Andreas
– Andreas, Commented Aug 23, 2017 at 15:38

Rory McCrossan · Accepted Answer · 2017-08-23 15:40:58Z

1

Your issue is because data.times is an array of objects, which you are attempting to loop through as if it was an array of strings.

To fix this you need to instead loop through the properties of the object within the array, which you can achieve by using Object.keys, something like this:

var data = {
  times: [{
    "09:00": "09:00",
    "09:30": "09:30",
    "10:00": "10:00"
  }]
}

var html = '';
Object.keys(data.times[0]).forEach(function(key) {
  html += key + '-' + data.times[0][key] + ' ';
});
console.log(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Note that this will only loop over the first object in the array as that's all your data structure contains. If you want to loop through more objects you'd need to add another loop around this logic.

Post question edit update:

Now that you've amended the data structure you can just loop through the objects in the array and access their keys directly:

var data = {
  times: [
    { text: "Now", time: "Now" },
    { text: "09:00", time: "09:00" },
    { text: "09:30", time: "09:30" },
    { text: "10:00", time: "10:00" }
  ]
}

var html = '';
data.times.forEach(function(obj) {
  html += obj.text + '-' + obj.time + ' ';
});
console.log(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Aug 23, 2017 at 15:40

answered Aug 23, 2017 at 15:29

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

3 Comments

theplau Over a year ago

Thanks! :) I realized my object doesn't make much sense so I updated the way it's output.

Rory McCrossan Over a year ago

Ok, well firstly that's a completely different structure to what you first showed, and secondly it still doesn't make a great deal of sense.

theplau Over a year ago

That worked perfectly and makes sense. Thank you for taking the time in helping me. Greatly appreciate it :)

amit wadhwani · Accepted Answer · 2017-08-23 15:37:50Z

0

Updated code.

$.each( data, function( key, val ) { 
      html+=key+val.time;
});
createElement("times", html );

answered Aug 23, 2017 at 15:37

amit wadhwani

1,1201 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

Displaying keys and values of an object with jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related