CODEWITHSUNDEEP
javascriptangularjsjson
Devin Richards
Devin Richards

Reputation: 135

JSON Array vs Objects in AngularJS

To start I am new to AngularJS with some familiarity with Node/Javascript but have 25+ years programming. I am now supporting an AngularJS SPA and learning a lot, however there are some things I am not quite understanding, and don't know if this is an AngularJS thing, JSON thing or JavaScript thing.

Currently the SPA has it's data is hardcoded in a JSON file which is loaded with a $http.get to the file. I now need to create the real API that the SPA will be calling for this data.

What perplexes me is the structure of the hardcoded data, here is a sample

{
  "userId": "string",
  "firstName": "string",
  "lastName": "string",
  "phoneNumber": 1234567890,
  "phoneExtention": 123,
  "faxNumber": 1234567890,
  "email": "[email protected]",
  "providers": {
    "1386664670": {
      "firstName": "string",
      "middleInitial": "c",
      "lastName": "string",
      "description": "string",
      "location": [{
        "locationId": 123456789,
        "name": "string",
        "address": "string",
        "city": "string",
        "state": "string",
        "postalCode": "string",
        "phone": 1234567890
      }]
    },
    "1548223027": {
      "firstName": "string",
      "middleInitial": "c",
      "lastName": "string",
      "description": "string",
      "location": [{
        "locationId": 123456789,
        "name": "string",
        "address": "string",
        "city": "string",
        "state": "string",
        "postalCode": "string",
        "phone": 1234567890
      }, {
        "locationId": 123456789,
        "name": "string",
        "address": "string",
        "city": "string",
        "state": "string",
        "postalCode": "string",
        "phone": 1234567890
      }]
    },
    "1336340579": {
      "firstName": "string",
      "middleInitial": "c",
      "lastName": "string",
      "description": "string",
      "location": [{
        "locationId": 123456789,
        "name": "string",
        "address": "string",
        "city": "string",
        "state": "string",
        "postalCode": "string",
        "phone": 1234567890
      }, {
        "locationId": 123456789,
        "name": "string",
        "address": "string",
        "city": "string",
        "state": "string",
        "postalCode": "string",
        "phone": 1234567890
      }]
    }
  }
}

what is odd to me is the fact that providers is a collection of objects where the ID is the name of the object. I would have thought you would want the providers to be an array of, well, providers like this:

{
  "userId": "string",
  "firstName": "string",
  "lastName": "string",
  "phoneNumber": 1234567890,
  "phoneExtention": 123,
  "faxNumber": 1234567890,
  "email": "[email protected]",
  "providers": [{
    "npi": "1386664670",
    "firstName": "string",
    "middleInitial": "c",
    "lastName": "string",
    "description": "string",
    "location": [{
      "locationId": 123456789,
      "name": "string",
      "address": "string",
      "city": "string",
      "state": "string",
      "postalCode": "string",
      "phone": 1234567890
    }]
  }, {
    "npi": "1548223027",
    "firstName": "string",
    "middleInitial": "c",
    "lastName": "string",
    "description": "string",
    "location": [{
      "locationId": 123456789,
      "name": "string",
      "address": "string",
      "city": "string",
      "state": "string",
      "postalCode": "string",
      "phone": 1234567890
    }, {
      "locationId": 123456789,
      "name": "string",
      "address": "string",
      "city": "string",
      "state": "string",
      "postalCode": "string",
      "phone": 1234567890
    }]
  }, {
    "npi": "1336340579",
    "firstName": "string",
    "middleInitial": "c",
    "lastName": "string",
    "description": "string",
    "location": [{
      "locationId": 123456789,
      "name": "string",
      "address": "string",
      "city": "string",
      "state": "string",
      "postalCode": "string",
      "phone": 1234567890
    }, {
      "locationId": 123456789,
      "name": "string",
      "address": "string",
      "city": "string",
      "state": "string",
      "postalCode": "string",
      "phone": 1234567890
    }]
  }]
}

Both contain the same data it is just accessed differently. I was just going to redefine the JSON but I figured I better understand why it was done the way it was first. In the HTML/AngularJS the data is being iterated over via:

<md-tab ng-repeat="(key, value) in vm.providerInfo">
  <md-tab-label>
    {{vm.providerInfo[key].firstName}} {{vm.providerInfo[key].lastName}}
  </md-tab-label>

But I think I could just as easily use this code:

<md-tab ng-repeat="provider in vm.providerInfo">
  <md-tab-label>
    {{provider.firstName}} {{provider.lastName}}
  </md-tab-label>

if I restructured the data as described above.

Can anyone point out why I would not want to change the JSON structure to an array of providers?

Upvotes: 2

Views: 455

Answers (2)

casraf
casraf

Reputation: 21694

One use case I can think of for using the id as the key in an object instead of a regular array, is to create a non-duplicable array-like with the ID as the unique key. It's a matter of convenience, but also performance.

Finding an item in the object by ID would be easier to do, for example:

$scope.updateProvider = function(id, data) {
  // O(1) lookup
  angular.merge($scope.user.providers[id], data);
}

As opposed to:

$scope.updateProvider = function(id, data) {
  // this lookup might end up being very expensive,
  // an O(n), as it loops through all the items until
  // the condition is satisfied or the array ends
  var providerIdx = $scope.user.providers.findIndex(i => { i.id == id });
  angular.merge($scope.user.providers[providerIdx], data);
}

You should consider that the methods I used are mere small examples, it might be much more complex and the convenience + lookup benefit would be much greater - imagine a huge list of providers, all huge objects, and iterating through them all would consume resources - especially if the provider you're looking for isn't one of the first few.

On a side note, you don't need to re-access the provider fully in the repeater, you already have the value:

<md-tab ng-repeat="(key, value) in vm.providerInfo">
  <md-tab-label>
    {{value.firstName}} {{value.lastName}}
  </md-tab-label>

As for keeping the order, if you're not looking to refactor the array, you could keep an array of IDs that respects the order, and loop through that:

$scope.order = [3, 2, 1]; // of course this can be dynamically generated

And:

<md-tab ng-repeat="id in vm.order">
  <md-tab-label>
    {{vm.providerInfo[id].firstName}} {{vm.providerInfo[id].lastName}}
  </md-tab-label>

Upvotes: 2

Divyanshu Maithani
Divyanshu Maithani

Reputation: 15016

You should redefine your providers as a JSON array if you want to preserve the order of objects it contains, i.e. you want to be sure that objects are accessed in the same order you want.

Since providers was earlier defined as JSON object it might be that the order is not important. Also it makes it easier to access as a key-value pair (when you need to access a particular object in providers). It comes down to your use case here. Accordingly you can adjust your angular code.

Upvotes: 0

Related Questions