JAVASCRIPT > le fichier JSON, lire, écrire, modifier

JSON.parse() transforme du JSON en objet JavaScript.

JSON.stringify() transforme un objet JavaScript en JSON.

MODIFIER UN JSON

"maVar": {
  "val_1": "toto",
  "val_2": "foobar"
}

 

# Lire
var f = File.new()
f.open("data.json", File.READ)
var json = JSON.parse(f.get_as_text())
f.close()
var data = json.result

# Modifier
data["year"] = 2012

# Ecrire
f = File.new()
f.open("data.json", File.WRITE)
f.store_string(JSON.print(data, "  ", true))
f.close()

I’ve always overlooked JSON.print.

update a value in a json file

var f = fs.readFileSync(filename);
var content = JSON.parse(f);
var val1 = content.val1;

 

var fs = require('fs');
var fileName = './file.json';
var file = require(fileName);

file.key = "new value";

fs.writeFile(fileName, JSON.stringify(file), function (err) {
  if (err) return console.log(err);
  console.log(JSON.stringify(file));
  console.log('writing to ' + fileName);
});

 

JSON.stringify(file, null, 2)

2 - represents the spaces to indent.

 

 fs.writeFile(path.join(__dirname,jsonPath), JSON.stringify(newFileData), function (err) {}
// read file and make object
let content = JSON.parse(fs.readFileSync('file.json', 'utf8'));
// edit or add property
content.expiry_date = 99;
//write file
fs.writeFileSync('file.json', JSON.stringify(content));

Structure de JSON

{
  "prenom": toto,
  "nom": foobar,
  "adresse": {
    "rue": "3 rue de la liberté"
    "cp": "29200",
    "ville": "brest"
  }
  "mails": [
    "toto@site.fr",
    "foobar@site.fr"
  ]
}

 

—

 

Un objet JSON peut être stocké dans son propre fichier sous la forme d’un fichier texte avec l’extension .json et le MIME type application/json.

 

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

Si nous chargeons cet objet dans un fichier Javascript au sein d’une variable appelée superHeroes par exemple, nous pouvons accéder à ses données de la même façon que nous l’avons fait dans l’article Les bases de JavaScript orienté objets à l’aide de la notation point / crochets. Par exemple :

superHeroes.hometown
superHeroes['active']

Pour accéder aux données plus profondes de la hiérarchie, vous n’avez qu’à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l’expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste :

superHeroes['members'][1]['powers'][2]

1. D’abord, nous partons de la variable — superHeroes
2. À l’intérieur de laquelle nous désirons accéder à la propriété members, donc, nous tapons ["members"].
3. members contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons [1].
4. À l’intérieur de cet objet, nous souhaitons accéder à la propriété powers, donc, nous utilisons ["powers"].
5. Enfin, à l’intérieur de cette propriété powers nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héros. Nous désirons obtenir le troisième, donc nous tapons [2].

Des tableaux en tant que JSON

Un peu plus haut, nous avons dit qu’un objet JSON n’était ni plus ni moins qu’un objet Javascript tout à fait normal et c’est généralement le cas. La raison pour laquelle nous avons dit "généralement le cas" est qu’un tableau peut également être un objet JSON valide, par exemple :

[
  {
    "name": "Molecule Man",
    "age": 29,
    "secretIdentity": "Dan Jukes",
    "powers": [
      "Radiation resistance",
      "Turning tiny",
      "Radiation blast"
    ]
  },
  {
    "name": "Madame Uppercut",
    "age": 39,
    "secretIdentity": "Jane Wilson",
    "powers": [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

Le code ci dessus est une notation JSON parfaitement valide. Vous n’aurez qu’à accéder aux éléments de votre tableau en commençant avec un index, par exemple : [0]["powers"][0].

Notes diverses

• Un objet JSON est uniquement un format de données — il ne contient que des propriétés mais pas de méthodes.
• La notation JSON nécessite l’usage des guillemets pour être valide. Il est obligatoire d’utiliser des guillemets et non les apostrophes autour des chaînes de caractères et des noms de propriétés.
• Une simple virgule ou un double point mal placé peut rendre votre fichier JSON invalide et non fonctionnel. Soyez très attentif aux données que vous utilisez (bien que le JSON généré automatiquement par un programme sera moins enclin à contenir des erreurs, à partir du moment où le programme est codé correctement). Vous pouvez utiliser une application comme JSONLint pour valider votre code JSON.
• Dans l’absolu, le JSON peut prendre la forme de n’importe quel type de données qui serait valide pour être contenu dans du JSON et non juste des tableaux ou des objets. Ainsi, par exemple, une simple chaîne de caractères ou un nombre serait un objet JSON valide.
• Contrairement au JavaScript dans lequel les propriétés (keys) non entourées de guillemets peuvent être utilisées, en JSON, seules les chaînes de caractères entourées de guillemets peuvent être utilisées en tant que propriétés.

Activité : Manipuler le JSON au travers d’un exemple

Allez ! Un petit exemple pour voir comment nous pouvons nous servir de données JSON sur un site web.

Lançons nous

Pour commencer, faites une copie locale de nos fichiers heroes.html et style.css. Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n’est ni plus ni moins qu’un squelette HTML de base :

<header>
</header>

<section>
</section>

Nous trouvons également un élément <script> dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments <header> et <section> pour les stocker dans des variables :

var header = document.querySelector('header');
var section = document.querySelector('section');

Nos données JSON sont disponibles sur notre GitHub ici : https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :

Chargeons notre JSON

Pour charger nos données JSON, nous allons utiliser l’API XMLHttpRequest (qu’on appelle plus couramment XHR). Il s’agit d’un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d’interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n’importe quel extrait HTML) le tout en Javascript. En d’autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l’objet de cet article pour être expliqué plus en détails.

 

Donc, pour commencer, nous allons charger l’URL du fichier JSON que nous voulons récupérer dans une variable. Aussi, ajouter la ligne suivante à votre code Javascript :

1. var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété response) dans la variable superHeroes ; cette variable contiendra désormais l’objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <header> avec les données correspondantes tandis que la seconde créera une carte d’identité pour chaque héros de l’équipe et l’ajoutera dans la <section>.

Nous avons encapsulé ce code dans un gestionnaire d’évènements qui s’exécutera quand l’évènement load sera déclenché sur l’objet request (voir onload) — simplement parce que l’évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété request.response sera disponible au moment où nous essayerons d’en faire quelque chose.

Remplissage de l’en-tête

Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d’en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code :

function populateHeader(jsonObj) {
   var myH1 = document.createElement('h1');
   myH1.textContent = jsonObj['squadName'];
   header.appendChild(myH1);

   var myPara = document.createElement('p');
   myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + jsonObj['formed'];
   header.appendChild(myPara);
}

Nous avons appelé le paramètre de cette fonction jsonObj afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d’abord un élément <h1> à l’aide de createElement(), nous fixons son textContent à la valeur de la propriété squadName de l’objet, puis nous l’ajoutons à l’en-tête en utilisant appendChild(). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l’ajoutons à l’en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère homeTown et la propriété formed de l’objet.

Création des fiches des héros

Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code :

function showHeroes(jsonObj) {
   var heroes = jsonObj['members'];

   for (var i = 0; i < heroes.length; i++) {
      var myArticle = document.createElement('article');
      var myH2 = document.createElement('h2');
      var myPara1 = document.createElement('p');
      var myPara2 = document.createElement('p');
      var myPara3 = document.createElement('p');
      var myList = document.createElement('ul');

      myH2.textContent = heroes[i].name;
      myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
      myPara2.textContent = 'Age: ' + heroes[i].age;
      myPara3.textContent = 'Superpowers:';

      var superPowers = heroes[i].powers;
      for (var j = 0; j < superPowers.length; j++) {
         var listItem = document.createElement('li');
         listItem.textContent = superPowers[j];
         myList.appendChild(listItem);
      }
      myArticle.appendChild(myH2);
      myArticle.appendChild(myPara1);
      myArticle.appendChild(myPara2);
      myArticle.appendChild(myPara3);
      myArticle.appendChild(myList);
      section.appendChild(myArticle);
   }
}

Pour commencer, on stocke la propriété members de l’objet JavaScript dans une nouvelle variable. Ce tableau contient plusieurs objets contenant les informations relatives à chaque héros.

Maintenant, on utilise une boucle for pour parcourir chaque object du tableau. Pour chaque cas, il faut :

1. Créer plusieurs nouveaux éléments : un <article>, un <h2>, trois <p>s, et un <ul>.
2. Mettre le name du héros actuel dans le <h2>.
3. Remplir les trois paragraphes avec leur secretIdentity, leur age, et une ligne nommée "Superpowers:" pour présenter la liste des super-pouvoirs.
4. Stocker la propriété powers dans une nouvelle variable nommée superPowers contenant un tableau listant les super-pouvoirs du héros actuel.
5. Utiliser une autre boucle for pour parcourir les super-pouvoirs du héros actuel — créer pour chacun d’entre eux un élément <li>, y placer le super-pouvoir et placer le listItem dans l’élément <ul> (myList) en utilisant appendChild().
6. Pour finir, on ajoute <h2>, les <p>s et <ul> à <article> (myArticle), et on ajoute <article> à <section>. L’ordre d’ajout est important, c’est l’ordre dans lequel les éléments seront affichés dans le HTML.

Note : Si vous ne parvenez pas à faire fonctionner l’exemple, consultez notre code source heroes-finished.html (ou regardez-le en action.)

Note : Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier superheroes.json dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article Les bases du JavaScript orienté objet pour obtenir plus de détails sur la notation avec un point et avec une accolade.

Conversion entre objets et textes

Dans l’exemple ci-dessus, accéder au JSON est simple, il suffit de définir la requête XHR pour renvoyer la réponse au format JSON en écrivant :

request.responseType = 'json';

Mais on n’a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d’une chaîne de caractères et il faut alors la convertir en objet. À l’inverse, lorsqu’on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu’un objet JSON interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :

• parse() qui accepte un objet JSON sous la forme d’une chaîne de caractères en paramètre et renvoie l’objet JavaScript correspondant.
• stringify() qui accepte un objet JavaScript  en paramètre et renvoie son équivalent sous la forme d’une chaîne de caractères JSON.

Vous pouvez voir la première méthode en action dans notre exemple heroes-finished-json-parse.html (voir le code source) — C’est la même chose que pour l’exemple que nous avons écrit un peu plus tôt, à ceci près qu’on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d’utiliser la méthode parse() pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :

request.open('GET', requestURL);
request.responseType = 'text'; // now we're getting a string!
request.send();

request.onload = function() {
  var superHeroesText = request.response; // get the string from the response
  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

Comme vous pouvez le deviner, stringify() fait exactement le contraire. Essayez d’entrer les lignes ci-dessous une par une dans la console Javascript de votre navigateur pour voir la méthode en action :

var myJSON = { "name": "Chris", "age": "38" };
myJSON
var myString = JSON.stringify(myJSON);
myString

On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec stringify() — en sauvegardant au passage le résultat dans une nouvelle variable avant d’effectuer à nouveau une vérification du contenu.

Résumé

Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de  création et d’analyse syntaxique (parsage)  du JSON  et d’accès aux données qu’il contient. Dans le prochain article, nous débuterons l’apprentissage du Javascript orienté objet.

 

Afin de créer une requête, nous avons besoin d’instancier un nouvel objet XMLHttpRequest à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script :

var request = new XMLHttpRequest();

Maintenant, nous avons besoin d’ouvrir une nouvelle requête grâce à la méthode open(). Ajoutez la ligne suivante :

request.open('GET', requestURL);

Cette méthode prend au moins deux paramètres — il y a d’autres paramètres optionnels disponibles.  Deux suffiront pour notre exemple :

• La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode GET est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
• L’URL où adresser notre requête — il s’agit de l’URL du fichier JSON dont nous parlions tout à l’heure.

Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur 'json' à  responseType, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l’aide de la méthode send() :

request.responseType = 'json';
request.send();

La dernière partie de cette section concerne la réponse du serveur et son traitement. Ajoutez les lignes suivantes à la fin de votre code :

request.onload = function() {
   var superHeroes = request.response;
   populateHeader(superHeroes);
   showHeroes(superHeroes);
}

 

———--

 

<script type="text/javascript">

$(document).ready(function() {
   readTextFile("c:/test.json", function(text){
      var data = JSON.parse(text);
      alert(data);
   });
});

function readTextFile(file, callback) {
   var rawFile = new XMLHttpRequest();
   rawFile.overrideMimeType("application/json");
   rawFile.open("GET", file, true);
   rawFile.onreadystatechange = function() {
      if (rawFile.readyState === 4 && rawFile.status == "200") {
         callback(rawFile.responseText);
      }
   };
   rawFile.send(null);
}

test.json

{"notes":["s0","s5","s4","s3","s2","s1"]}

javascript json228

 

(http://stackoverflow.com/a/11063963/1848578

 

For learning and testing locally, I highly recommend using Firefox. It’s a great browser to develop with because it’s pretty lax with respect to loading local files.

For example, it can load local files using xhr no problem.

Note that you can’t load ANY file off the local system… just files "looking forward" from you HTML page (relative) "foo/bar/data.json", but not "C:/data.json".

Another thing to consider is that the local file system and http are two completely different animals. When a browser makes an "http request" it is assuming a header, response codes, and data will be coming back at it. Whereas when loading local files, there’s no such thing as a header nor response codes because the "request" is just a system-level message to load raw data. One indicator of these differences is how when you drag and drop a file from your system into a browser window, you’ll see file:/// vs a web page using http://

Hope this helps.

And one last thing. When you use the overrideMimeType("application/json"), you’re asking the browser to parse the resulting response as json, not text. So you may want to try returning just the response?

function readTextFile(file, callback) {
   var rawFile = new XMLHttpRequest();
   rawFile.overrideMimeType("application/json");
   rawFile.open("GET", file, true);
   rawFile.onreadystatechange = function() {
      if (rawFile.readyState === 4 && rawFile.status == "200") {
         // callback(rawFile.responseText);
         callback(rawFile.response);
      }
   };
   rawFile.send(null);
}

That way you shouldn’t have to parse the JSON later?

Alternatively, don’t over-ride response, and handle JSON parsing like you’re doing.

function readTextFile(file, callback) {
   var rawFile = new XMLHttpRequest();
   //rawFile.overrideMimeType("application/json");
   rawFile.open("GET", file, true);
   rawFile.onreadystatechange = function() {
      if (rawFile.readyState === 4 && rawFile.status == "200") {
         callback(rawFile.responseText);
      }
   };
   rawFile.send(null);
}

 

———

 

I have saved a JSON file in my local system and created a JavaScript file in order to read the JSON file and print data out. Here is the JSON file:

{"resource":"A","literals":["B","C","D"]}

Let’s say this is the path of the JSON file: /Users/Documents/workspace/test.json.

Could anyone please help me write a simple piece of code to read the JSON file and print the data inside it in JavaScript?

• possible duplicate of How can I get javascript to read from a .json file? –

21 Answers

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

 

var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);

 

function readTextFile(file, callback) {
   var rawFile = new XMLHttpRequest();
   rawFile.overrideMimeType("application/json");
   rawFile.open("GET", file, true);
   rawFile.onreadystatechange = function() {
      if (rawFile.readyState === 4 && rawFile.status == "200") {
         callback(rawFile.responseText);
      }
   }
   rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
   var data = JSON.parse(text);
   console.log(data);
});

 

First, create a json file. In this example my file is words.json

[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]

 

And here is my code i.e,node.js. Note the ‘utf8′ argument to readFileSync: this makes it return not a Buffer (although JSON.parse can handle it), but a string. I am creating a server to see the result…

var fs=require('fs');
var data=fs.readFileSync('words.json', 'utf8');
var words=JSON.parse(data);
var bodyparser=require('body-parser');
console.log(words);
var express=require('express');
var app=express();
var server=app.listen(3030,listening);

function listening(){
   console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json());

 

When you want to read particular id details you can mention the code as..

app.get('/get/:id',function(req,res){
   var i;
   for(i=0;i<words.length;++i)
   {
      if(words[i].id==req.params.id){
         res.send(words[i]);
      }
   }
   console.log("success");
});

 

When you entered in url as localhost:3030/get/33 it will give the details related to that id….and you read by name also. My json file has simillar names with this code you can get one name details….and it didn’t print all the simillar names

app.get('/get/:name',function(req,res){
   var i;
   for(i=0;i<words.length;++i)
   {
      if(words[i].id==req.params.name){
         res.send(words[i]);
      }
   }
   console.log("success");
});

Expand snippet

1. And if you want to read simillar name details, you can use this code.

app.get('/get/name/:name',function(req,res){
word = words.filter(function(val){
  return val.name === req.params.name;
});
res.send(word);

 console.log("success");

});

Expand snippet

1. If you want to read all the information in the file then use this code below.

app.get('/all',sendAll);

 function sendAll(request,response){
 response.send(words);

 }

Expand snippet

• where does require() come from? my browser can’t find it
• require() is builtin function.Using require() you can include modules that exist in separate files.The basic functionality of require is that it reads a javascript file, executes the file, and then proceeds to return the exports object
• require() is built into Node.js, it’s not part of native js
• This answer does not show how to load a file using Vanilla Javascript, but how to do so using Node .js

When in Node.js or when using require.js in the browser, you can simply do:

let json = require('/Users/Documents/workspace/test.json');

Do note: the file is loaded once, subsequent calls will use the cache.

• Not true! Javascript has no require built in
• @PauliSudarshanTerho Thx, you’re right! Added the requirements of Node/require.js to the answer. –

Using the Fetch API is the easiest solution:

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

It works perfect in Firefox, but in Chrome you have to customize security setting.

• When I try this one I got following error: (node:2065) UnhandledPromiseRejectionWarning: Error: only absolute urls are supported
  

Depending on your browser, you may access to your local files. But this may not work for all the users of your app.

To do this, you can try the instructions from here: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Once your file is loaded, you can retrieve the data using:

var jsonData = JSON.parse(theTextContentOfMyFile);

If you are using local files, why not just packade the data as a js object?

data.js

MyData = { resource:"A",literals:["B","C","D"]}

No XMLHttpRequests, no parsing, just use MyData.resource directly

• Okay, but may you please complete MyData.resource part for javascript to show its usage to be more clear. Thanks.

As many people mentioned before, this doesn’t work using an AJAX call. However, there’s a way around it. Using the input element, you can select your file.

The file selected (.json) need to have this structure:

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

 

<input type="file" id="get_the_file">

Then you can read the file using JS with FileReader():

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});

