来自 LEFT Join 的 ES6 格式数据

Question

假设我有一个从 LEFT JOIN 查询返回的数据，我想通过 Javascript 对其进行格式化。什么是 ES6 方法来完成这个？

假设我有这些数据：

[
    {
      "process_name": "Process 1",
      "bom_qty": 1.000000,
      "wip_qty": 20,
      "material_name": "Material 1",
      "material_id": "id 1",
      "process_id": 1
    },
    {
      "process_name": "Process 2",
      "bom_qty": 1.000000,
      "wip_qty": 11,
      "material_name": "Material 2",
      "material_id": "id 2",
      "process_id": 2
    },
    {
      "process_name": "Process 2",
      "bom_qty": 0.000003,
      "wip_qty": 11,
      "material_name": "Material 3",
      "material_id": "id 3",
      "process_id": 2
    },
    {
      "process_name": "Process 3",
      "bom_qty": "",
      "wip_qty": 58,
      "material_name": "Material 4",
      "material_id": "id 4",
      "process_id": 3
    },
    {
      "process_name": "Process 4",
      "bom_qty": "",
      "wip_qty": 58,
      "material_name": false,
      "material_id": "",
      "process_id": 4
    }
]

对于每个材料，查询中都有一个行条目。

我想将其转换为具有相同过程的行将合并为一个，但不同的材料放置在其中的对象数组中的东西：

[
    {
      "process_name": "Process 1",
      "wip_qty": 20,
      "material": [
            {
                "name": "Material 1",
                "id": "id 1",
                "qty": 1.000000
            }
        ],
      "process_id": 1
    },
    {
      "process_name": "Process 2",
      "wip_qty": 11,
      "material": [
            {
                "name": "Material 2",
                "id": "id 2",
                "qty": 1.000000
            },
            {
                "name": "Material 3",
                "id": "id 3",
                "qty":  0.000003
            },
        ],
      "process_id": 2
    },
    {
      "process_name": "Process 3",
      "wip_qty": 58,
        "material": [
            {
                "name": "Material 4",
                "id": "id 4",
                "qty": ""
            }
        ],
      "process_id": 3
    },
    {
      "process_name": "Process 4",
      "wip_qty": 58,
      "material": [
            {
                "name": false,
                "id": "",
                "qty": ""
            }
      ],
      "process_id": 4
    }
]

Answer 1

您可以使用array#reduce 并以process_id 作为键创建对象。对于每个唯一键，创建一个对象并添加所需的属性。之后，使用Object.values()提取所有值。

var data = [ { "process_name": "Process 1", "bom_qty": 1.000000, "wip_qty": 20, "material_name": "Material 1", "material_id": "id 1", "process_id": 1 }, { "process_name": "Process 2", "bom_qty": 1.000000, "wip_qty": 11, "material_name": "Material 2", "material_id":"id 2", "process_id": 2 }, { "process_name": "Process 2", "bom_qty": 0.000003, "wip_qty": 11, "material_name": "Material 3", "material_id": "id 3", "process_id": 2 }, { "process_name": "Process 3", "bom_qty": "", "wip_qty": 58, "material_name": "Material 4", "material_id": "id 4", "process_id": 3 }, { "process_name": "Process 4", "bom_qty": "", "wip_qty": 58, "material_name": false, "material_id": "", "process_id": 4 } ],
    result = Object.values(data.reduce((r,{process_name, bom_qty, wip_qty, material_name, material_id, process_id}) => {
      r[process_id] = r[process_id] || {process_name, wip_qty, material : [], process_id};
      r[process_id].material.push({name: material_name,id: material_id, qty: bom_qty });
      return r;
    },{}));
console.log(result);

Answer 2

您可以使用Array.prototype.map 重新塑造您的收藏。
像这样的：

const data = [{
    "process_name": "Process 1",
    "bom_qty": 1.000000,
    "wip_qty": 20,
    "material_name": "Material 1",
    "material_id": "id 1",
    "process_id": 1
  },
  {
    "process_name": "Process 2",
    "bom_qty": 1.000000,
    "wip_qty": 11,
    "material_name": "Material 2",
    "material_id": "id 2",
    "process_id": 2
  },
  {
    "process_name": "Process 2",
    "bom_qty": 0.000003,
    "wip_qty": 11,
    "material_name": "Material 3",
    "material_id": "id 3",
    "process_id": 2
  },
  {
    "process_name": "Process 3",
    "bom_qty": "",
    "wip_qty": 58,
    "material_name": "Material 4",
    "material_id": "id 4",
    "process_id": 3
  },
  {
    "process_name": "Process 4",
    "bom_qty": "",
    "wip_qty": 58,
    "material_name": false,
    "material_id": "",
    "process_id": 4
  }
];
const newData = data.map(obj => ({
  process_name: obj.process_name,
  wip_qty: obj.wip_qty,
  material: {
    name: obj.material_name,
    id: obj.material_id,
    qty: obj.wip_qty
  }
}));

console.log(newData);

编辑
我想念你想要的最终结果，我以为你只想重新塑造结构。
现在我知道您还想组合（分组）对象，我编写了另一个使用reduce 和map 的解决方案。

const data = [{
    "process_name": "Process 1",
    "bom_qty": 1.000000,
    "wip_qty": 20,
    "material_name": "Material 1",
    "material_id": "id 1",
    "process_id": 1
  },
  {
    "process_name": "Process 2",
    "bom_qty": 1.000000,
    "wip_qty": 11,
    "material_name": "Material 2",
    "material_id": "id 2",
    "process_id": 2
  },
  {
    "process_name": "Process 2",
    "bom_qty": 0.000003,
    "wip_qty": 11,
    "material_name": "Material 3",
    "material_id": "id 3",
    "process_id": 2
  },
  {
    "process_name": "Process 3",
    "bom_qty": "",
    "wip_qty": 58,
    "material_name": "Material 4",
    "material_id": "id 4",
    "process_id": 3
  },
  {
    "process_name": "Process 4",
    "bom_qty": "",
    "wip_qty": 58,
    "material_name": false,
    "material_id": "",
    "process_id": 4
  }
];
const newData = data.reduce((result, proc) => {
	const foundProc = result.find(p => p.process_id === proc.process_id);
  const {bom_qty: qty,material_name: name,material_id: id, ...newProc  } = proc;
  if(!foundProc){
    result.push({
      ...newProc,
      materials: [{name, id, qty}]
    });
  } else{
  	result = result.map(p => {
    	if(p.process_id !== proc.process_id) return p;
      return{
      	...p,
        materials: [...p.materials, {name, id, qty}]
      }
    });
  }
	return result;
},[]);

console.log(newData);

Answer 3

映射数组需要您完成一半。您仍然需要创建一个中间对象，其中 process_id 为键，对象为值。然后迭代它；如果键不存在，则将值推送到结果数组；如果存在，则将材质数组推送到现有的。有这样的想法（在 Sagiv 之前的代码之后添加它）：

const tmpObj = {}
newData.forEach(e => {
  if (tmpObj[e.process_id]) {
    tmpObj[e.process_id].material.push(e.material[0])
  } else {
    tmpObj[e.process_id] = e
  }
})
const resultArray = []
for (let key of Object.keys(tmpObj)) {
  resultArray.push(tmpObj[key])
}
console.log(resultArray)