Carregar o arquivo JSON local na variável

Estou tentando carregar um arquivo .json em uma variável em javascript, mas não consigo fazer funcionar. Provavelmente é apenas um pequeno erro, mas não consigo encontrar.

Tudo funciona bem quando uso dados estáticos como este:

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

Coloquei tudo o que está em {}um content.jsonarquivo e tentei carregá-lo em uma variável JavaScript local, conforme explicado aqui: load json into variable .

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

Eu o executei com o depurador do Chrome e ele sempre me diz que o valor da variável jsoné null. O content.jsonarquivo reside no mesmo diretório do arquivo .js que o chama.

O que eu perdi?

Se você colou seu objeto content.jsondiretamente, ele é JSON inválido. Chaves e valores JSON devem ser colocados entre aspas duplas ( "não '), a menos que o valor seja numérico, booleano nullou composto (matriz ou objeto). JSON não pode conter funções ou undefinedvalores. Abaixo está o seu objeto como JSON válido.

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

Você também teve um extra }.

Minha solução, conforme respondida aqui , é usar:

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

O arquivo é carregado apenas uma vez, outras solicitações usam o cache.

editar Para evitar o armazenamento em cache, aqui está a função auxiliar desta postagem do blog fornecida nos comentários, usando o 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 você pode importar diretamente como:

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


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

Se você usa Typescript, pode declarar o módulo json como:

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

Desde Typescript 2.9+ você pode adicionar - resolveJsonModule compilerOptions emtsconfig.json

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

Existem dois problemas possíveis:

1. AJAX é assíncrono, portanto, jsonserá indefinido quando você retornar da função externa. Quando o arquivo for carregado, a função de retorno de chamada será definida jsonpara algum valor, mas naquele momento, ninguém se importa mais.

   Vejo que você tentou consertar isso com 'async': false. Para verificar se isso funciona, adicione esta linha ao código e verifique o console do seu navegador:

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

2. O caminho pode estar errado. Use o mesmo caminho que você usou para carregar seu script no documento HTML. Então, se o seu script for js/script.js, usejs/content.json

   Alguns navegadores podem mostrar quais URLs eles tentaram acessar e como isso aconteceu (códigos de sucesso / erro, cabeçalhos HTML, etc). Verifique as ferramentas de desenvolvimento do seu navegador para ver o que acontece.

O módulo node.js integrado fs fará isso de forma assíncrona ou síncrona, dependendo de suas necessidades.

Você pode carregá-lo usando var fs = require('fs');

Assíncrono

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

Síncrono

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

Para o formato json fornecido como no arquivo ~ / my-app / src / db / abc.json:

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

para importar para um arquivo .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;

Resultado:

Ankit Aditi Avani