Vue3中如何解析Google知识图谱搜索API返回的JSON-LD数据

核心问题 #

你直接把Fetch返回的Response对象resolve了，这不是最终的JSON数据——Fetch返回的响应对象需要调用.json()方法（异步操作）才能解析出实际的JSON内容，而JSON-LD本质就是符合JSON语法的格式，完全不需要额外的jsonld包来解析基础结构。

分步修复 #

1. 修正globalSearch函数，正确解析响应 #

直接在Fetch的链式调用中添加response.json()解析步骤，甚至可以直接在这一步提取你需要的itemListElement下的result，减少后续处理：

export async function globalSearch(query) {
  return new Promise((resolve, reject) => {
    const url = `${BASE_URL}${query}&${key}${process.env.VUE_APP_GOOGLE_API_KEY}&${indent}True`;
    console.log("url: " + url);

    fetch(url)
      .then((response) => {
        // 解析响应体为JSON（JSON-LD兼容JSON解析）
        return response.json();
      })
      .then((data) => {
        // 直接提取需要的result数组，处理空值情况
        const results = data.itemListElement?.map(item => item.result) || [];
        resolve(results);
      })
      .catch((err) => {
        console.log("err: " + err.message);
        reject(err.message);
      });
  });
}

2. 修正模板中的v-model语法 #

Vue模板里绑定v-model不需要加this，直接用变量名：

<td class="inputField">
  <input @keyup.enter="search" v-model="inputTitle" id="global-input" type="text" placeholder="Freitext"/>
</td>

3. 简化search方法，修正字段错误 #

原来的代码里错误判断了response.items（知识图谱API返回的是itemListElement而非items），且response.item拼写错误，现在直接接收处理好的结果数组即可：

import { globalSearch } from "../api/films-api.js";

// ...

methods: {
  async search() {
    try {
      // 直接接收处理后的result数组
      this.films = await globalSearch(this.inputTitle);
    } catch (err) {
      console.error("搜索失败:", err);
      this.films = [];
    }
  },
}

补充说明 #

• JSON-LD只是带语义标记的JSON，结构完全符合JSON规范，所以用标准的response.json()就能解析，不需要引入jsonld包——只有当你需要处理语义上下文、数据合并等高级操作时，才需要用到这个包。
• 用可选链?.处理itemListElement不存在的情况，避免空值报错，让代码更健壮。

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