如果2个数据匹配，则将数据推入javascript数组（AngularJS）

Question

So, I am working on an array list using JavaScript(angular).

There is a form for user to add some data and there is a button to insert it into a div below the form. This div is an array.

The important part of this form is the request_area. Every product has its request_area. So instead of pushing a div with same request_area over and over, i want to "group" it. So here is the step

1.Array empty, user add product, and then 1 div created with Request Area 1.

2.Request Area 1 exists, user add another product with the same request area, so now Request Area 1 should have 2 products inside.

3.If user input another product with different request_area, the array should consist of 2 objects now (Request area 1 and 2).

Here is my code

vm.request_area = [];

function insertProduct(){
var data = {
        code: vm.data.code, 
        qty: vm.data.qty,
        area: vm.data.area,
        description: vm.data.description,
        uom: vm.data.uom,
        index_number: vm.data.index_number
};
    var exist = false;
    var number;
    for(var i = 0; i < vm.request_area.length; i++){
        if(vm.data.area == vm.request_area[i].request_area){
            exist  = true;
            number = i;
            break;
        }
    }
    if(exist){
        vm.request_area[number].details.push({data});
    }
    else{
        vm.request_area.push({
            request_area: vm.data.area,
            details: {data}
        });
    }
 }

The code above is working well, except in adding product into the same request_area. the following code gives me

 if(exist){
        vm.request_area[number].details.push({data});
    }

 vm.request_area[number].push is not a function

Please note that I can add products and everything is working fine. only the add product into existing request_area is failed.

What am i missing here??? thank you :)

Answer 1

You are essentially targeting something in your code that is not of type array and trying to push to it. vm.request_area is the array. vm.request_area[number] is an entry in the array and is therefore not an array (unless it is a nested array, but I'm guessing it's not...right?)

If you anticipate multiple matches, you may want to create an array of objects. This may be overkill but I'm not entirely sure of your use case.

You have a for loop here:

for(var i = 0; i < vm.request_area.length; i++){
    if(vm.data.area == vm.request_area[i].request_area){
        exist  = true;
        number = i;
        break;
    }
}

Why not do your check within this?

for(var i = 0; i < vm.request_area.length; i++){
    if(vm.data.area == vm.request_area[i].request_area){
        number = i;
        vm.request_area[number] = {details: 'foo'}
    }
}

This should create an array of number-keyed objects. IE:

[1: {details: 'abc'}, 2: {details: 'xyz'}]

Answer 2

 vm.request_area.push({
            request_area: vm.data.area,
            details: {data}
        });

It seems that you just push an object into vm.request_area, not an array. So vm.request_area[number] is a normal object instead of an array, which has no method like push .