2

Добрый день.

Имеется двумерный массив, например, people, количество и названия полей, количество записей неизвестны. Он пришёл, например, отсюда

$scope.people = [];
$http.get("grid.json").then(function(response) {
            $scope.people = response.data; }

Я хочу сделать комбобокс, наполненный всеми значениями двумерного массива people по i-тому полю. Как это сделать? Не могу сообразить, как это сделать в методологии Ангуляра. Т.е. должно быть что-то вроде такого

Name FamilyName
Вася Петров
Ваня Сидоров

Рядом или вместо "Name" появляется комбобокс со значениями "Вася" и "Ваня", на "FamilyName" - "Петров" и "Сидоров". Что-то вроде такого

<tr>
<th>Name
<select>
  <option>Вася</option>
  <option>Ваня</option>
</select>
</th><th>FamilyName
<select>
  <option>Петров</option>
  <option>Сидоров</option>
</select>
</th></tr>

Уточнение: значения в комбобоксе должны быть уникальными. Т.е., например, если значение "Вася" в 0-м поле повторяется более одного раза, в комбобоксе должно появиться один раз.

UPD

пример JSON

[ 
{"Name": "Вася", "FamilyName": "Петров"}, 
{"Name": "Ваня", "FamilyName": "Сидоров"}
]
10
  • чем этот вопрос отличается от вот этого: построение грида и имена полей
    – Grundy
    28 июн 2016 в 6:35
  • переформулирую вопрос
    – user211576
    28 июн 2016 в 7:41
  • что за комбобоксы имеются ввиду? html-селекты или из какой-то библиотеки?
    – Grundy
    28 июн 2016 в 7:48
  • кроме того: объект - это не массив, у него нет i-го поля, если же действительно внутри одного массива лежат другие массивы, то задача тривиальна
    – Grundy
    28 июн 2016 в 8:21
  • да, обычные селекты
    – user211576
    28 июн 2016 в 15:03

1 ответ 1

1

Так как данные, которые необходимо вывести в одном селекте, находятся в разных объектах перед выводом нужно предварительно подготовиться.

Нужно перегруппировать исходный массив так, чтобы названию поля соответствовал список значений, которые можно передать в селект.

Группировать можно так:

$scope.result = $scope.people.reduce(function(acc,people){
    return Object.keys(people).reduce(function(acc,field){
        if(!acc[field])acc[field] = [];
        acc[field].push(people[field]);
        return acc;
    },acc);
},{});

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

$scope.result = $scope.people.reduce(function(acc,people){
    return Object.keys(people).reduce(function(acc,field){
        if(!acc[field])acc[field] = {};
        acc[field][people[field]]=people[field];
        return acc;
    },acc);
},{});

Теперь можно приступать к выводу:

<th data-ng-repeat="(field,values) in result">
    {{field}}
    <select data-ng-options="value for value in values" data-ng-model="selected[field]"></select>
</th>

Рабочий пример:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    var data = [{
      "Name": "Вася",
      "FamilyName": "Петров"
    }, {
      "Name": "Вася",
      "FamilyName": "Сидоров"
    }, {
      "Name": "Ваня",
      "FamilyName": "Сидоров"
    }, {
      "Name": "Ваня",
      "FamilyName": "Петров"
    }];

    $scope.selected = {};
    $scope.selectedUniq = {};
    $scope.result = data.reduce(function(acc, people) {
      return Object.keys(people).reduce(function(acc, field) {
        if (!acc[field]) acc[field] = [];
        acc[field].push(people[field]);
        return acc;
      }, acc);
    }, {});

    $scope.resultUniq = data.reduce(function(acc, people) {
      return Object.keys(people).reduce(function(acc, field) {
        if (!acc[field]) acc[field] = {};
        acc[field][people[field]] = people[field];
        return acc;
      }, acc);
    }, {});

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
    <tr>
      <th>Не униакальные</th>
      <th data-ng-repeat="(field,values) in result">
        {{field}}
        <select data-ng-options="value for value in values" data-ng-model="selected[field]"></select>
      </th>
    </tr>
    <tr>
      <th>Униакальные</th>
      <th data-ng-repeat="(field,values) in resultUniq">
        {{field}}
        <select data-ng-options="value for value in values" data-ng-model="selectedUniq[field]"></select>
      </th>
    </tr>
  </table>
  <pre>{{selected|json}}</pre>
  <pre>{{selectedUniq|json}}</pre>
</div>

4
  • Не совсем понял, зачем вот здесь $scope.result = $scope.people.reduce(function(acc,people){ return Object.keys(people).reduce(function(acc,field){ if(!acc[field])acc[field] = []; acc[field].push(people[field]); return acc; },acc); },{}); два reduce. Вроде уже первый возвращает то, что требуется, нет?
    – user211576
    29 июн 2016 в 10:47
  • @user211576, первый бежит по людям, второй по свойствам людей(имя,фамилия и т.д.)
    – Grundy
    29 июн 2016 в 10:49
  • немного поменял reduce для уникальности $scope.result = $scope.people.reduce(function(acc,people){ return Object.keys(people).reduce(function(acc,field){ if(!acc[field]) {acc[field] = [];} if (acc[field].indexOf(people[field])==-1) {acc[field].push(people[field]);} return acc; },acc); },{});
    – user211576
    30 июн 2016 в 13:19
  • @user211576, зачем? если ниже приведен пример с уникальностью без лишнего цикла замасированного в indexOf
    – Grundy
    30 июн 2016 в 13:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.