Add items to JSON objects

Question

I have a situation that I just cannot figure out how to do. I'm trying to add items to a JSON object that was sent from the controller.

Here's my models:

 public class Model1
 {
     public Model2 item {get;set;}
     public List<Model2> items {get;set;}
      //

And in the page

 var jsonData = @Html.Raw(JSON.Encode(Model))

This gives me the basic but empty model. Now in the page I fill in various fields and want to add the items into the model for posting. So:

 jsonData.item.field1 = $("#field1").val();

Then I want to add to the list of items, but I cannot find anything that works:

 jsonData.items.add(jsonData.item)

doesn't work throws an error.

 jsonData.items.push(jsonData.item);

works but every item I add ends up the same. Meaning that when I add the second item there are two in the list but they have the same values. Any help would be appreciated.

when is `jsonData.item` getting its new value? if you don't change it it will be the same everytime — pollirrata, Oct 14 '14 at 15:46
Your problem doesn't seem to have anything to do with JSON, but rather with how arrays and objects work in JavaScript. `jsonData` is an *object*, not JSON. As already indicated, if you don't assign a new value to `jsonData.item`, you are simply mutating the existing value, not creating a new value. — Felix Kling, Oct 14 '14 at 15:47
can you be be more clear, and post proper code, as said by @pollirrata I think you are adding that value more than once and never change — dariogriffo, Oct 14 '14 at 15:48
The user fills in textboxes then clicks add and I iterate through the jsonData.item fields with the value from the fields in the page, then try to add it to the list. — Dean.DePue, Oct 14 '14 at 15:48
I believe this is a simpler example of your problem: `var baz = []; var foo = {bar: 42}; baz.push(foo); foo.bar = 21; baz.push(foo); console.log(baz);`. One fundamental thing to learn about JavaScript is that objects are mutable and variables only hold *references* to those objects. — Felix Kling, Oct 14 '14 at 15:50
@FelixKling I guess my small brain doesn't get what you are saying. The values are changing every time I click on the add button in the jsonData.item fields. But when I push to try to add to the list of jsonData.items it adds the data, there are now two of them in the list, but they are the same, they have the values of the last one entered. How do I do this? — Dean.DePue, Oct 14 '14 at 16:16
Maybe the simplest solution is to assign a new object to `jsonData.item` after you pushed. I.e. `jsonData.item = {};`. Again, if you never assign a new value to `jsonData.item`, you are pushing the same object every time, i.e. the array contains multiple references to a single object. Adding the object to the array *does not* create a copy of it. — Felix Kling, Oct 14 '14 at 16:27

score 1 · Accepted Answer · answered Oct 14 '14 at 16:19

As we know, Javascript can be used as OO language and classes and objects can be created on the fly in javascript. Per my understanding, you are using below code to get class attributes in the JavaScript

 var jsonData = @Html.Raw(JSON.Encode(Model))

When this JSON is returned to the client side, it is considered as single object.

So, you can declare a function, acting as class:

   function Model2(jsonData ) {
        this.name       = jsonData.name;
        this.discovered = jsonData.discovered;
    };

    var objModel2_1= new Model2(jsonData);

Now, you can declare an array to add the objModel2.

var arrModel2=[];
// add new objects

attModel.push(objModel2_1);

Finally, when you are done, you can use existing jsonData object to fill i.e.

   jsonData.item=objModel2_1;
   jsonData.items=attModel;

Hope, this will help you.

OK, that did the trick. I had to create a separate array, add to it and then set the list equal to it. Now my problem is in posting the model back to the server. — Dean.DePue, Oct 14 '14 at 16:54
Posting this data won't be that difficult. If you are posting using javascript and ajax, you've to stringify the object and post it.Once you receive it, DE-serialize it to get your own object — Johney, Oct 14 '14 at 17:19

Add items to JSON objects

1 Answers1

Linked