如何将嵌套的 JSON 数据导入 JavaScript

Question

我有一个名为 ui-components.json 的 JSON 文件，其中包含移动应用程序中使用的用户界面组件的配置数据。 以下是文件中的数据示例：

{
  "picker": {
    "color": {
      "choices": ["brown", "black", "red", "green"],
      "defaultChoice": "red"
    },
    "size": {
      "choices": ["small", "medium", "large"],
      "defaultChoice": "medium"
    },
    "direction": {
      "choices": ["north", "south", "east", "west"],
      "defaultChoice": "west"
    }
  },
  "number": {
    "size": {
      "choices": ["1", "2", "3", "4", "5"],
      "defaultChoice": "5"
    },  
  }
}

目前，正在有选择地导入此数据，如下所示 -

import { picker } from '../../config/ui-components';

虽然这可行，但导入的数据比必要的多得多（比上面的示例中显示的要多）。 导入配置数据的文件只需要color ，所以我尝试了下面的变体，但编辑器显示错误，果然，当尝试运行应用程序时，它抛出了错误。

// variations attempted
import { picker.color } from '../../config/ui-components';
import { picker.color as color } from '../../config/ui-components';
import { picker['color'] } from '../../config/ui-components';
import { picker['color'] as color } from '../../config/ui-components';

是否有可能做到这一点？ 如果是这样，正确的语法是什么？ 如果不是，为什么不呢？

Answer 1

您无法导入部分 json 数据，但如果您使用的环境支持 commonjs 语法，您可以执行以下操作

let{
    picker:{
      color:colors
    }
  }=require("../../config/ui-components") //if the Json file extension is .json 

  console.log(colors)

Answer 2

因此，我不知道您可以像这样直接导入 JSON 的环境，因此您可能正在使用一些处理文件的工具。 不确定它是否支持类似的东西，但你也可以这样做：

import { picker } from '../../config/ui-components';

const pickerColor = picker.color;

除非您的工具支持我从未听说过的晃动 JSON，否则在导入的早期执行此操作不太可能获得任何性能优势。