• where do you put in the name of your file?
• In this case, the user has to select the file themselves because of the CORS policy, which basically prevents the developer of the web page from grabbing data they’re not supposed to(ex. I could take their private files, I could make a GET request to a potentially bad script and run it without the user’s permission). The CORS policy makes this kind of stuff a pain to deal with without any kind of backend, but it makes the user safer. If you wanted to actually open a file, you’d have to run a web server which can manage those requests.

Very simple.
Rename your json file to ".js" instead ".json".

<script type="text/javascript" src="my_json.js"></script>

So follow your code normally.

<script type="text/javascript">
var obj = JSON.parse(contacts);

However, just for information, the content my json it’s looks like the snip below.

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';

• that’s not a json file - that’s a JS file.

Just use $.getJSON and then $.each to iterate the pair Key /value. Content example for the JSON file and functional code:

    {
        {
            "key": "INFO",
            "value": "This is an example."
        }
    }

    var url = "file.json";
    $.getJSON(url, function (data) {
        $.each(data, function (key, model) {
            if (model.key == "INFO") {
                console.log(model.value)
            }
        })
    });

You can use XMLHttpRequest() method:

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        //console.log("Json parsed data is: " + JSON.stringify(myObj));
       }
    };
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

You can see the response of myObj using console.log statement(commented out).

