Creating an object from a loop

Question

I'm having an issue creating an object in the correct format when adding to it from a loop.

e.g. I loop through some lists

<ul class="pdmenu">
    <ul class="pdmenu">
    <li class="menu-top" id="vmen-1"><a href="#">1</a></li>
    <li class="menu-item"><a href="#">aaa</a></li>
</ul>

<ul class="pdmenu">
    <li class="menu-top" id="vmen-2"><a href="#">2</a></li>
    <li class="menu-item"><a href="#">aaa</a></li>
    <li class="menu-item"><a href="#">bbb</a></li>
</ul>

<ul class="pdmenu">
    <li class="menu-top" id="vmen-3"><a href="#">3</a></li>
    <li class="menu-item"><a href="#">aaa</a></li>
    <li class="menu-item"><a href="#">bbb</a></li>
</ul>

I use jQuery to loop through the top list item, .menu-top, and push the id and visibility to an object.

jsonmenu = $();  // Set empty object.

$('.menu-top').each(function(index) {                   
    jsonmenu.push({ 
        menu: $(this).attr('id'), 
        visible: "" + $(this).next().is(':visible') + ""
    });
});

This creates the object with member for each item like so

{
    "0": {
        "menu":"vmen-1",
        "visible":"false"
    },
    "length":4,
    "1": {
        "menu":"vmen-2",
        "visible":"false"
    },
    "2":{
        "menu":"vmen-3",
        "visible":"false"
    },
    "3": {
        "menu":"vmen-4",
        "visible":"true"
    }
}

All I need is a simple format like the following;

{
    "menu":"vmen-1",
    "visible":"false" 
},
{
    "menu":"vmen-2",
    "visible":"false"
},
{
    "menu":"vmen-3",
    "visible":"false"
},
{
    "menu":"vmen-4",
    "visible":"true"
}

How can I change this to get the object in this simple format?

FYI what you have is an object - nothing to do with json. I've amended your terminology slightly to save confusion. — Rory McCrossan
– Rory McCrossan, Commented Dec 11, 2012 at 13:07
$() creates a jQuery instance and is absolutely not suited to be serialized. Why did you use it? — Bergi
– Bergi, Commented Dec 11, 2012 at 13:49

Sirko · Accepted Answer · 2012-12-11 13:03:34Z

1

Use a native array and not a JSON object to hold your values:

var jsonmenu = [];

$('.menu-top').each(function(index) {                   
  jsonmenu.push({menu: $(this).attr('id'), visible: ""+$(this).next().is(':visible')});
});

Or, as you just got something like key-value pairs, you could do it like this:

var jsonmenu = {};

$('.menu-top').each(function(index) {                   
  jsonmenu[ $(this).attr('id') ] = $(this).next().is(':visible');
});

which would result in something like this:

{ 
  'vmen-1': false, 
  'vmen-2': false,
  ...
}

answered Dec 11, 2012 at 13:03

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

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

Comments

Jamiec · Accepted Answer · 2012-12-11 15:24:02Z

0

You've already had an answer, to use a native array rather than an empty jQuery object. However, for completeness, there is another convenient method in jQuery to do things like "enumerate a bunch of DOM elements and turn them into an array" .map()

You would use it like so:

var jsonmenu = $('.menu-top').map(function(i,e) {                   
    var $this = $(e);
    return {
        id: $this.attr('id'),
        visible: "" + $this.next().is(':visible') + ""
    }
});

Live example: http://jsfiddle.net/8szrG/

edited Dec 11, 2012 at 15:24

answered Dec 11, 2012 at 13:48

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Collectives™ on Stack Overflow

Creating an object from a loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related