Carica il file JSON locale nella variabile

Sto cercando di caricare un file .json in una variabile in javascript, ma non riesco a farlo funzionare. Probabilmente è solo un errore minore ma non riesco a trovarlo.

Tutto funziona perfettamente quando uso dati statici come questo:

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

Ho messo tutto ciò che si trova in {}un content.jsonfile e ho provato a caricarlo in una variabile JavaScript locale come spiegato qui: carica json in variabile .

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

L'ho eseguito con il debugger di Chrome e mi dice sempre che il valore della variabile jsonè null. Il content.jsonfile risiede nella stessa directory del file .js che lo chiama.

Cosa mi sono perso?

Se hai incollato il tuo oggetto content.jsondirettamente, non è un JSON non valido. Le chiavi e i valori JSON devono essere racchiusi tra virgolette doppie ( "non ') a meno che il valore non sia numerico, booleano nullo composto (matrice o oggetto). JSON non può contenere funzioni o undefinedvalori. Di seguito è riportato il tuo oggetto come JSON valido.

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

Hai avuto anche un extra }.

La mia soluzione, come risposto qui , è usare:

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

Il file viene caricato una sola volta, ulteriori richieste utilizzano la cache.

modifica Per evitare la memorizzazione nella cache, ecco la funzione di supporto da questo post del blog fornita nei commenti, utilizzando il fsmodulo:

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

Per ES6 / ES2015 puoi importare direttamente come:

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


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

Se usi Typescript, puoi dichiarare il modulo json come:

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

A partire da Typescript 2.9+ puoi aggiungere - resolutionJsonModule compilerOptions intsconfig.json

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

Ci sono due possibili problemi:

1. AJAX è asincrono, quindi jsonnon sarà definito quando torni dalla funzione esterna. Quando il file è stato caricato, la funzione di callback verrà impostata jsonsu un valore ma in quel momento a nessuno importa più.

   Vedo che hai provato a risolvere questo problema con 'async': false. Per verificare se funziona, aggiungi questa riga al codice e controlla la console del tuo browser:

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

2. Il percorso potrebbe essere sbagliato. Utilizza lo stesso percorso che hai utilizzato per caricare lo script nel documento HTML. Quindi, se il tuo script è js/script.js, usajs/content.json

   Alcuni browser possono mostrarti a quali URL hanno tentato di accedere e come sono andati (codici di successo / errore, intestazioni HTML, ecc.). Controlla gli strumenti di sviluppo del tuo browser per vedere cosa succede.

Il modulo integrato node.js fs lo farà in modo asincrono o sincrono a seconda delle tue esigenze.

Puoi caricarlo usando var fs = require('fs');

asincrono

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

Sincrono

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

Per il formato json dato come nel file ~ / my-app / src / db / abc.json:

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

per importare in file .js come ~ / 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;

Produzione:

Ankit Aditi Avani