If you know AngularJS, you can use $http:

MyController.$inject = ['myService'];
function MyController(myService){

var promise = myService.getJsonFileContents();

  promise.then(function (response) {
    var results = response.data;
    console.log("The JSON response is: " + JSON.stringify(results));
})
  .catch(function (error) {
    console.log("Something went wrong.");
  });
}

myService.$inject = ['$http'];
function myService($http){

var service = this;

  service.getJsonFileContents = function () {
    var response = $http({
      method: "GET",
      url: ("your_file_name.json")
    });

    return response;
  };
}

If you have the file in a different folder, mention the complete path instead of filename.

Since you have a web application, you may have a client and a server.

If you have only your browser, and you want to read a local file from a javascript that is running in your browser, that means that you have only a client. For security reasons, the browser should not let you do such thing.

However, as lauhub explained above, this seems to work:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Other solution is to setup somewhere in your machine a web server (tiny in windows or monkey in linux) and with an XMLHttpRequest or D3 library, request the file from the server and read it. The server will fetch the file from the local filesystem, and serve it to you through the web.

I liked what Stano/Meetar commented above. I use it to read .json files. I have expanded their examples using Promise. Here is the plunker for the same. https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
// readTextFile("DATA.json", function(text){
//     var data = JSON.parse(text);
//     console.log(data);
// });

