current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a JSON object with two arrays of an object x.

I'm using angularJS and I want to add/edit/delete objects in the JSON (just like the Angular TODO app example on angular.org).

Is there a way to create a new empty (with the structure of x but no values) JSON object of x, and simply push that to the above JSON object array?

How do I go about creating an empty value JSON object of x?

My Sample object x is (I nullified all the values) pasted below. So my JSON is just an array of these objects. In Angular, I want the user to fill out a form and hold the data in an empty object of this type and push it to the array. That's my goal.

Sample JSON

      [{
        "id": null,
        "title": "",
        "date": {},
        "billPayerId": null,
        "notes": "Sample Notes",
        "billFinances": {
            "billPayerId": null,
            "billItemEntry": [
                {
                    "itemDescriptionId": 1,
                    "itemDescription": "",
                    "userIdAndLiableCost": [
                        {
                            "userId": null,
                            "liableCost": null
                        },
                        {
                            "userId": null,
                            "liableCost": null
                        }
                    ]
                },
                {
                    "itemDescriptionId": null,
                    "itemDescription": "",
                    "userIdAndLiableCost": [
                        {
                            "userId": null,
                            "liableCost": null
                        },
                        {
                            "userId": null,
                            "liableCost": null
                        }
                    ]
                }
            ],
            "billTotal": null
        },
        "groupId": null
    }];
share|improve this question
3  
You keep using that word "json object". I do not think it means what you think it means. :D –  Crazy Train Jun 8 '13 at 20:08
    
I think I did not use the right terminology but what I meant was I have a JSON var holding an array of type object x. Hope it makes sense now... –  uhsarp Jun 8 '13 at 20:09
    
you could always create a "template" json object and reuse it when you push it into the array. –  Johan Jun 8 '13 at 20:09
    
@user1324816: Are you talking about serialized data structures, or actual JavaScript data structures? I really can't tell from your question. An empty "JSON object" would look like "" in JavaScript. –  Crazy Train Jun 8 '13 at 20:11
    
Sorry. I'll just post my json object. Otherwise, I'm just confusing everyone. Hate it when someone does the same to me. –  uhsarp Jun 8 '13 at 20:13
show 8 more comments

2 Answers

up vote 2 down vote accepted

You can use an object literal to store whatever you want. It is just a bag of properties (i.e. name) and values. e.g. var order = {};

Then an array literal could be used to hold the orders. e.g var orders = []; orders.push(order); But it would be just as easy to use another object literal with the id as a property.

But it seems like you want some sort of validation. Perhaps something to manage the order data and handle the validation, etc. Like so:

orderManager.dataStore = {
  _data: {},
  //_redundantData = [];  //could easily store in an array if id isn't unique
  get: function (id) {
    return this._data[id];
  },
  getAll: function () {
    return this._data;
  },
  set: function (id, order) {
    validateOrder(order);
    this._data[id] = order;
  },

  clear: function (id) {
    this._data[id] = undefined;
  },
  add: function (order) {
      validateOrder(order);
      this._data[order.id] = order;

  },
  assertNotNull: function (data, key) {
      if(data[key] == undefined) {
        throw new Error("Key Missing: " + key + " for " + data.name);
      }
  },
  validateOrder: function(order) {
    assertNotNull(order,"id");
    assertNotNull(order,"title");
    //etc
  },
  containsOrder: function (id) {
    for(var i=0;i<array.length;i++) {
        if(array[i].id === id) {
            return true;
        }
    }
    return false;
  }
};
share|improve this answer
add comment
up vote 3 down vote

If I'm reading all of this right, I think you may be misunderstanding how Angular works. You don't have to create an empty object for Angular to use within a form. As long as your form's inputs use dot notation, it will generate the object for you as the user fills in the inputs with data.

E.g.

<form>
    <input type="text" ng-model="myForm.name">
    <input type="text" ng-model="myForm.email">
    <input type="text" ng-model="myForm.nickname">
</form>

Since we used the dot notation in the ng-model attribute, it creates the object for us as the user fills out the form. The generated object would look like this after the inputs are completed:

$scope.myForm = {
    name: 'Justin',
    email: '[email protected]',
    nickname: 'Cerebrl'
};

Now, normally once the user clicks save, you'd send the data to the server for persistence and you could then just empty the object (e.g. $scope.myForm = {};) to reset the form. But, for some reason, you want to build an array first, then send the whole thing to the server when fully complete (at least that's how I'm understanding it).

To do this, you have to get around the fact that Objects and Arrays in JavaScript are reference types, so you can't push the object full of data to an array, and then empty the object to reset the form as that would then empty the object within the array as well, blowing your data store.

I would personally address this problem with Angular's object copy method (e.g. angular.copy(source);) seen here: http://docs.angularjs.org/api/angular.copy This allows you to make a non-referenced copy of an object and use it without mutating the original object. So, within the "save function", you would have this:

var myNewObj = angular.copy($scope.myForm);
myDataArray.push(myNewObj);
$scope.myForm = {};

That way, you've saved the completed form data, pushed it to the array and cleared the form's input data. Does this answer your question?

share|improve this answer
    
Thank you. That is definitely helpful! –  uhsarp Jun 8 '13 at 23:42
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.