javascript - read - Implementación de módulos es6, cómo cargar un archivo json

mostrar json en html

Question

Estoy implementando un ejemplo de https://github.com/moroshko/react-autosuggest

El código importante es así:

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);
}

Este código de copiar y pegar del ejemplo (que funciona) tiene un error en mi proyecto:

Error: Cannot resolve module ''json'' in /home/juanda/redux-pruebas/components

Si saco el prefijo json !:

import suburbs from ''../suburbs.json'';

De esta manera no obtuve errores en el momento de la compilación (la importación está hecha). Sin embargo, recibí errores cuando lo ejecuto:

Uncaught TypeError: _jsonfilesSuburbsJson2.default.filter is not a function

Si lo depuro, puedo ver que los suburbios son un objectc, no una matriz, por lo que la función de filtro no está definida.

Sin embargo, en el ejemplo, las sugerencias comentadas son una matriz. Si reescribo sugerencias como esta, todo funciona:

  const suggestions = suburbs
  var suggestions = [ {
    ''suburb'': ''Abbeyard'',
    ''postcode'': ''3737''
  }, {
    ''suburb'': ''Abbotsford'',
    ''postcode'': ''3067''
  }, {
    ''suburb'': ''Aberfeldie'',
    ''postcode'': ''3040''
  } ].filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))

Entonces ... qué json! Qué prefijo está haciendo en la importación?

¿Por qué no puedo ponerlo en mi código? ¿Alguna configuración de babel?

Answer 1

Nodo v8.5.0 +

No necesita el cargador JSON. Node proporciona módulos ECMAScript (soporte para módulos ES6) con el --experimental-modules , puede usarlo así

node --experimental-modules myfile.mjs

Entonces es muy simple

import myJSON from ''./myJsonFile.json'';
console.log(myJSON);

Luego lo vinculará a la variable myJSON .

Answer 2

Con json-loader instalado, ahora simplemente puede usar

import suburbs from ''../suburbs.json'';

o también, incluso más simplemente

import suburbs from ''../suburbs'';

Answer 3

Encontré este hilo cuando no pude cargar un json-file con ES6 TypeScript 2.6 . Seguí recibiendo este error:

TS2307 (TS) No se puede encontrar el módulo ''json-loader! ./ suburbs.json''

Para que funcione, primero tuve que declarar el módulo. Espero que esto ahorre algunas horas para alguien.

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

import suburbs from ''json-loader!./suburbs.json'';

Si intenté omitir el loader de json-loader , recibí el siguiente error de webpack :

CAMBIO DE INTERRUPCIÓN: ya no se permite omitir el sufijo ''-loader'' cuando se usan cargadores. Debe especificar ''json-loader'' en lugar de ''json'', consulte https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Answer 4

Esto solo funciona en 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 };
});

Answer 5

Primero que nada necesitas instalar json-loader :

npm i json-loader --save-dev

Luego, hay dos formas de cómo puede usarlo:

1. Para evitar agregar json-loader en cada import , puede agregar a webpack.config esta línea:

   loaders: [
     { test: //.json$/, loader: ''json-loader'' },
     // other loaders 
   ]

   Luego importe archivos json como este

   import suburbs from ''../suburbs.json'';

2. Use json-loader directamente en su import , como en su ejemplo:

   import suburbs from ''json!../suburbs.json'';

Nota: en el webpack 2.* lugar de los loaders de palabras clave, deben usar rules .

también webpack 2.* usa json-loader por defecto

Los archivos * .json ahora son compatibles sin el cargador json. Aún puedes usarlo. No es un cambio radical.

v2.1.0-beta.28

Answer 6

json-loader no carga el archivo json si es una matriz, en este caso debe asegurarse de que tenga una clave, por ejemplo

{
    "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 .....
]}