web-dev-qa-db-fra.com

JSON + Javascript/jQuery. Comment importer des données d'un fichier JSON et les analyser?

Si j'ai un fichier JSON nommé names.json avec:

{"employees":[
    {"firstName":"Anna","lastName":"Meyers"},
    {"firstName":"Betty","lastName":"Layers"},
    {"firstName":"Carl","lastName":"Louis"},
]}

Comment puis-je utiliser son contenu en javascript?

javascriptjqueryjsongetjson
16
GarouDan

Un exemple comment faire cela pourrait être:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.getJSON('names.json',function(data){
            console.log('success');
            $.each(data.employees,function(i,emp){
                $('ul').append('<li>'+emp.firstName+' '+emp.lastName+'</li>');
            });
        }).error(function(){
            console.log('error');
        });
    });
</script>
</head>
<body>
    <ul></ul>
</body>
</html>
10
kbec

Votre fichier JSON ne contient pas de JSON valide. Essayez ce qui suit à la place.

 {
     "employees": 
     [
         {
             "firstName": "Anna",
             "lastName": "Meyers"
         },
         {
             "firstName": "Betty",
             "lastName": "Layers"
         },
         {
             "firstName": "Carl",
             "lastName": "Louis"
         }
     ]
 }

Vous devriez alors voir une réponse. Découvrez http://jsonlint.com/

6
rposky

Vous pouvez simplement inclure un fichier Javascript dans votre code HTML qui déclare votre objet JSON en tant que variable. Ensuite, vous pouvez accéder à vos données JSON à partir de votre étendue Javascript globale en utilisant data.employees, par exemple.

index.html: 

<html>
<head>
</head>
<body>
  <script src="data.js"></script>
</body>
</html>

data.js:

var data = {
  "employees": [{
    "firstName": "Anna",
    "lastName": "Meyers"
  }, {
    "firstName": "Betty",
    "lastName": "Layers"
  }, {
    "firstName": "Carl",
    "lastName": "Louis"
  }]
}
6
senornestor

Dans le code jQuery, vous devriez avoir la propriété employees.

data.employees[0].firstName

Donc, ce serait comme ça.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $.getJSON("names.json", function(data) {
        console.log(data);
        $('body').append(data.employees[0].firstName);
    });
</script>
</body>
</html>

Bien entendu, vous aurez également besoin de cette propriété pour la version non jQuery, mais vous devrez d'abord analyser la réponse JSON.

N'oubliez pas non plus que document.write détruit la totalité de votre page.

Si vous rencontrez toujours des problèmes, essayez la demande complète $.ajax au lieu du wrapper $.getJSON.

    $.ajax({
        url: "names.json",
        dataType: "json",
        success: function(data) {
            console.log(data);
            $('body').append(data.employees[0].firstName);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('ERROR', textStatus, errorThrown);
        }
    });

http://api.jquery.com/jquery.ajax/

5
cliffs of insanity

Si vous voulez utiliser PHP.

<?php
    $contents = file_get_contents('names.json');
?>
<script>
    var names = <?php echo $contents; ?>
    var obj = JSON.parse(names);

    //use obj
</script>

Utilisez éventuellement async:

<script>
    $(document).ready(function(){
        $.get("get_json.php?file=names",function(obj){
            //use obj here          
        },'json');
    });
</script>

Le PHP:

<?php
    $filename = $_GET['file'] . '.json';
    $data['contents'] = file_get_contents($filename);
    echo json_encode($data);
?>
1
xbonez

Je sais que la réponse a été donnée il y a longtemps, mais ce résultat est en première position sur Google.

Cependant, je ne veux pas utiliser jquery, donc dans Vanilla JS, j'ai trouvé ce tutoriel rapide plus propre que senornestor answer (il permet également de charger des fichiers en fonction d'une variable):

function loadJSON(filelocation, callback) {   

  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', filelocation, 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);  
}

function init() {
  var location = "myfile.json";
  loadJSON(filelocation=location,  function(response) {
    // Parse JSON string into object
    loadedJSON = JSON.parse(response);
    console.log(loadedJSON.somethingsomething);
  });
}

init();

et sur votre fichier html:

`<script src="myscript.js"></script>`
0
Mael Abgrall