ES6模块实现，如何加载json文件
ES6模块实现，如何加载json文件
提问于 2015-11-11 20:19:00
我正在实现一个来自https://github.com/moroshko/react-autosuggest的示例
重要代码如下：
import React, { Component } from 'react';
import suburbs from 'json!../suburbs.json';
function getSuggestions(input, callback) {
const suggestions = suburbs
.filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))
.sort((suburbObj1, suburbObj2) =>
suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) -
suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput)
)
.slice(0, 7)
.map(suburbObj => suburbObj.suburb);
// 'suggestions' will be an array of strings, e.g.:
// ['Mentone', 'Mill Park', 'Mordialloc']
setTimeout(() => callback(null, suggestions), 300);
}此示例中的复制-粘贴代码(可以工作)在我的项目中有一个错误：
Error: Cannot resolve module 'json' in /home/juanda/redux-pruebas/components如果我去掉前缀json!：
import suburbs from '../suburbs.json';通过这种方式，我在编译时不会出错(导入完成)。然而，当我执行它时，我得到了错误：
Uncaught TypeError: _jsonfilesSuburbsJson2.default.filter is not a function如果我调试它，我可以看到suburbs是一个objectc，而不是一个数组，所以没有定义filter函数。
然而，在示例中注释的suggestions是一个数组。如果我像这样重写建议，一切都会正常工作：
const suggestions = suburbs
var suggestions = [ {
'suburb': 'Abbeyard',
'postcode': '3737'
}, {
'suburb': 'Abbotsford',
'postcode': '3067'
}, {
'suburb': 'Aberfeldie',
'postcode': '3040'
} ].filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))所以..。多棒的杰森！前缀在导入中做了什么？
为什么我不能把它放到我的代码中呢？一些巴别塔的配置？
回答 4
Stack Overflow用户
发布于 2017-02-04 04:43:14
如果json-loader是数组，那么它不会加载json文件，在这种情况下，您需要确保它有一个键，例如
{
"items": [
{
"url": "https://api.github.com/repos/vmg/redcarpet/issues/598",
"repository_url": "https://api.github.com/repos/vmg/redcarpet",
"labels_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/labels{/name}",
"comments_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/comments",
"events_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/events",
"html_url": "https://github.com/vmg/redcarpet/issues/598",
"id": 199425790,
"number": 598,
"title": "Just a heads up (LINE SEPARATOR character issue)",
},
..... other items in array .....
]}Stack Overflow用户
发布于 2018-04-29 20:18:15
这只适用于React & React Native
const data = require('./data/photos.json');
console.log('[-- typeof data --]', typeof data); // object
const fotos = data.xs.map(item => {
return { uri: item };
});Stack Overflow用户
发布于 2018-08-20 23:19:59
安装了json-loader之后，现在您可以简单地使用：
import suburbs from '../suburbs.json';或者更简单地说：
import suburbs from '../suburbs';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33650399
复制相关文章
相似问题