使用Lodash groupby和map變換對象數組

Question

這是我想做的，我想采用以下數組，然后將其轉換為數組。 誰能指出我正確的方向？

原始數據

[{
        "FeatureId": 1,
        "District": "ANE",
        "Temperature": 206,
        "RelativeHumidity": 20,
        "WindSpeed": 5,
        "WindGust": 15
      },
      {
        "FeatureId": 1,
        "District": "ANE",
        "Temperature": 196,
        "RelativeHumidity": 19,
        "WindSpeed": 5,
        "WindGust": 15
      },
      {
        "FeatureId": 2,
        "District": "AMO",
        "Temperature": 203,
        "RelativeHumidity": 54,
        "WindSpeed": 9,
        "WindGust": 18
      },
      {
        "FeatureId": 2,
        "District": "AMO",
        "Temperature": 184,
        "RelativeHumidity": 46,
        "WindSpeed": 12,
        "WindGust": 18
      }]

我想要的數據：

[
  {
    "FeatureId": 1,
    "District": "ANE",
    "TemperatureTrend": [ 206, 196 ],
    "RelativeHumidityTrend": [ 20, 19 ],
    "WindSpeedTrend": [ 5, 5 ],
    "WindGustTrend": [ 15, 15 ]
  },
  {
    "FeatureId": 2,
    "District": "AMO",
    "TemperatureTrend": [ 203, 184 ],
    "RelativeHumidityTrend": [ 54, 46 ],
    "WindSpeedTrend": [ 9, 12 ],
    "WindGustTrend": [ 18, 18 ]
  },

]

我嘗試將groupby和map結合使用，但無法解決問題。 我也不確定如何記錄步驟。

Answer 1

除了其他好的答案之外，您還可以使用es6解構。

 var arr = [{ "FeatureId": 1, "District": "ANE", "Temperature": 206, "RelativeHumidity": 20, "WindSpeed": 5, "WindGust": 15 }, { "FeatureId": 1, "District": "ANE", "Temperature": 196, "RelativeHumidity": 19, "WindSpeed": 5, "WindGust": 15 }, { "FeatureId": 2, "District": "AMO", "Temperature": 203, "RelativeHumidity": 54, "WindSpeed": 9, "WindGust": 18 }, { "FeatureId": 2, "District": "AMO", "Temperature": 184, "RelativeHumidity": 46, "WindSpeed": 12, "WindGust": 18 }] var temp = arr.reduce((o, d) => ( { WindSpeed, WindGust, RelativeHumidity, Temperature, ...rest } = ({ ...d , ...{ RelativeHumidityTrend: (o[d.FeatureId] && o[d.FeatureId].RelativeHumidityTrend || []).concat(d.RelativeHumidity) , WindSpeedTrend: (o[d.FeatureId] && o[d.FeatureId].WindSpeedTrend || []).concat(d.WindSpeed) , WindGustTrend: (o[d.FeatureId] && o[d.FeatureId].WindGustTrend || []).concat(d.WindGust) , TemperatureTrend: (o[d.FeatureId] && o[d.FeatureId].TemperatureTrend || []).concat(d.Temperature) } }) , o[d.FeatureId] = rest , o ) , {}) var result = Object.values(temp) console.log(result) 

Answer 2

讓我們使用Array.prototype.reduce，因為它符合您要執行的操作的目的。

    const data = [{
        "FeatureId": 1,
        "District": "ANE",
        "Temperature": 206,
        "RelativeHumidity": 20,
        "WindSpeed": 5,
        "WindGust": 15
      },
      {
        "FeatureId": 1,
        "District": "ANE",
        "Temperature": 196,
        "RelativeHumidity": 19,
        "WindSpeed": 5,
        "WindGust": 15
      },
      {
        "FeatureId": 2,
        "District": "AMO",
        "Temperature": 203,
        "RelativeHumidity": 54,
        "WindSpeed": 9,
        "WindGust": 18
      },
      {
        "FeatureId": 2,
        "District": "AMO",
        "Temperature": 184,
        "RelativeHumidity": 46,
        "WindSpeed": 12,
        "WindGust": 18
      }]

// we gonna create from scratch array and populate it
const aggregatedData = data.reduce((memo, element) => {
  const featureId = element.FeatureId

  const elementIndex = memo.findIndex(el => el.FeatureId === featureId)
  if (elementIndex === -1) {
    memo.push({
      FeatureId: featureId,
      District: element.District,
      TemperatureTrend: [element.Temperature],
      RelativeHumidityTrend: [element.RelativeHumidity],
      WindSpeedTrend: [element.WindSpeed],
      WindGustTrend: [element.WindGust]
    })
  } else {
    memo[elementIndex].TemperatureTrend.push(element.Temperature)
    memo[elementIndex].RelativeHumidityTrend.push(element.RelativeHumidity)
    memo[elementIndex].WindSpeedTrend.push(element.WindSpeed)
    memo[elementIndex].WindGustTrend.push(element.WindGust)
  }

  return memo
}, [])

console.log(aggregatedData)

您可以在Codepen中檢查它

Answer 3

克里斯蒂安，歡迎來到StackOverflow！

您有一個有趣的，多步驟的邏輯問題。 我假設每個FeatureId可能不止2個，實際上，我假設FeatureId的范圍是1 ... n。

我將首先使用forEach循環將所有唯一FeatureId值組成一個數組。 然后，現在知道這些值是什么，我將使用JavaScript的過濾器創建一個新數組，該數組僅包含具有相同FeatureId的那些對象。

由於這些“工作數組”中的所有元素都具有相同的FeatureId，因此將對象組合在一起的最后一步會容易得多。 如果只有一個觀察對象，則可以將現有對象推到最終的成品陣列上。 如果存在> 1個觀察對象，則可以使用合並邏輯並將新的串聯對象推入最終的成品陣列中。

您使用lodash貼圖的想法朝着正確的方向發展，但是1）看看是否可以在沒有Lodash的情況下做到； 2）我認為將filter和forEach結合使用會更好。