React项目中读取本地JSON提取节点ID、经纬度并格式化数组求助

别担心，这个转换其实很简单，咱们用Object.entries就能轻松搞定——它能帮你同时拿到每个节点的ID和对应的属性值，完美解决你在循环里同时获取多个字段的需求。

具体实现步骤 #

假设你已经成功读取到了本地JSON文件的内容（格式是你给出的数组包裹对象的结构），咱们直接看转换逻辑：

// 示例原始数据（替换成你实际读取到的data）
const rawNodeData = [
  {
    "33583379": {"lat": 40.7046387, "lon": -74.0167729, "adj": ["33583379", "1659428533"]},
    "33583380": {"lat": 40.7043271, "lon": -74.0169624, "adj": ["33583379", "33583381"]}
  }
];

// 核心转换代码
const formattedNodes = Object.entries(rawNodeData[0]).map(([nodeId, nodeInfo]) => {
  // 将字符串类型的nodeId转为数字，按[nodeID, 经度, 纬度]的顺序返回数组
  return [Number(nodeId), nodeInfo.lon, nodeInfo.lat];
});

console.log(formattedNodes);
// 输出结果：
// [[33583379, -74.0167729, 40.7046387], [33583380, -74.0169624, 40.7043271]]

代码解释 #

• Object.entries(rawNodeData[0])：把JSON里的对象（也就是数组的第一个元素）转换成[nodeId, nodeInfo]形式的数组集合，这样一次遍历就能拿到节点ID和对应的属性。
• map方法：遍历每一组[nodeId, nodeInfo]，解构出需要的字段，把字符串类型的nodeId转成数字，再按你需要的顺序组合成新数组。

不同读取方式的适配 #

如果你是通过fetch读取本地JSON文件，可以把转换逻辑放在then回调里：

fetch('/assets/node-data.json') // 替换成你的JSON文件路径
  .then(res => res.json())
  .then(rawData => {
    const formattedNodes = Object.entries(rawData[0]).map(([nodeId, { lon, lat }]) => [Number(nodeId), lon, lat]);
    // 这里就可以用formattedNodes做后续操作了，比如渲染地图标记
  })
  .catch(err => console.error('读取JSON失败:', err));

如果是直接import本地JSON（React项目默认支持这种方式）：

import rawData from './node-data.json';

const formattedNodes = Object.entries(rawData[0]).map(([nodeId, { lon, lat }]) => [Number(nodeId), lon, lat]);

这样就能轻松得到你想要的格式啦！

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