Вопрос по json, javascript, jquery – JSON + Javascript / JQuery. Как импортировать данные из файла json и анализировать их?

16

Если у меня естьJSON файл с именемnames.json с:

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

Как я могу использовать его содержимое в JavaScript?

Я изменил вопрос и исправил ошибки. Теперь я думаю, что он может получить отклики и будет хорошей ссылкой на других людей. GarouDan

Ваш Ответ

6   ответов
10

<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>
5

В коде jQuery вы должны иметьemployees имущество.

data.employees[0].firstName

Так было бы так.

<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>

Конечно, вам нужно это свойство и для не jQuery-версии, но сначала вам нужно проанализировать JSON-ответ.

Также имейте в виду, чтоdocument.write разрушает всю вашу страницу.

Если у вас по-прежнему возникают проблемы, попробуйте$.ajax запрос вместо$.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/

привет скалы, до сих пор не работает для меня. Вы можете опубликовать весь код? Сценарий был в голове, но сейчас находится в теле и не работает. знак равно GarouDan
@GarouDan: Не уверен, что вы имеете в виду, когда говорите, что это не работает. Обратный вызов вообще вызывается? Вы получаете какие-либо ошибки в консоли?
6

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

Вы должны увидеть ответ. Проверять, выписыватьсяhttp://jsonlint.com/

ой. да. сейчас работает ^^. Огромное спасибо. Я был в том, что проблема в коде jquery. GarouDan
+1 Недействительный JSON прошел прямо у меня над головой.
0

что ответ был дан давно, но этот результат показывает в первой позиции в Google.

Однако я не хочу использовать jquery, поэтому в ванильном JS,Я нашел этот быстрый урок чище, чем ответ сенорнестора (он также позволяет загружать файлы в зависимости от переменной):

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();

и в вашем HTML-файле:

`<script src="myscript.js"></script>`
6

который объявляет ваш объект JSON как переменную. Затем вы можете получить доступ к своим данным JSON из глобальной области видимости Javascript, используяdata.employees, например.

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"
  }]
}
Вам нужно добавить этот оператор в файл data.js: & quot; & quot; & quot; module.exports = data; & Quot; & Quot; & Quot; & Quot; В противном случае вы не сможете импортировать значение переменной данных в любой другой файл через data.js.
1

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

    //use obj
</script>

При желании, используйте его async:

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

PHP:

<?php
    $filename = $_GET['file'] . '.json';
    $data['contents'] = file_get_contents($filename);
    echo json_encode($data);
?>
Потому что когда php читает его с помощью file_get_contents, он читает его как строку. Строка должна быть проанализирована, чтобы быть доступным как объект javascript.
А для чего вы полностью разбираете объект jsnames JSONobj, Это не имеет смысла, как кодирование JSON в ... двойной JSON
Файл уже содержит json, почему json_encode, что уже является json? Он мог просто получить names.json напрямую без последней оболочки PHP.
Интересное решение xbonez. Я попробую немного использовать jQuery e javascript, но, вероятно, это тоже решит мою проблему. GarouDan
спасибо xbonez, я буду иметь в виду это решение тоже. GarouDan

Похожие вопросы