JSON Array vs Объекты в AngularJS

Question

Чтобы начать, я новичок в AngularJS с некоторым знакомством с узлом/Javascript, но с программированием на 25 лет. Я поддерживаю AngularJS SPA и многому научился, однако есть некоторые вещи, которые я не совсем понимаю, и не знаю, является ли это вещь AngularJS, вещь JSON или JavaScript.

В настоящее время данные SPA жестко закодированы в файле JSON, который загружается $http.get в файл. Теперь мне нужно создать настоящий API, который SPA будет призывать к этим данным.

Что озадачивает меня это структура закодированных данных, вот пример

{ 
    "userId": "string", 
    "firstName": "string", 
    "lastName": "string", 
    "phoneNumber": 1234567890, 
    "phoneExtention": 123, 
    "faxNumber": 1234567890, 
    "email": "string@co.com", 
    "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 
     }] 
    } 
    } 
} 

что странно для меня является то, что providers представляет собой совокупность объектов, где ID это имя объекта , Я бы подумал, что вы хотели бы, чтобы providers быть массивом, ну, поставщиков, как это:

{ 
    "userId": "string", 
    "firstName": "string", 
    "lastName": "string", 
    "phoneNumber": 1234567890, 
    "phoneExtention": 123, 
    "faxNumber": 1234567890, 
    "email": "string@co.com", 
    "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 
    }] 
    }] 
} 

Оба содержат те же данные, что только доступ к другому. Я просто собирался переопределить JSON, но я подумал, что лучше понять, почему это было сделано так, как это было раньше. В HTML/AngularJS данные итерируемая над помощью:

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

Но я думаю, что я мог бы так же легко использовать этот код:

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

, если я изменил структуру данных, как описано выше.

Может ли кто-нибудь указать, почему я не хочу менять структуру JSON на массив поставщиков?

Answer 1

Вы должны переопределить свой providers как массив JSON, если вы хотите сохранить порядок объектов, которые он содержит, т. Е. Вы хотите быть уверенным, что к объектам обращаются в том же порядке.

С providers ранее был определен как объект JSON, возможно, этот порядок не имеет значения. Также упрощается доступ как пара ключ-значение (когда вам нужно получить доступ к определенному объекту в providers). Это сводится к вашему варианту использования здесь. Соответственно, вы можете настроить свой угловой код.

Answer 2

В одном случае я могу думать о том, что для использования идентификатора в качестве ключа в объекте вместо обычного массива необходимо создать не дублирующийся массив с идентификатором в качестве уникального ключа. Это вопрос удобства, но и производительность.

Нахождение элемента в объекте по ID будет легче сделать, например:

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

В противоположность:

$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); 
} 

Вы должны учитывать, что методы, которые я использовал, являются лишь небольшой Например, это может быть намного сложнее, и удобство + удобство поиска будет намного больше - представьте, что огромный список поставщиков, все огромные объекты и итерация через них все будет потреблять ресурсы, особенно если поставщик, которого вы ищете, isn ' t один из первых немногих.

На стороне записки, вам не нужно повторно доступа к поставщику полностью повторителя, у вас уже есть значение:

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

Как для поддержания порядка, если вы не смотрите реорганизовать массив, вы можете сохранить массив идентификаторов, который уважает порядок и проходное, что:

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

и:

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