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

【问题标题】：Can't convert my JSON file into a JS object无法将我的 JSON 文件转换为 JS 对象
【发布时间】：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
它已经是一个对象，所以我认为不需要解析它，你可以直接使用它。

标签： javascript json

【解决方案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

【讨论】：