javascript - 如何使用 map 进行分组?

标签 javascript

我正在使用以下内容对一些数据进行分组:

const formatted = data.map(
    area => {
        return {
            "state": area["Province_State"],
            "lat": area["lat"],
            "long": area["long"],
            "data": Object.keys(area).reduce( (prev, next) => { 
            if(next === 'date' ) {
                // do something 
                prev[next] = removeTime( area[next]) 
            } else {
            prev[next]= area[next];                         
            }
            return prev;
            } , {})
        };
    }
);

但这对于我需要的格式是错误的。

这会产生一系列数据,如下所示:
{state: "Alabama", ID: "c6d6ee4b-89d3-4634-807d-340a2b35d6a4", long: -86, lat: 32, name: "Alabama", …}
ID: "c6d6ee4b-89d3-4634-807d-340a2b35d6a4"
data:
Active: "3470"
Confirmed: "3563"
Country_Region: "US"
Deaths: "93"
FIPS: "1"
Hospitalization_Rate: "12.26494527"
ISO3: "USA"
Incident_Rate: "75.98802021"
Mortality_Rate: "2.610159978"
People_Hospitalized: "437"
People_Tested: "21583"
Province_State: "Alabama"
Recovered: ""
Testing_Rate: "460.3001516"
UID: "84000001"
date: "2020-04-12"
lat: "32.3182"
long: "-86.9023"
__proto__: Object
lat: 32
long: -86
name: "Alabama"
state: "Alabama"

但是由于每个州都有更多的数据,每个 date , 我需要 data 下的所有日期为了让它像:
State: "Alabama"
ID: 2
Lat: 41.1533
Long: 20.1683
Province/State: ""
data: Array(109)
[0 … 99]
0: {date: "1/22/20", Confirmed: 0, Deaths: 0, Recovered: 0}
1: {date: "1/23/20", Confirmed: 0, Deaths: 0, Recovered: 0}
2: {date: "1/24/20", Confirmed: 0, Deaths: 0, Recovered: 0}

我正在使用的代码没有将所有日期分组到 data 下但它给出了一系列单独的对象

最佳答案

看起来您想按州而不是日期分组,所以您实际上应该使用 Array.prototype.reduce() 但逻辑应该略有不同:

const data = [{
  'Province_State': 'CA',
  lat: 1.1,
  long: 1.1,
  date: '1/22/20 12:00',
  Confirmed: 0,
  Deaths: 0,
  Recovered: 0,
}, {
  'Province_State': 'CA',
  lat: 1.2,
  long: 1.2,
  date: '1/23/20 12:00',
  Confirmed: 1,
  Deaths: 1,
  Recovered: 1,
}, {
  'Province_State': 'LA',
  lat: 1.3,
  long: 1.3,
  date: '1/22/20 12:00',
  Confirmed: 2,
  Deaths: 2,
  Recovered: 2,
}];

const formatted = data.reduce((merged, entry) => {
  const {
    // These properties will show up only once per state:
    lat,
    long,
    Province_State: state,
    // Anything else is grouped inside the `data` field for this state's entry:
    ...rest
  } = entry;
  
  // You can modify the `date` field here:
  rest.date = rest.date.split(' ')[0];
  
  if (merged.hasOwnProperty(state)) {
    // If we already added an entry for this state, simply push the other properties to `data`:
    merged[state].data.push(rest);
  } else {
    // Otherwise, add the entry for this state:
    merged[state] = { state, lat, long, data: [rest] };
  }  
  
  return merged;  
}, { });

console.log(formatted);


如果您想使用常规循环而不是 Array.prototype.reduce() :

const data = [{
  'Province_State': 'CA',
  lat: 1.1,
  long: 1.1,
  date: '1/22/20 12:00',
  Confirmed: 0,
  Deaths: 0,
  Recovered: 0,
}, {
  'Province_State': 'CA',
  lat: 1.2,
  long: 1.2,
  date: '1/23/20 12:00',
  Confirmed: 1,
  Deaths: 1,
  Recovered: 1,
}, {
  'Province_State': 'LA',
  lat: 1.3,
  long: 1.3,
  date: '1/22/20 12:00',
  Confirmed: 2,
  Deaths: 2,
  Recovered: 2,
}];

const merged = {};

for (let i = 0; i < data.length; ++i) {
  const {
    // These properties will show up only once per state:
    lat,
    long,
    Province_State: state,
    // Anything else is grouped inside the `data` field for this state's entry:
    ...rest
  } = data[i];
  
  // You can modify the `date` field here:
  rest.date = rest.date.split(' ')[0];
  
  if (merged.hasOwnProperty(state)) {
    // If we already added an entry for this state, simply push the other properties to `data`:
    merged[state].data.push(rest);
  } else {
    // Otherwise, add the entry for this state:
    merged[state] = { state, lat, long, data: [rest] };
  }  
}

console.log(merged);

关于javascript - 如何使用 map 进行分组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61719376/

相关文章:

javascript - Firebase存储添加文件引用到firestore

Javascript 返回循环总和

javascript - 一个长 If 条件与许多带有检查点的较小条件

javascript - 缩短 JQuery 片段

javascript - 只允许在 html textinput 中输入某些字符

javascript - 未找到 <React/RCTDefines.h> 文件

c# - asp.net MVC 4 0x80070005 - Javascript 运行时错误 : access denied

javascript - React JS 与 Redux 似乎不会重新渲染

javascript - 如果使用 php 标签,php jquery 示例将不起作用

javascript - Angularjs 路由解析