Возврат новой формы массивов с использованием методов lodash

Question

Мой первый массив:

[
  {
    "id": 1,
    "name": "Gilman",
    "entryCheckPointId": 1,
    "entryCheckPoint": {
      "id": 1,
      "name": "Checkpoint A"
    }
  },
  {
    "id": 2,
    "name": "Arshad",
    "entryCheckPointId": 3,
    "entryCheckPoint": {
      "id": 3,
      "name": "Checkpoint C"
    }
  },
  {
    "id": 3,
    "name": "Illyas",
    "entryCheckPointId": 3,
    "entryCheckPoint": {
      "id": 3,
      "name": "Checkpoint C"
    }
  }
]

Второй массив:

[ 
  { 
    "entryCheckPointId": 1, 
    "count": 1
  },
  { 
    "entryCheckPointId": 3, 
    "count": 2 
  } 
]

Я хочу сопоставить их оба, используя entryCheckPointId, и я хочу вернуть новую форму массива, такую ​​как

Ожидаемый результат:

[
  {
    label: 'Checkpoint A', 
    value: 1, // count 
    color: 'green'
  }, 
  {
    label: 'Checkpoint C', 
    value: 2, // count
    color: 'pink'
  }, 
]

Я пытался с функцией карты, но она не работает должным образом, как я ожидал.

Я пытался этот код:

var mergedList = _.map(a1, function(item){
    return _.extend(item, _.findWhere(a2, { id: item.id }));
}); // a1 is firstArray and a2 is secondArray

Можно ли это сделать с помощью какой-либо библиотеки lodash?

И одно сомнение, одинаковые ли lodash и подчеркивание?

Answer 1

Пожалуйста, найдите два примера того, как это выглядит с lodash и без.В обоих примерах используются некоторые новые функции ES6 (например, сокращенные литералы объектов, деструктуризация объектов и т. Д.).

var data1 = [{ "id": 1, "name": "Gilman", "entryCheckPointId": 1, "entryCheckPoint": { "id": 1, "name": "Checkpoint A" }}, { "id": 2, "name": "Arshad", "entryCheckPointId": 3, "entryCheckPoint": { "id": 3, "name": "Checkpoint C" }}, { "id": 3, "name": "Illyas", "entryCheckPointId": 3, "entryCheckPoint": { "id": 3, "name": "Checkpoint C" }}]
var data2 = [ { "entryCheckPointId": 1, "count": 1 }, { "entryCheckPointId": 3,  "count": 2 } ]
var colors = ['red', 'green', 'blue']

var lodashResult = _.map(data2, ({entryCheckPointId, count}, i) => ({
  label: _.find(data1, {entryCheckPointId}).entryCheckPoint.name,
  count,
  color: colors[i]
}))

var noLodashResult = data2.map(({entryCheckPointId, count}, i) => ({
  label: data1.find(x => x.entryCheckPointId == entryCheckPointId).entryCheckPoint.name,
  count,
  color: colors[i]
}))

console.log('lodash', lodashResult)
console.log('noLodash', noLodashResult)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

Как видите, _.lodash несколько проще и короче.

Answer 2

В простом Javascript (который, я думаю, не то, что вы ищете, но это может быть полезно):

var x = [{"id": 1,"name": "Gilman","entryCheckPointId": 1,"entryCheckPoint": {"id": 1,"name": "Checkpoint A"}},{"id": 2,"name": "Arshad","entryCheckPointId": 3,"entryCheckPoint": {"id": 3,"name": "Checkpoint C"}},{"id": 3,"name": "Illyas","entryCheckPointId": 3,"entryCheckPoint": {"id": 3,"name": "Checkpoint C"}}]

var y = [ { "entryCheckPointId": 1, "count": 1},{ "entryCheckPointId": 3, "count": 2 }]

var colors  = ["pink", "red", "green"]

var result = y.map((a,i)=>({
  label: x.filter(b=>b.entryCheckPointId == a.entryCheckPointId)[a.count-1].entryCheckPoint.name,
  value: a.count, 
  color: colors[i]
}))

console.log(result)