JS解析JSON数据报错，如何获取条目数并随机选取元素？

先聊聊你碰到的JSON Parse error: Unexpected identifier "object"错误的根源：

• 首先，fetch是异步操作，你调用fetchJSON()后立刻执行myData = JSON.parse(data)时，data要么还没被赋值（还是undefined），要么当fetch完成后data已经是解析好的JavaScript对象了。而JSON.parse()只能处理JSON格式的字符串，把对象传给它的话，JS会自动把对象转成字符串"[object Object]"，这显然不是合法的JSON，自然就报错了。
• 其次，你完全没必要再调用JSON.parse()，因为response.json()已经帮你把返回的JSON字符串解析成JS对象了。

下面给你修正后的代码，同时实现获取条目数量和随机选取条目的功能：

方法一：用Promise链式调用处理异步逻辑 #

let data;

function fetchJSON() {
    fetch('../keyworddata.json')
      .then(response => {
        if(!response.ok) throw new Error("HTTP status " + response.status);
        return response.json();
      })
      .then(jsonData => {
        data = jsonData;
        // 异步任务完成后再处理数据，此时data已正确获取
        handleData(data);
      })
      .catch(error => {
        console.error('Error:', error);
      });
}

function handleData(data) {
    // 获取keywords数组的条目总数
    const itemTotal = data.keywords.length;
    console.log('条目总数:', itemTotal);

    // 随机选取一条元素
    const randomIndex = Math.floor(Math.random() * itemTotal);
    const randomItem = data.keywords[randomIndex];
    console.log('随机选中的条目:', randomItem);

    // 若需要获取单个条目的属性数量（比如第一条的属性个数）
    const propertyCount = Object.keys(data.keywords[0]).length;
    console.log('单个条目的属性数量:', propertyCount);
}

fetchJSON();

方法二：用async/await简化异步写法 #

async function fetchAndProcessData() {
    try {
        const response = await fetch('../keyworddata.json');
        if(!response.ok) throw new Error("HTTP status " + response.status);
        const data = await response.json();

        // 获取条目总数
        const itemTotal = data.keywords.length;
        console.log('条目总数:', itemTotal);

        // 随机选取一条元素
        const randomIndex = Math.floor(Math.random() * itemTotal);
        const randomItem = data.keywords[randomIndex];
        console.log('随机选中的条目:', randomItem);

        // 获取单个条目的属性数量
        const propertyCount = Object.keys(data.keywords[0]).length;
        console.log('单个条目的属性数量:', propertyCount);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchAndProcessData();

核心注意点： #

• 异步操作的代码必须等异步任务完成后再执行，所以要把数据处理逻辑放在then回调里，或者用async/await让异步代码看起来像同步代码。
• response.json()已经完成了解析工作，不要再画蛇添足调用JSON.parse()。
• 随机选数组元素的关键是：用Math.random()生成0-1的随机数，乘以数组长度后取整，得到合法的数组索引。

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