AngularJS готовит данные для MultiBar Chart NVD3 - PullRequest
Новая
       14

AngularJS готовит данные для MultiBar Chart NVD3

0 голосов
/ 14 октября 2018

Я звоню своему API, чтобы получить массив JSON ниже, 

array = [{"date":1533791167870,"count":1,"name":"James"},{"date":1533791167870,"count":3,"name":"Kane"},{"date":1533791167918,"count":1,"name":"Kane"},{"date":1536203856526,"count":2,"name":"Trent"},{"date":1536217871371,"count":5,"name":"Kane"},{"date":1536217882525,"count":4,"name":"James"}]

И мой массив имен, 

name_array = ["Kane","Trent","James","Sam"]

Я использую библиотеку Lodash.Я хотел бы получить свой выходной массив таким образом, чтобы для каждой даты все имена отображались из name_array и, если есть счетчик, получить значение счетчика из массива, в противном случае 0. Я ожидаю, что мой выходной массив как ниже result_array, 

    result_array = [{
    "date": 1533791167870,
    "count": 1,
    "name": "James"
  }, {
    "date": 1533791167870,
    "count": 3,
    "name": "Kane"
  },
  {
    "date": 1533791167870,
    "count": 0,
    "name": "Trent"
  },
  {
    "date": 1533791167870,
    "count": 0,
    "name": "Sam"
  }, {
    "date": 1533791167918,
    "count": 0,
    "name": "James"
  },
  {
    "date": 1533791167918,
    "count": 1,
    "name": "Kane"
  },
  {
    "date": 1533791167918,
    "count": 0,
    "name": "Sam"
  },
  {
    "date": 1533791167918,
    "count": 0,
    "name": "Trent"
  }, {
    "date": 1536203856526,
    "count": 0,
    "name": "James"
  },
  {
    "date": 1536203856526,
    "count": 0,
    "name": "Kane"
  },
  {
    "date": 1536203856526,
    "count": 2,
    "name": "Trent"
  },
  {
    "date": 1536203856526,
    "count": 0,
    "name": "Sam"
  }, {
    "date": 1536217871371,
    "count": 0,
    "name": "James"
  },
  {
    "date": 1536217871371,
    "count": 5,
    "name": "Kane"
  },
  {
    "date": 1536217871371,
    "count": 5,
    "name": "Trent"
  },
  {
    "date": 1536217871371,
    "count": 5,
    "name": "Sam"
  }, {
    "date": 1536217882525,
    "count": 4,
    "name": "James"
  },
  {
    "date": 1536217882525,
    "count": 0,
    "name": "Trent"
  }, {
    "date": 1536217882525,
    "count": 0,
    "name": "Sam"
  },
  {
    "date": 1536217882525,
    "count": 0,
    "name": "Kane"
  }
]

Я делаю это для графика NVD3 AngularJS MultiBar.Поскольку мой массив данных не работает для стекового представления, но групповое представление работает нормально.Я использую AngularJS, Lodash.

Буду признателен за помощь.

1 Ответ

0 голосов
/ 14 октября 2018

Вы можете сделать это с несколькими _.map вызовами: 

let result = _.flatten(_.map(_.groupBy(array, 'date'), (existedEntries, date) => {
  let usedNames = _.map(existedEntries, entry => entry.name);
  let namesDiff = _.difference(name_array, usedNames);
  let dateNumeric = parseFloat(date);
  let enrichedNames = _.map(namesDiff, name => {
    return {
      date: dateNumeric,
      count: 0,
      name: name
    };
  });
  return _.union(existedEntries, enrichedNames);
}));

Прежде всего, мы группируем существующие записи по дате, и для каждой группы определяем, какие имена там используются.Затем мы вычисляем разницу между всеми возможными именами и именами, используемыми в группе.Для каждого имени из разницы мы отображаем его в объект по умолчанию с count: 0 и date, равными дате текущей существующей группы.Далее мы объединяем существующие значения группы с теми, которые мы получили после обогащения имен diff.Последний вызов flatten удаляет структуру временного внутреннего массива.

В случае, если вы используете ES5 или ниже, замените синтаксис стрелки на функции и let на var, то есть var usedNames = _.map(existedEntries, function(entry) {return entry.name;});

PS В ES6 вы можете заменить функцию Lodash map одноименной нативной функцией, т.е. let usedNames = existedEntries.map(entry => entry.name);

...