Node.js处理含嵌套数组的JSON：合并重复产品并传至React前端

需求说明 #

处理一组包含嵌套产品数组的JSON数据，针对每个对象中的productlist数组，将相同名称的产品去重并累加其价格，最终在Node.js完成处理后将结果返回给React前端。

原始数据 #

let obj = [
  {
    "_id": "WER12345",
    "date": "2022-07-24",
    "totalproduct": 6,
    "productlist": [
      {"product": "iphone 13", "price": 1000},
      {"product": "iphone 12", "price": 800},
      {"product": "iphone 11", "price": 600},
      {"product": "iphone 12", "price": 800},
      {"product": "iphone 13", "price": 1000},
      {"product": "iphone 12", "price": 800}
    ]
  },
  {
    "_id": "WER98763",
    "date": "2022-07-24",
    "totalproduct": 4,
    "productlist": [
      {"product": "iphone 13", "price": 1000},
      {"product": "iphone 11", "price": 600},
      {"product": "iphone 11", "price": 600},
      {"product": "iphone 12", "price": 800}
    ]
  }
]

期望处理结果 #

[
  {
    "_id": "WER12345",
    "date": "2022-07-24",
    "totalproduct": 6,
    "productlist": [
      {"product": "iphone 13", "price": 2000},
      {"product": "iphone 12", "price": 2400},
      {"product": "iphone 11", "price": 600}
    ]
  },
  {
    "_id": "WER98763",
    "date": "2022-07-24",
    "totalproduct": 4,
    "productlist": [
      {"product": "iphone 13", "price": 1000},
      {"product": "iphone 11", "price": 1200},
      {"product": "iphone 12", "price": 800}
    ]
  }
]

实现步骤 #

1. Node.js后端处理逻辑 #

通过Array.map遍历外层数组，结合Array.reduce对每个productlist做去重和价格累加：

// 核心数据处理函数
const processProductData = (rawData) => {
  return rawData.map(item => {
    // 累加相同产品的价格
    const processedProducts = item.productlist.reduce((acc, curr) => {
      const target = acc.find(p => p.product === curr.product);
      if (target) {
        target.price += curr.price;
      } else {
        acc.push({...curr});
      }
      return acc;
    }, []);

    // 返回保留原字段的处理后对象
    return {
      ...item,
      productlist: processedProducts
    };
  });
};

// 示例：用Express搭建接口返回处理后的数据
const express = require('express');
const app = express();
app.use(express.json());

app.get('/api/products', (req, res) => {
  const processedData = processProductData(obj);
  res.json(processedData);
});

app.listen(3001, () => {
  console.log('服务运行在3001端口');
});

2. React前端接收并展示数据 #

使用fetch请求后端接口，获取数据后渲染：

import { useState, useEffect } from 'react';

function ProductOrderList() {
  const [orderData, setOrderData] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3001/api/products')
      .then(res => res.json())
      .then(data => setOrderData(data))
      .catch(err => console.error('数据请求失败:', err));
  }, []);

  return (
    <div className="order-container">
      {orderData.map(order => (
        <div key={order._id} className="order-card">
          <h3>订单ID: {order._id}</h3>
          <p>日期: {order.date}</p>
          <p>总商品数: {order.totalproduct}</p>
          <ul className="product-list">
            {order.productlist.map((product, idx) => (
              <li key={idx}>
                {product.product}: ${product.price}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default ProductOrderList;

内容的提问来源于stack exchange，提问作者kick