loop over array and add separate objects to new array - only one item in new array

Question

I am making a call to a backend API which returns a JSON response. I have read a number of answers on here including this but they dont seem to cover my issue.

The JSON response from the API looks like this:

[
    {
        "id": "1", 
        "name": "test1",
    },
    {
        "id": "2",
        "name": "test2",
    }
]

My Angular JS code looks like this:

controller.testDetailHolder = [];

Test.getAllTests.query({}, function(data){
            for(var i=0; i<data.length;i++){
                controller.testDetailHolder.name = data[i].name;
                controller.testDetailHolder.id = data[i].id;
            }   
        });

When I console.log controller.testDetailHolder it only shows the second value from the GET request (i.e. the array just holds one value) however, I want the controller.testDetailHolder to look like this:

controller.testDetailHolder = [
    {
        id: "1", 
        name: "test1",
    },
    {
        id: "2",
        name: "test2",
    }
]

Any assistance with this would be greatly appreciated.

Thanks.

unxp · Accepted Answer · 2015-09-10 07:53:35Z

1

controller.testDetailHolder = [];

Test.getAllTests.query({}, function(data){
            for(var i=0; i<data.length;i++){
                controller.testDetailHolder.push({
                    name : data[i].hours,
                    id   : data[i].id
                });
            }   
        });

answered Sep 10, 2015 at 7:53

unxp

3582 silver badges12 bronze badges

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

Comments

Simon H · Accepted Answer · 2015-09-10 07:52:37Z

1

Your loop is constantly overwriting controller.testDetailHolder, so you need to use array syntax:

Test.getAllTests.query({}, function(data){
            for(var i=0; i<data.length;i++){
                controller.testDetailHolder[i].name = data[i].hours;
                                           ^^^ 
                controller.testDetailHolder[i].id = data[i].id;
            }   
        });

answered Sep 10, 2015 at 7:52

Simon H

21.2k14 gold badges83 silver badges144 bronze badges

2 Comments

Paul Fitzgerald Over a year ago

hey simon, thanks for your help on this... everyone has given the same answer but as you were the first I wanted to ask --- it is saying Cannot set property 'hours' of undefined --- any idea why I am getting this error?

Simon H Over a year ago

In your situation I would use devtools to indirect the data object being returned

CD.. · Accepted Answer · 2015-09-10 07:53:58Z

1

You can assign the data like:

Test.getAllTests.query({}, function(data){
  controller.testDetailHolder = data;
});

Or use push to add it to the existing array:

Test.getAllTests.query({}, function(data){
  Array.prototype.push.apply(controller.testDetailHolder, data);
});

answered Sep 10, 2015 at 7:53

CD..

74.3k25 gold badges160 silver badges170 bronze badges

Comments

Tro · Accepted Answer · 2015-09-10 07:54:55Z

1

controller.testDetailHolder is the array itself, not an element within the array. You want to add the values as elements, which is accessed by controller.testDetailHolder[i], where i is the index of the element. Modify your code to be:

controller.testDetailHolder[i].name = data[i].hours;
controller.testDetailHolder[i].id = data[i].id;

answered Sep 10, 2015 at 7:54

Tro

90910 silver badges32 bronze badges

Comments

Gabriele Petrioli · Accepted Answer · 2015-09-10 07:55:27Z

The problem is that you are completely overwriting the complete testDetailHolder array, because you do not specify an index when setting the values.

controller.testDetailHolder.name should be controller.testDetailHolder[i].name

Another issue is that you are using data[i].hours when hours is not defined on the JSON.

Lastly since you want to copy the whole object you could just do a single assignment

Test.getAllTests.query({}, function(data){
        controller.testDetailHolder = data;  
    });

Collectives™ on Stack Overflow

loop over array and add separate objects to new array - only one item in new array

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Linked

Related