web-dev-qa-db-fra.com

Comment importeriez-vous un fichier JSON en JavaScript?

J'ai un fichier JSON avec du contenu

{"name" : "Conrad", "info" : "tst", "children" : [
    {"name" : "Rick" },
    {"name" : "Lynn" },
    {"name" : "John", "children": [
        {"name" : "Dave", "children": [
            {"name" : "Dave" },
            {"name" : "Chris" }      
        ]},
        {"name" : "Chris" }
    ]}
  ]};

Je veux importer ces données de fichier JSON dans un fichier JavaScript et avoir le résultat final comme

var treeData ={"name" : "Conrad", "info" : "tst", "children" : [
        {"name" : "Rick" },
        {"name" : "Lynn" },
        {"name" : "John", "children": [
                {"name" : "Dave", "children": [
                {"name" : "Dave" },
                {"name" : "Chris" }

         ] },
                {"name" : "Chris" }
         ]}
  ]};

J'ai essayé de nombreux exemples de code mais aucun n'a fonctionné.

javascriptjqueryajaxjson
14
user3248233

Analysez le contenu du fichier comme ceci:

var treeData = JSON.parse(fileContent);

Vous ne décrivez pas comment vous obtenez le fichier mais vous pouvez le charger hors de votre serveur en utilisant un simple XMLHttpRequest. Voici une ressource utile pour cela: sing XMLHttpRequest

Extrait du lien avec modifications:

var treeData;

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();

function reqListener(e) {
    treeData = JSON.parse(this.responseText);
}

Mise à jour basée sur les commentaires ci-dessous:

Vous ne pouvez pas charger un fichier avec JSON.parse(). Cette fonction est uniquement capable de convertir une chaîne existante en un objet (si le contenu est au format JSON valide).

Tu dois:

  1. Chargez le fichier de votre serveur dans une variable en utilisant par exemple AJAX (comme indiqué). Vous ne pouvez pas utiliser un chemin de fichier local pour des raisons de sécurité. Configurez un serveur local pour exécuter votre page dans une telle comme le poids léger gratuit serveur Web Mongoose . Cela vous permettra de pointer la racine vers votre dossier local, puis de charger votre page en utilisant http://localhost/

  2. Une fois le fichier chargé, vous pouvez transmettre le contenu à la fonction JSON.parse(). L'exemple ci-dessus montre l'ensemble du processus. Remplacez simplement les liens par des liens réels dans votre code.

(PS: si vous vouliez une solution jQuery, n'oubliez pas de baliser votre question avec la balise jQuery)

10
user1693593

Que diriez-vous $.getJSON

$.getJSON( "yourjsonfile.json", function( data ) {  
    console.log( "JSON Data: " + data);
    $.each( data, function( key, val ) {
        console.log(key + "value:: " + val );
    });
});

Réf: http://api.jquery.com/jquery.getjson/

6
Krish R

Faites une requête AJAX de votre fichier JSON, puis utilisez JSON.parse pour ajouter le résultat dans treeData.

var treeData = JSON.parse(ajaxFunction('jsonfile.php'));

Quelque chose à cet effet ... (cela variera en fonction de votre AJAX)

0
Charles John Thompson III

Si quelqu'un utilise GULP, voici comment résoudre:

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    insert = require('gulp-insert');

gulp.task('jsonConcat', function() {
  return gulp.src(['path/to/json/your-file.json'])
    .pipe(insert.prepend('treeData = '))
    .pipe(insert.append(';'))
    .pipe(concat('final-result.js'))
    .pipe(gulp.dest('path/to/destination/'));
});
0
Syed