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
    Commented 28 июн. 2016 в 6:35
  • переформулирую вопрос
    – user211576
    Commented 28 июн. 2016 в 7:41
  • что за комбобоксы имеются ввиду? html-селекты или из какой-то библиотеки?
    – Grundy
    Commented 28 июн. 2016 в 7:48
  • кроме того: объект - это не массив, у него нет i-го поля, если же действительно внутри одного массива лежат другие массивы, то задача тривиальна
    – Grundy
    Commented 28 июн. 2016 в 8:21
  • да, обычные селекты
    – user211576
    Commented 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
    Commented 29 июн. 2016 в 10:47
  • @user211576, первый бежит по людям, второй по свойствам людей(имя,фамилия и т.д.)
    – Grundy
    Commented 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
    Commented 30 июн. 2016 в 13:19
  • @user211576, зачем? если ниже приведен пример с уникальностью без лишнего цикла замасированного в indexOf
    – Grundy
    Commented 30 июн. 2016 в 13:20

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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