如何将嵌套的 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，否则您不太可能通过在导入的早期执行此操作而获得任何性能优势。

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

how to import nested JSON data into JavaScript

javascript

json

metro-bundler