Załaduj lokalny plik JSON do zmiennej

Próbuję załadować plik .json do zmiennej w javascript, ale nie mogę go uruchomić. To prawdopodobnie tylko drobny błąd, ale nie mogę go znaleźć.

Wszystko działa dobrze, gdy używam takich danych statycznych:

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

Umieściłem wszystko, co znajduje się {}w content.jsonpliku, i próbowałem załadować to do lokalnej zmiennej JavaScript, jak wyjaśniono tutaj: załaduj json do zmiennej .

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

Uruchomiłem go z debugerem Chrome i zawsze mówi mi, że wartość zmiennej jsonto null. Plikcontent.json rezyduje plik w tym samym katalogu co plik .js że nazywa go.

Co mnie ominęło?

Jeśli wkleiłeś obiekt content.jsonbezpośrednio do , jest to nieprawidłowy JSON. Klucze i wartości JSON muszą być umieszczone w podwójnych cudzysłowach ( "nie '), chyba że wartość jest liczbowa, logiczna nulllub złożona (tablica lub obiekt). JSON nie może zawierać funkcji ani undefinedwartości. Poniżej znajduje się Twój obiekt w prawidłowym formacie JSON.

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

Miałeś też dodatkowy }.

Moje rozwiązanie, jak odpowiedział tutaj jest do wykorzystania:

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

Plik jest ładowany tylko raz, kolejne żądania wykorzystują pamięć podręczną.

edytuj Aby uniknąć buforowania, oto funkcja pomocnicza z tego posta podana w komentarzach za pomocą fsmodułu:

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

W przypadku ES6 / ES2015 możesz importować bezpośrednio, jak:

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


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

Jeśli używasz Typescript, możesz zadeklarować moduł json taki jak:

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

Od wersji 2.9 i wersji Typescript można dodawać --olveJsonModule compilerOptions wtsconfig.json

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

Istnieją dwa możliwe problemy:

1. AJAX jest asynchroniczny, więc jsonbędzie niezdefiniowany po powrocie z funkcji zewnętrznej. Po załadowaniu pliku zostanie ustawiona funkcja wywołania zwrotnegojson jakąś wartość, ale w tym czasie nikogo to już nie obchodzi.

   Widzę, że próbowałeś to naprawić 'async': false. Aby sprawdzić, czy to działa, dodaj tę linię do kodu i sprawdź konsolę przeglądarki:

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

2. Ścieżka może być zła. Użyj tej samej ścieżki, której użyłeś do załadowania skryptu w dokumencie HTML. Więc jeśli twój skrypt to js/script.js, użyjjs/content.json

   Niektóre przeglądarki mogą pokazać, do których adresów URL próbowały uzyskać dostęp i jak poszło (kody powodzenia / błędu, nagłówki HTML itp.). Sprawdź narzędzia programistyczne przeglądarki, aby zobaczyć, co się dzieje.

Wbudowany moduł node.js fs zrobi to asynchronicznie lub synchronicznie, w zależności od Twoich potrzeb.

Możesz go załadować za pomocą var fs = require('fs');

Asynchroniczny

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

Synchroniczny

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

Dla podanego formatu json, jak w pliku ~ / my-app / src / db / abc.json:

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

w celu zaimportowania do pliku .js, takiego jak ~ / 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;

Wynik:

Ankit Aditi Avani