current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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?

share|improve this question
    
Not sure why they decided to do it that way. For that case I would also use an array of objects as appose to the object structure. Generally arrays are the preferred method as they preserve order where an object like how the original is will not guarantee that the order will be preserved. The only reason I could think that they would do it that way would be to more easily reference a provider by just saying $obj->providerId to find the provider like you would do with a map. With an array you would need search the array for the key, but that is not really any more difficult to do. – Gordnfreeman 21 hours ago
    
I've voted to close as too broad because there are many reasons why they might have structured it like this. With the object structure you can quickly check whether or not a particular provider exists but you don't have a natural ordering so you may want to sort for display. Also you can easily add, remove, or replace items (e.g. the server might send you items as they change, but only the changed items and its a lot easier to merge them this way). – Duncan 21 hours ago
1  
"don't know if this is an AngularJS thing, JSON thing or JavaScript thing." I would think it is none of those. Both structures you describe are equally valid for different reasons, and the choice of implementing the data in one way or the other wouldn't be forced by the frameworks in question. – Claies 21 hours ago
1  
On one end I understand why people might want this closed, but I don't know the difference between this and a lot of other protected, more general use-case questions from the past. Would this otherwise fit in another Stack Exchange site? – casraf 21 hours ago
up vote 2 down vote

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>
share|improve this answer
1  
I did find in one of the Angular controllers an angular.merge like you described, and yes the provider id is a unique key into the system, so that might help explain the thought/design used by the original programmer. – Devin Richards 20 hours ago
    
Sounds like it :) – casraf 20 hours ago
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.