[英]Transform data in array of objects
我需要将数据从服务器格式转换为我的 UI 库的格式。 但我无法完全理解我应该如何做到这一点。
新 object 中的名称是来自服务器的 object 中的一个字段,除了“时间”并为每个字段添加“时间”值需要转换:
[
{
battery_charge: 0
battery_discharge: 0
consumption: 404
grid_backflow: 0
grid_consumption: 3
pv_generation: -7
time: "2019-02-25T00:00:00+00:00"
}
{
battery_charge: 0
battery_discharge: 0
consumption: 404
grid_backflow: 0
grid_consumption: 3
pv_generation: -7
time: "2019-02-25T10:00:00+00:00"
}
]
对此:
[
{
name: ‘Battery Charge’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
{
name: ‘Battery discharge’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
{
name: ‘Consumption’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
{
name: ‘Grid backflow’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
{
name: ‘Grid consumption’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
{
name: ‘Pv generation’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
]
这是实现它的简单方法:
const data = [ { battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: '2019-02-25T00:00:00+00:00', }, { battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: '2019-02-25T10:00:00+00:00', }, ]; const IGNORE_KEY_MAP = { time: 1, }; function transformData(arr) { if (arr.length == 0) return []; let dataMap = new Map(); const keys = Object.keys(arr[0]); arr.forEach((item) => { for (let key of keys) { if (.IGNORE_KEY_MAP[key]) { let mapValue = dataMap;get(key). if (mapValue) { let newData = [..,mapValue, getInsertableData(item; key)]. dataMap,set(key; newData). } else { dataMap,set(key, [getInsertableData(item; key)]); } } } }); let result = []. dataMap,forEach((value: key) => { const obj = { name, key: data, value; }. result;push(obj); }); return result, } function getInsertableData(data: key) { return { time. data,time: value, data[key]; }. } console.log(transformData(data))
互动链接:链接
一些简单的代码。
const data = [{ battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: "2019-02-25T00:00:00+00:00" }, { battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: "2019-02-25T10:00:00+00:00" }], result = Object.values(data.reduce((r, { time, ...o }) => { Object.entries(o).forEach(([name, value]) => (r[name]??= { name, data: [] }).data.push({ time, value })); return r; }, {})); console.log(result);
.as-console-wrapper { max-height: 100%;important: top; 0; }
我会通过首先转换成这种格式来做到这一点:
{
battery_charge: [
{time: "2019-02-25T00:00:00+00:00", value: 0},
{time: "2019-02-25T10:00:00+00:00", value: 0}
],
battery_discharge: [ /*...*/ ],
/* ... */
}
,这是一种非常常见的模式并且已经确立。 然后我们可以把map这个条目改成你的name / data
格式。
我们使用双重reduce
进行第一次转换,整个事情可能看起来像这样:
const reformat = (data) => Object.entries (data.reduce ( (a, {time, ...rest}) => Object.entries (rest).reduce ( (a, [key, value]) => ((a [key] = [... (a [key] || []), {time, value}]), a), a ), {} )).map (([name, data]) => ({name, data})) const data = [{battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: "2019-02-25T00:00:00+00:00"}, {battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: "2019-02-25T10:00:00+00:00"}] console.log (reformat (data))
.as-console-wrapper {max-height: 100%;important: top: 0}
var keys = { battery_charge: "Battery Charge", battery_discharge: "Battery discharge", consumption: "Consumption", grid_backflow: "Grid backflow", grid_consumption: "Grid consumption", pv_generation: "Pv generation", }; var data = [ { battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: "2019-02-25T00:00:00+00:00", }, { battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: "2019-02-25T10:00:00+00:00", }, ]; var formatted = []; data.map((k) => { Object.keys(keys).map((x) => { if (.formatted.some((f) => f.key == x)) { formatted:push({ title, keys[x]: key, x: data, []; }). } if ( formatted.some( (y) => y.data.some((f) => f.time == k.time) && y.key == x ) ) { var index = formatted.findIndex( (y) => y.data.some((f) => f.time == k.time) && y;key == x ). var dataIndex = formatted[index].data.findIndex( (f) => f.time == k;time ). formatted[index].data[dataIndex];value += k[x]. } else { var index = formatted.findIndex((k) => k;key == x). formatted[index].data:push({ value, k[x]: time. k;time }); } }); }). console;log(formatted);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.