Cargue el archivo JSON local en la variable

Estoy tratando de cargar un archivo .json en una variable en javascript, pero no puedo hacer que funcione. Probablemente sea solo un error menor, pero no puedo encontrarlo.

Todo funciona bien cuando uso datos estáticos como este:

var json = {
  id: "whatever",
  name: "start",
  children: [{
      "id": "0.9685",
      "name": " contents:queue"
    }, {
      "id": "0.79281",
      "name": " contents:mqq_error"
    }
  }]
}

Puse todo lo que está en {}un content.jsonarchivo e intenté cargarlo en una variable de JavaScript local como se explica aquí: cargar json en variable .

var json = (function() {
  var json = null;
  $.ajax({
    'async': false,
    'global': false,
    'url': "/content.json",
    'dataType': "json",
    'success': function(data) {
      json = data;
    }
  });
  return json;
})();

Lo ejecuté con el depurador de Chrome y siempre me dice que el valor de la variable jsones null. El content.jsonarchivo reside en el mismo directorio que el archivo .js que lo llama.

¿Qué me perdí?

Si pegó su objeto content.jsondirectamente, es JSON inválido. Las claves y valores JSON deben estar entre comillas dobles ( "no ') a menos que el valor sea numérico, booleano nullo compuesto (matriz u objeto). JSON no puede contener funciones o undefinedvalores. A continuación se muestra su objeto como JSON válido.

{
  "id": "whatever",
  "name": "start",
  "children": [
    {
      "id": "0.9685",
      "name": " contents:queue"
    },
    {
      "id": "0.79281",
      "name": " contents:mqq_error"
    }
  ]
}

También tenías un extra }.

Mi solución, como se responde aquí , es usar:

    var json = require('./data.json'); //with path

El archivo se carga solo una vez, las solicitudes posteriores usan caché.

editar Para evitar el almacenamiento en caché, aquí está la función auxiliar de esta publicación de blog dada en los comentarios, usando el fsmódulo:

var readJson = (path, cb) => {
  fs.readFile(require.resolve(path), (err, data) => {
    if (err)
      cb(err)
    else
      cb(null, JSON.parse(data))
  })
}

Para ES6 / ES2015 puede importar directamente como:

// example.json
{
    "name": "testing"
}


// ES6/ES2015
// app.js
import * as data from './example.json';
const {name} = data;
console.log(name); // output 'testing'

Si usa Typecript, puede declarar el módulo json como:

// tying.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}

Desde TypeScript 2.9+ puede agregar - resolveJsonModule compilerOptions intsconfig.json

{
  "compilerOptions": {
    "target": "es5",
     ...
    "resolveJsonModule": true,
     ...
  },
  ...
}

Hay dos posibles problemas:

1. AJAX es asincrónico, por jsonlo que no estará definido cuando regrese de la función externa. Cuando se haya cargado el archivo, la función de devolución de llamada se establecerájson en algún valor, pero en ese momento, a nadie le importa.

   Veo que intentaste arreglar esto con 'async': false. Para verificar si esto funciona, agregue esta línea al código y verifique la consola de su navegador:

   console.log(['json', json]);

2. El camino puede estar equivocado. Utilice la misma ruta que utilizó para cargar su secuencia de comandos en el documento HTML. Entonces, si su secuencia de comandos es js/script.js, usejs/content.json

   Algunos navegadores pueden mostrarle a qué URL intentaron acceder y cómo fue (códigos de éxito / error, encabezados HTML, etc.). Consulte las herramientas de desarrollo de su navegador para ver qué sucede.

El incorporado módulo fs node.js lo hará de forma asíncrona o sincrónica según sus necesidades.

Puedes cargarlo usando var fs = require('fs');

Asincrónico

fs.readFile('./content.json', (err, data) => {
    if (err)
      console.log(err);
    else {
      var json = JSON.parse(data);
    //your code using json object
    }
})

Sincrónico

var json = JSON.parse(fs.readFileSync('./content.json').toString());

Para el formato json dado como en el archivo ~ / my-app / src / db / abc.json:

  [
      {
        "name":"Ankit",
        "id":1
      },
      {
        "name":"Aditi",
        "id":2
      },
      {
        "name":"Avani",
        "id":3
      }
  ]

para importar a un archivo .js como ~ / my-app / src / app.js:

 const json = require("./db/abc.json");

 class Arena extends React.Component{
   render(){
     return(
       json.map((user)=>
        {
          return(
            <div>{user.name}</div>
          )
        }
       )
      }
    );
   }
 }

 export default Arena;

Salida:

Ankit Aditi Avani