How do I format my AngularJS data model?

Question

Hi I am just beginning with angular and I am struggling to find the answer to what I'm sure is quite a simple thing to do.

I am currently getting the values of some input boxes and pushing them into my scope. This is creating one long 'array' eg:

['data-1','data-2','data-3']

I would like to format my data in the following way instead

$scope.data = [
    {
      'header1':  'data1-1',
       'header1': 'data1-2',
       'header1': 'data1-3'
    },
    {
         'header1': 'data2-1',
         'header1': 'data2-2',
         'header1': 'data2-3'
    }

]

This is my function as it currently is.

$scope.createRow = function(){
    angular.forEach(angular.element("input"), function(value, key){
            $scope.td.push($(value).val());
        });

}

Any help or pointers would be greatly appreciated as I am just getting my head round the angular way

Those aren't valid JS data structures.. objects are key:val pairs, and arrays are simply comma separated values. — tymeJV, Feb 26 '15 at 15:12
In general the way to bind input values to your scope is through the [ng-model](https://docs.angularjs.org/api/ng/directive/ngModel) directive. I'd need to know more about what you're using the data for before giving a good answer. — Morgan Polotan, Feb 26 '15 at 15:28

score 0 · Accepted Answer · edited May 23 '17 at 11:50

Doing this isn't hard... but before I give you a gun to shoot yourself in the foot, just to say that I think it would be beneficial to explain WHY you want structure in that other format you are mentioning. You seem to have lots of data repetition and that's always a red flag.

Now for the code, you just need to create object before pushing it to the array like:

$scope.createRow = function(){
    angular.forEach(angular.element("input"), function(value, key){
        var obj = {
            "header1": val + "-1",
            "header2": val + "-2"
        };

        $scope.td.push(obj);
    });
}

EDIT:

OK, so you are trying to add new row to the table. First of all, you shouldn't be doing angular.forEach, but rather those input elements in HTML should bind to existing scope object, like:

// obviously use better names than Input1Value
// I am here just giving you example
$scope.bindData = {
    Input1Value: null,
    Input2Value: null
}; 

// in HTML you will do
// <input ng-model="bindData.Input1Value" />
// <input ng-model="bindData.Input2Value" />

Now that you've eliminated that nasty angular.forEach you need to have some kind of event handler, for example when user clicks the button you want to add this object to the array to which table is data bound. Just be sure to clone the $scope.bindData object when you add it to array.

$scope.createRow = function(){
    var newRowData = $scope.cloneObject($scope.bindData);
    $scope.td.push(newRowData);
}

// http://heyjavascript.com/4-creative-ways-to-clone-objects/
// https://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object
$scope.cloneObject = function(objToClone) {     
    var newObj = (JSON.parse(JSON.stringify(objToClone)));
}

To close this answer off - keep in mind, if you ever find yourself directly referencing HTML DOM elements in Javascript with AngularJS - you are doing something wrong. It's a nasty habit to eliminate, especially if you are coming from jQuery background (and how doesn't?), where everything is $("#OhHiThere_ElementWithThisId).

Obviously the main thread on this topic on StackOverflow is this one:

“Thinking in AngularJS” if I have a jQuery background?

However I find that it's too theoretical, so Google around and you may find better overviews like:

jQuery vs. AngularJS: A Comparison and Migration Walkthrough

Thanks! I am using that structure to build a table dynamically with each object being a row in the table. — John76, Feb 26 '15 at 15:25
Yeah, I've been looking at the code in your question after writing answer and I started to notice that you probably want to add row in table from input values. Let me give you an example how to do this in a better way, you obviously come from strong Jquery background :) — nikib3ro, Feb 26 '15 at 15:27
Hahah its that obvious is it! That would be very much appreciated, I do need some help getting my head round the angular way of doing things :-) — John76, Feb 26 '15 at 15:29
Thats great. I really appreciate you pointing me in the right direction — John76, Feb 26 '15 at 15:34
No problem - I've been there myself as you can see from history of my questions, so I can relate. Just always keep in mind not to reference DOM elements in Javascript. And one final (selfish) advice - if you find any answer helpful, also upvote it (and accept best answer... which you already did). — nikib3ro, Feb 26 '15 at 15:50

How do I format my AngularJS data model?

1 Answers1