CODEWITHSUNDEEP
arraysangularjs
devdropper87
devdropper87

Reputation: 4187

iterating through an array of objects in an object while also grabbing an outer value

I've been stuck on something simple for a little bit. I have the following response JSON:

{
    "terminalName": "Montreal",
    "shipThruLocationCodes":[
        {
            "shipThruLocationId": 112,
            "shipThruLocationCode": "B84"
        }
    ]
}

I have a select where I need to display terminalName (shipThruLocationCode) for each item in the shipThruLocationCodes array, there will only be one terminalName. The data is stored in an array in the controller called $scope.shipThrus. This is what I tried in my ng-repeat but it did not work:

data-ng-options="shipThru.terminalName for shipThru in shipThrus, item.shipThruLocationCode for item in shipThru.shipThruLocationCodes"

I think my idea is correct, but the comma (since I'm trying to display two values) is throwing an error.

So to summarize, the select should show the following for each item "terminal Name" (shipThruLocationCode)

There will be only one terminal name and can be multiple location codes in the shipThrulocationCodes array.

Upvotes: 1

Views: 47

Answers (2)

Saad Shahd
Saad Shahd

Reputation: 963

Check Plunker http://plnkr.co/edit/Vs2mC9zt3HmO9KGMzV6D?p=preview

If you have the list as:

$scope.shipThrus = [{
  terminalName: "Montreal",
  shipThruLocationCodes: [{
    shipThruLocationId: 112,
    shipThruLocationCode: "B84"
  }, {
    shipThruLocationId: 112,
    shipThruLocationCode: "B89"
  }]
}];

Just create this function:

function getLocationCodes(shipThru) {
  return shipThru.shipThruLocationCodes.map(function(locationCode) {
    return locationCode.shipThruLocationCode;
  }).join(', ');
};

Which will parse the locationCodes to B84, B89.

Then parse the shipThrus:

$scope.shipThrus.forEach(function(shipThru) {
  shipThru.label = shipThru.terminalName + ' (' + getLocationCodes(shipThru) + ')';
});

Now you can create the select element with the ng-options attribute as:

ng-options="shipThru.shipThruLocationCodes as shipThru.label for shipThru in shipThrus"

Upvotes: 0

carlcheel
carlcheel

Reputation: 621

Use a function to generate the options. Here's a Plunker to show you an example:

https://plnkr.co/edit/hxlowXWCS6BWh6gGfMMl?p=preview

HTML:

<select ng-model="main.selectedOption" ng-options="option.name for option in main.options"></select>

JS:

var app = angular.module('angularApp', []);

app.controller('MainCtrl', function($scope, $http) {
  var vm = this;
  vm.terminals = [
    {
      "terminalName": "Montreal",
      "shipThruLocationCodes":[
          {
            "shipThruLocationId": 112,
            "shipThruLocationCode": "B84"
          }
      ]
    },
    {
      "terminalName": "Somewhere else",
      "shipThruLocationCodes":[
          {
            "shipThruLocationId": 113,
            "shipThruLocationCode": "B9999"
          }
      ]
    }
  ];

  vm.options = [];

  generateOptions();

  function generateOptions() {
    for(var i = 0; i < vm.terminals.length; i++) {
      var selectOption = {
        name: vm.terminals[i].terminalName + " (" + vm.terminals[i].shipThruLocationCodes[0].shipThruLocationCode + ")"
      };
      vm.options.push(selectOption);
    }
  }

});

Upvotes: 1

Related Questions