如何合并不同来源的JSON数据与文本数据生成目标JSON结构？

我来帮你搞定这个数据合并的难题！你之前的代码主要有两个问题：一是没有把获取到的数据保留下来用于后续合并，二是异步请求的处理方式不对，导致没法把球员名字和posts数据正确对应上。咱们一步步修正：

先说说你之前代码的问题 #

• 第一段代码只打印了posts的前两项，但没有把这些数据存下来，后续没法用；
• 第二段代码循环里多次调用fetch，不仅效率低（没必要请求多次API），而且因为fetch是异步的，循环跑完的时候请求可能还没完成，根本没法准确收集到两个球员名字，更别说和posts对应了；
• 完全没有把两个数据源的数据关联合并的逻辑。

正确的实现方案 #

我们可以用async/await配合Promise.all来协调异步请求，先把所有需要的数据都拿到手，再一一合并：

步骤1：封装获取数据的函数 #

先分别写两个函数，用来获取posts数据和球员名字：

// 获取前2篇posts数据
async function getPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  return posts.slice(0, 2); // 只保留前两项
}

// 获取前2个球员的first_name
async function getPlayerNames() {
  const response = await fetch('https://www.balldontlie.io/api/v1/players?per_page=5');
  const playerData = await response.json();
  // 提取前两个球员的first_name并返回数组
  return playerData.data.slice(0, 2).map(player => player.first_name);
}

步骤2：合并两个数据源的数据 #

用Promise.all并行发起两个请求，等数据都返回后，把球员名字和对应的posts合并：

async function mergeData() {
  try {
    // 同时获取两个数据源的数据，等两个请求都完成再继续
    const [posts, playerNames] = await Promise.all([getPosts(), getPlayerNames()]);
    
    // 把每个球员名字对应到posts的每一项里
    const mergedResult = posts.map((post, index) => {
      return {
        first_name: playerNames[index],
        ...post // 展开post原有的所有属性（userId、id、title、body）
      };
    });
    
    console.log('合并后的结果:', mergedResult);
    return mergedResult; // 可以把结果用于后续逻辑
  } catch (error) {
    // 处理可能的网络错误或数据解析错误
    console.error('数据获取或合并失败:', error);
  }
}

// 调用合并函数
mergeData();

代码解释 #

• async/await让异步代码像同步代码一样易读，避免了嵌套回调的混乱；
• Promise.all可以同时发起多个异步请求，比挨个请求效率更高，而且会等所有请求都成功后才返回结果；
• getPlayerNames只请求一次API就拿到所有需要的球员数据，比循环请求更合理；
• 用map方法遍历posts数组，把每个post和对应的球员名字一一合并，保证顺序和你期望的一致；
• 添加了try/catch来捕获可能的错误，让代码更健壮。

运行这段代码后，你就能得到完全符合你期望的JSON结构啦！

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