How to build a json object with a loop?

Question

I'm trying to loop through a number of items, and create a json object. Each loop should be a new item on the object, but I'm having some issues doing it. It seems that only one set of items gets added, instead of multiple ones.

Here is my code:

jsonObj = {}
rows.each(function (index) {
    jsonObj["id"] = $this.find('.elementOne').val();
    jsonObj["name"] = $this.find('.elementTwo').text();

});

Here is what my json looks like:

{
    id: "3"
    name: "Stuff"
},

Here is what I am trying to do:

{
    id: "1"
    name: "Stuff"
},
{
    id: "2"
    name: "Stuff"
},
{
    id: "3"
    name: "Stuff"
}

Technically there is no such thing as a "JSON object" - JSON is a string representing a JavaScript Object. What you are dealing with here is a JavaScript Object, not JSON. — Mark Eirich
– Mark Eirich, Commented Jun 30, 2012 at 22:32
JSON is a string representing a data structure which can be parsed with many programming languages. It is based on a subset of JavaScript, but the data types it supports appear in a great many languages. — Quentin
– Quentin, Commented Jun 30, 2012 at 22:36

Quentin · Accepted Answer · 2012-06-30 22:34:11Z

28

There is no JSON here. Please don't confuse:

A JavaScript object (a data structure)
A JavaScript object literal (code to create such a data structure)
JSON (a data format based on a subset of object literal notation)

If you want an ordered list of objects (or any other kind of JavaScript data structure) then use an array. Arrays have a push method.

var myData = [];
rows.each(function (index) {
    var obj = { 
        id: $this.find('.elementOne').val(),
        name: $this.find('.elementTwo').text()
    };
    myData.push(obj);
});

answered Jun 30, 2012 at 22:34

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

gdoron · Accepted Answer · 2012-06-30 22:34:03Z

5

You override the object instead of adding it a new value each iteration.

Fixed code using an array:

jsonObj = [];
rows.each(function(index) {
    jsonObj.push({
        'id': $this.find('.elementOne').val(),
        'name': $this.find('.elementTwo').text()
    });
});

answered Jun 30, 2012 at 22:34

gdoron

151k59 gold badges302 silver badges375 bronze badges

Comments

Anurag · Accepted Answer · 2012-06-30 22:40:11Z

What you want is an array of objects. When you try to write the same property on the same object multiple times, it gets overwritten which is why you're seeing id and name contain values for the last iteration of the loop.

Although you haven't tagged the question with jQuery, it does look like jQuery, so here's a solution:

I've taken the liberty to change $this to this because $this seems to be referring to the same object in each iteration, which is now what you may want (methinks)

var myArray = rows.map(function() {
    return {
        id: $(this).find('.elementOne').val(),
        name: $(this).find('.elementTwo').text()
    };
});

Atanas Kovachev · Accepted Answer · 2020-01-30 11:31:24Z

You can do it like this with jquery. The function will expect form elements of type input. It will iterate over thr passed form and it will collect each input name and value and it will create a json object like

Exmple:

HTML

<form action="" method="post" id="myForm">
    <input type="text" name="field1" value="I am value of field 1"/>
    <input type="text" name="field2" value="I am value of field 2"/>
</form>

Javascript

function buildObject(form) {
            var jsonObject = [],
                tempObj = {};
            $(form).find("input:not(input[type='submit'])").each(function() {
                tempObj[$(this).attr("name")] = $(this).val();
            });

            jsonObject.push(tempObj);

            return jsonObject[0];
    }
    buildObject($("#myForm"));
    //Will produce

     jsonObj = {
        field1 : "I am value of field 1",
        field2 : "I am value of field 2"    
    }

Mitya · Accepted Answer · 2012-06-30 22:34:23Z

This is because you're merely overwriting the same properties of your object, id and name, each time. You need to be making a sub-object for each, then push it into the master object (which I've converted to array, since it's non-associative).

var jsonObj = []
rows.each(function (index) {
    var temp_obj = {};
    temp_obj["id"] = $this.find('.elementOne').val();
    temp_obj["name"] = $this.find('.elementTwo').text();
    jsonObj.push(temp_obj);
});

[EDIT] - as Mark Eirich's answer shows, the temp_obj is unnecessary - you could push an anonymous object instead, but I defined temp_obj just to make it crystal clear what's happening.

Also read Quentin's very good points re: common confusion between JavaScript objects and JSON.

Mark Eirich · Accepted Answer · 2012-06-30 22:33:50Z

1

var jsonObj = [];
rows.each(function(index) {
    jsonObj.push({
        id: $this.find('.elementOne').val(),
        name: $this.find('.elementTwo').text()
    });
});

answered Jun 30, 2012 at 22:33

Mark Eirich

10.1k2 gold badges27 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to build a json object with a loop?

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Related