Geek asks and answers

How to build a json object using a loop?

I am trying to iterate over multiple elements and create a json object. Each loop should be a new element of the object, but I am having some problems. It seems that only one set of elements has been added, not several.

Here is my code:

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

});

This 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"
}
+5
source share
6 answers

There is no JSON here. Please do not confuse:

  • JavaScript object (data structure)
  • JavaScript literal object (code for creating such a data structure)
  • JSON (data format based on a subset of object literary notation)

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

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

, .

:

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

- . , , , id name .

jQuery, jQuery, :

$this this, $this, , , , (methinks)

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

, , id name, . - , ( , ).

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);
});

[] - , temp_obj - , temp_obj, , .

Quentin : JavaScript JSON.

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

You can do this with jquery. The function will wait for the form of the input elements of the type. It will iterate over the submitted form, will collect every name and input value, and it will create a json object like

Exmple:

HTML

<form action="" method="post" id="myForm">
    <input type="text" name="field1" value="I a value of field 1"/>
    <input type="text" name="field2" value="I a 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 a value of field 1",
        field2 : "I am value of field 2"    
    }
+1
source

More articles:


All Articles