Accessing a nested multi-dimensional array in AngularJS

Question

I have two arrays. Here's the first:

$scope.selection = {
  "carrots",
  "celery",
  "corn",
  "apples",
  "bananas"
};

Here's the second:

$scope.shipment = [{
    "id": "0",
    "name": "vegetables",
    "manifest": [{"carrots", "celery", "corn"}]
  }, {
    "id": "1",
    "name": "produce",
    "manifest": [{"apples", "carrots", "bananas"}]
}];

I'd like to be able to see if a match exists in the second array as I iterate through the first. So far, I can use jQuery inArrayto match an indexed item in the second array:

if ($.inArray($scope.shipment.manifest[0], $scope.selection) < 0) { console.log($scope.shipment.id) };

// for "carrots"
=> "0"

But since "carrots" is in two index positions in the shipment array, the above will only return the first shipment id.

How can I get both shipments?

You could use the .filter function in javascript. That will return all elements matching your expression — thsorens
– thsorens, Commented Sep 25, 2015 at 15:01

Buzinas · Accepted Answer · 2015-09-25 15:18:13Z

1

First of all, your object selection is not valid.

Objects are key-value pairs, and you only have strings insde it. It probably should be an array.

Second, the same happens with the objects inside the property manifest. They also must be arrays.

When fixing your code, you can use Array.prototype.filter to achieve what you want:

var result = $scope.shipment.filter(function(obj) {
  return obj.manifest.indexOf(item) >= 0;
});

Look at the snipped I've created below:

var $scope = {};

$scope.selection = [
  "carrots",
  "celery",
  "corn",
  "apples",
  "bananas"
];

$scope.shipment = [{
    "id": "0",
    "name": "vegetables",
    "manifest": ["carrots", "celery", "corn"]
  }, {
    "id": "1",
    "name": "produce",
    "manifest": ["apples", "carrots", "bananas"]
}];

var html = '';

$scope.selection.forEach(function(item, i) {
  var result = $scope.shipment.filter(function(obj) {
    return obj.manifest.indexOf(item) >= 0;
  });
  
  html +=
    '<div>' +
      '<span>Item: ' + item + '</span>' + 
    '</div>' +
    '<div>' +
      '<pre>' + JSON.stringify(result, null, 2) + '</pre>' +
    '</div>';
});

document.body.innerHTML = html;

edited Sep 25, 2015 at 15:18

answered Sep 25, 2015 at 15:03

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

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

1 Comment

Mike Askew Over a year ago

Thanks. This helped me realize what I was missing.

charlietfl · Accepted Answer · 2015-09-25 15:04:18Z

0

$scope.shipment is an array that doesn't have a property manifest but the elements of that array are objects that do have that property

Try

$.inArray($scope.shipment[0].manifest[0], $scope.selection)

As mentioned there are simpler ways but I wanted to point out the problem

answered Sep 25, 2015 at 15:04

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

Mike Askew Over a year ago

This kept getting me back to the same issue I had before. It was only calling the first manifest.

Collectives™ on Stack Overflow

Accessing a nested multi-dimensional array in AngularJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related