JavaScript新手求助：从Ajax返回对象中提取键值对数据

嘿，我懂你现在的感受——刚接触JavaScript，面对这种层层嵌套的JSON数据，确实不知道从哪下手。咱们先把你拿到的数据结构理清楚，再一步步把需要的信息提取出来，很简单的！

先把你给出的示例数据整理得更清晰些：

const ajaxResponse = {
  "success": {
    "user1": [
      ["2018-01-30", { "Type": "None", "Body": "Message 2" }],
      ["2018-01-29", { "Type": "None", "Body": "Message 1" }]
    ],
    "user2": [
      ["2018-01-28", { "Type": "None", "Body": "Message 2" }],
      ["2018-01-27", { "Type": "None", "Body": "Message 1" }]
    ],
    "user3": [
      ["2018-01-26", { "Type": "None", "Body": "Message 2" }]
      // 更多消息...
    ]
  }
};

接下来，咱们分几种常见的提取需求来写代码：

1. 遍历所有用户，提取每个用户的所有消息 #

如果你想把每个用户的消息都列出来，可以用Object.entries()遍历success里的用户对象，它会把每个键值对（用户名+对应的消息数组）拆出来：

// 先拿到success里的用户数据
const userMessages = ajaxResponse.success;

// 遍历每个用户
for (const [username, messages] of Object.entries(userMessages)) {
  console.log(`=== ${username} 的消息 ===`);
  // 遍历当前用户的每一条消息
  messages.forEach(([date, messageData]) => {
    console.log(`日期: ${date}`);
    console.log(`类型: ${messageData.Type}`);
    console.log(`内容: ${messageData.Body}`);
    console.log('---');
  });
}

这段代码会输出每个用户的名字，以及他们每条消息的日期、类型和内容，非常直观。

2. 提取所有消息到一个数组（不区分用户） #

如果你想把所有消息汇总成一个数组，方便后续统一处理，可以这样做：

const allMessages = [];
const userMessages = ajaxResponse.success;

// 遍历每个用户的消息数组
Object.values(userMessages).forEach(messages => {
  // 用解构赋值快速取出字段，整理成统一格式
  messages.forEach(([date, { Type, Body }]) => {
    allMessages.push({
      date,
      type: Type,
      content: Body
    });
  });
});

console.log(allMessages);
// 输出结果是一个包含所有消息的数组，每个元素是{ date: "...", type: "...", content: "..." }

这里用到的解构赋值是JavaScript里很实用的技巧，能帮你快速从嵌套结构里取出需要的字段，初学者可以慢慢熟悉它。

3. 根据用户名提取特定用户的消息 #

如果你只需要某个用户（比如user2）的消息，直接通过键名访问就行：

const targetUser = 'user2';
const targetMessages = ajaxResponse.success[targetUser];

if (targetMessages) {
  targetMessages.forEach(([date, messageData]) => {
    console.log(`${targetUser} 在 ${date} 的消息: ${messageData.Body}`);
  });
} else {
  console.log(`没有找到用户 ${targetUser} 的消息`);
}

这样就能精准获取指定用户的所有消息啦。

小提示 #

• 如果你不确定数据是否存在（比如有时候Ajax返回的success可能为空），最好先做个判断，比如if (ajaxResponse && ajaxResponse.success)，避免出现Cannot read property 'xxx' of undefined的错误。
• 调试的时候多使用console.log()把中间数据打出来，看看每一步拿到的是什么，这样更容易定位问题。

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