I'm implementing an example from https://github.com/moroshko/react-autosuggest
Important code is like this:
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);
}
This copy-paste code from the example (that works), has an error in my project:
Error: Cannot resolve module 'json' in /home/juanda/redux-pruebas/components
If I take out the prefix json!:
import suburbs from '../suburbs.json';
This way I got not errors at compile time (import is done). However I got errors when I execute it:
Uncaught TypeError: _jsonfilesSuburbsJson2.default.filter is not a function
If I debug it I can see suburbs is an objectc, not an array so filter function is not defined.
However in the example is commented suggestions is an array. If I rewrite suggestions like this, everything works:
const suggestions = suburbs
var suggestions = [ {
'suburb': 'Abbeyard',
'postcode': '3737'
}, {
'suburb': 'Abbotsford',
'postcode': '3067'
}, {
'suburb': 'Aberfeldie',
'postcode': '3040'
} ].filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))
So... what json! prefix is doing in the import?
Why can't I put it in my code? Some babel configuration?
First of all you need to install json-loader
:
npm i json-loader --save-dev
Then, there are two ways how you can use it:
In order to avoid adding json-loader
in each import
you can add to webpack.config
this line:
loaders: [
{ test: /\.json$/, loader: 'json-loader' },
// other loaders
]
Then import json
files like this
import suburbs from '../suburbs.json';
Use json-loader
directly in your import
, as in your example:
import suburbs from 'json!../suburbs.json';
Note:
In webpack 2.*
instead of keyword loaders
need to use rules
.,
also webpack 2.*
uses json-loader
by default
*.json files are now supported without the json-loader. You may still use it. It's not a breaking change.
v2.1.0-beta.28
json-loader doesn't load json file if it's array, in this case you need to make sure it has a key, for example
{
"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 .....
]}
This just works on 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 };
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With