返回

JavaScript JSON 对象数组处理详解:解析与遍历技巧

javascript

处理 JavaScript 中的 JSON 对象数组

处理来自 JSON 响应或 API 端点的数据时,常常会遇到 JSON 对象数组的情况。本篇文章探讨如何有效地解析和操作这种数据结构,以及在 JavaScript 中循环访问数组内的对象属性。

问题分析

目标是将一个包含 JSON 对象的数组传入一个 JavaScript 函数,并在此函数中能够遍历该数组,访问每个对象的属性,并执行相应的操作。关键步骤包括:

  1. 数据解析: 将 JSON 字符串转换为 JavaScript 对象数组。
  2. 数组遍历: 使用循环结构访问数组中的每个对象。
  3. 属性访问: 访问每个对象上的特定属性。

解决方案

这里提供两种解决思路,第一种利用 JSON.parse(),另一种则使用已经为 JavaScript 对象数组的变量。

方法一: JSON.parse() 解析 JSON 字符串

如果函数的输入是 JSON 字符串,则需使用 JSON.parse() 函数将其转换为 JavaScript 对象数组。这个方法解析字符串,返回一个可操作的 JavaScript 数据结构。然后,可利用标准 JavaScript 数组操作对其进行处理。

function processJsonArray(jsonString) {
    try {
        const data = JSON.parse(jsonString);

        if (!Array.isArray(data)) {
          console.error("Error: Input is not a valid JSON array.");
          return;
        }
          data.forEach(item => {
             if(item && typeof item === 'object' && item.hasOwnProperty('id') && item.hasOwnProperty('Title'))
             {
                console.log("ID:", item.id);
                console.log("Title:", item.Title);
                // 执行其它基于 'id''Title' 的操作...
              } else {
                  console.warn("Warning: Skipped item due to incorrect object structure.", item);
              }
            });
    } catch (e) {
        console.error("Error: Invalid JSON string. Error:", e);
    }
}
const jsonExample = `[
  {
    "id": 28,
    "Title": "Sweden"
  }, 
  {
    "id": 56,
    "Title": "USA"
  },
   {
    "id": 89,
    "Title": "England"
  }
]`;


processJsonArray(jsonExample)

操作步骤:

  1. 解析: 调用 JSON.parse(jsonString) 将 JSON 字符串转换为 JavaScript 对象数组。
  2. 校验: 使用 Array.isArray(data) 检测解析结果是否是数组。非数组的情况给出错误提示。
  3. 遍历: 使用 forEach 方法遍历数组的每个元素。
  4. 校验: 在访问对象的属性前,增加对象存在和对象属性校验。使用 item && typeof item === 'object'确保 item是一个有效对象,使用item.hasOwnProperty('id')item.hasOwnProperty('Title') 确保对象有对应的 idTitle 属性。若存在数据格式错误的对象则给出警告。
  5. 访问: 使用点号(.)或方括号([])访问对象的属性(例如:item.id, item['Title'])。
  6. 处理: 针对每个对象及其属性值执行具体操作。这里只是在控制台输出。

额外提示: 使用 try...catch 语句,提高代码的健壮性,能捕获因无效 JSON 字符串引发的错误。

方法二:直接操作 JavaScript 对象数组

如果函数接收的是已经解析好的 JavaScript 对象数组,无需使用 JSON.parse()。 直接利用 JavaScript 数组操作和属性访问方法即可。

function processObjectArray(dataArray) {
    if (!Array.isArray(dataArray)) {
       console.error("Error: Input is not an array of objects.");
        return;
      }
      dataArray.forEach(item => {
        if(item && typeof item === 'object' && item.hasOwnProperty('id') && item.hasOwnProperty('Title')) {
        console.log("ID:", item.id);
        console.log("Title:", item.Title);
        //执行其它基于 'id' 和 'Title' 的操作...
      } else {
            console.warn("Warning: Skipped item due to incorrect object structure.", item);
          }

      });
  }
const arrayExample = [
  {
    "id": 28,
    "Title": "Sweden"
  }, {
    "id": 56,
    "Title": "USA"
  }, {
    "id": 89,
    "Title": "England"
  }
];
processObjectArray(arrayExample);

操作步骤:

  1. 校验: 使用 Array.isArray(dataArray) 检查输入是否为数组。
  2. 遍历: 使用 forEach 遍历数组的每个对象元素。
  3. 校验: 类似方法一,在访问属性前,检查元素是否为对象,且存在对应的属性。
  4. 访问: 使用 .[] 操作符,访问每个对象的属性,进行相关处理。

安全提示

  1. 输入校验: 始终检查 JSON.parse() 的输出结果,避免处理格式错误或数据缺失的 JSON 数据。
  2. 类型校验 始终确保要访问的属性存在于对象中,在进行相关处理之前,做好类型判断。
  3. 错误处理: 使用 try...catch 代码块捕捉解析错误或其他运行时异常。
  4. 数据清洗: 如果数据来源不可信,对读取的数据做适当的清洗和过滤,确保数据类型符合要求。