var task1 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA.json", function(text){
    var data = JSON.parse(text);
    console.log('task1 called');
    console.log(data);
    resolve('task1 came back');
    });
  });
};

var task2 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA2.json", function(text){
    var data2 = JSON.parse(text);
    console.log('task2 called');
    console.log(data2);
    resolve('task2 came back');
    });
  });
}

Promise.race([task1(), task2()])
       .then(function(fromResolve){
          console.log(fromResolve);
       });

The reading of JSON can be moved into another function, for DRY; but the example here is more of showcasing how to use promises.

You must create a new XMLHttpRequest instance and load the contents of the json file.

This tip work for me (https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript):

 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);
 }

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });

• Still works on Firefox but doesn’t on Chrome: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. You could use json2js to convert any JSON to .JS file.

One simple workaround is to put your JSON file inside a locally running server. for that from the terminal go to your project folder and start the local server on some port number e.g 8181

python -m SimpleHTTPServer 8181

Then browsing to http://localhost:8181/ should display all of your files including the JSON. Remember to install python if you don’t already have.

 

You can import It like ES6 module;

import data from "/Users/Documents/workspace/test.json"

• Then how can you import dynamic json file? I think you can only import json files only when you are in development mode by your method. –
• You are right. I only answered considering that question. –

If you could run a local web server (as Chris P suggested above), and if you could use jQuery, you could try http://api.jquery.com/jQuery.getJSON/

 

You could use D3 to handle the callback, and load the local JSON file data.json, as follows:

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });
</script>

 

I took Stano’s excellent answer and wrapped it in a promise. This might be useful if you don’t have an option like node or webpack to fall back on to load a json file from the file system:

 

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) =>
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

 

You can call it like this:

 

readFileP('<path to file>')
   .then(d => {
      '<do something with the response data in d.srcElement.response>'
   });

JSON avec JQuery

$("a#ID").click(function (e) {
   e.preventDefault();
   $.ajax({
      type: 'POST',
      data:'{"var1": "' + $("#nom1").val() + '" , "var2": "' + $("#nom2").val() + '"}',
      url: 'page_sql.php',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      success: function (data, textStatus, XMLHttpRequest) {
         alert(data.d);
         alert(XMLHttpRequest);
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
         alert(textStatus);
      }
   });
});