无法将我的 JSON 文件转换为 JS 对象

Posted 2023-02-22

【中文标题】无法将我的 JSON 文件转换为 JS 对象

【英文标题】：Can't convert my JSON file into a JS object

【发布时间】：2021-06-05 13:42:17

【问题描述】：

我的 JSON 文件如下所示：

  "branding": 
    "body": 
      "header_text_color": "#224466",
      "body_text_color": "##224466",
      "background_color": "#224466"
    ,
    ...
  

在我的脚本中，我尝试导入该文件，然后将其转换为 JS 对象：

import templateConfigJSON from '@/config.json'
const templateConfig = JSON.parse(templateConfigJSON)

但我收到此错误：

JSON 中的意外标记 u

我做错了什么？

【问题讨论】：

smellz like undefined :) 你能在解析之前咨询 templateconfig 吗？

对我来说工作正常codesandbox.io/s/currying-browser-6l6hc?file=/src/App.js

它已经是一个对象，所以我认为不需要解析它，你可以直接使用它。

【参考方案1】：

JSON.parse() 用于将包含 JSON 表示法的字符串转换为 javascript 对象。既然已经是.json文件，就不需要parse了：

import templateConfigJSON from "@/config.json";
console.log(templateConfigJSON); //outputs object

【讨论】：

我不完全同意“既然它已经是一个.json文件，你不需要解析它”的解释。通常 JSON 文件或字符串需要解析为 JS 对象。这里import 已经负责解析了。这就是为什么我发布我的答案以提供额外的解释?

【参考方案2】：

可能是对 JavaScript import 语句的误解。 它用于以 JavaScript 语法导入文件。

路径中的前缀@ 很可能是Webpack 的resolve.alias，它是您的源文件夹的替身。例如@ alias is configured by Vue。

使用模块加载器导入 JSON

所以当使用 Webpack（由 Vue 配置）导入这样的 JSON 文件时：

import myObject from "@/myObject.json";

您可以立即直接使用它，就像之前定义的任何其他 JavaScript 对象一样：

const keys = Object.keys( myObject );
console.log( keys );

不需要解析，因为import已经完成了。

另请参阅： How to import a JSON file in ECMAScript 6?

在原生 JS 中加载 JSON

在普通的 JavaScript 中，您必须通过 XMLHttpRequest 加载 JSON 并解析它，否则 jQuery 提供了方便的功能：

$.getJSON("test.json", function(json) 
    console.log(json);
    var myObject = JSON.parse(json);
);

另请参阅： Loading local JSON file