Вопрос по json, jquery, javascript – Как мне перебрать структуру JSON? [Дубликат]

452

This question already has an answer here:

For-each over an array in JavaScript? 33 answers

У меня есть следующая структура JSON:

[{ "id":"10", "class": "child-of-9" }, { "id": "11", "classd": "child-of-10" }]

Как мне перебрать его, используя jQuery или JavaScript?

Это должен быть "JQuery или чистый JavaScript". rsb2097
& quot; jquery или javascript & quot ;? JQuery написано в JavaScript! AlikElzin-kilaka
"How do I iterate over a JSON structure?" Вы не т. Вы анализируете его, после чего у вас больше нет JSON, и выloop through the resulting array. T.J. Crowder

Ваш Ответ

13   ответов
13

Скопировано и вставлено изhttp://www.w3schools.com, нет необходимости в накладных расходах JQuery.

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
    text += person[x];
}

РЕЗУЛЬТАТ: Джон Доу 25

9

это чистый пример JavaScript-комментария.

  <script language="JavaScript" type="text/javascript">
  function iterate_json(){
            // Create our XMLHttpRequest object
            var hr = new XMLHttpRequest();
            // Create some variables we need to send to our PHP file
            hr.open("GET", "json-note.php", true);//this is your php file containing json

            hr.setRequestHeader("Content-type", "application/json", true);
            // Access the onreadystatechange event for the XMLHttpRequest object
            hr.onreadystatechange = function() {
                if(hr.readyState == 4 && hr.status == 200) {
                    var data = JSON.parse(hr.responseText);
                    var results = document.getElementById("myDiv");//myDiv is the div id
                    for (var obj in data){
                    results.innerHTML += data[obj].id+ "is"+data[obj].class + "<br/>";
                    }
                }
            }

            hr.send(null); 
        }
</script>
<script language="JavaScript" type="text/javascript">iterate_json();</script>// call function here
414

Взято изJQuery Docs:

var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one:1, two:2, three:3, four:4, five:5 };

jQuery.each(arr, function() {
  $("#" + this).text("My id is " + this + ".");
  return (this != "four"); // will stop running to skip "five"
});

jQuery.each(obj, function(i, val) {
  $("#" + i).append(document.createTextNode(" - " + val));
});
Точно так же предложения lodash_.forEach (псевдоним_.each for underscore compatibility) сделать то же самое.
Ответ должен был быть дан в JavaScript, а не в JQuery.
ОП попросил либо jQuery, либо JavaScript, поэтому ответ подходит в моей книге.
Это очень запутанный синтаксис. Можете ли вы объяснить это? Можете ли вы также предоставить вывод?
@WayneHartman Я сочувствую вашей точке зрения, но первоначальный вопрос гласит: «jquery или javascript». Похоже, ошибка заключалась в том, что в вопросе не было тега jquery.
4

Другое решение для навигации по документам JSON:JSONiq (реализовано вЗорба двигатель), где можно написать что-то вроде:

jsoniq version "1.0";

let $doc := [
  {"id":"10", "class": "child-of-9"},
  {"id":"11", "class": "child-of-10"}
]
for $entry in members($doc)             (: binds $entry to each object in turn :)
return $entry.class                     (: gets the value associated with "class" :)

Вы можете запустить его наhttp://try.zorba.io/

8

Маркиз Ван может быть лучшим ответом при использовании jQuery.

Вот что-то очень похожее в чистом JavaScript, использующем JavaScriptforEach метод.для каждого принимает функцию в качестве аргумента. Затем эта функция будет вызываться для каждого элемента в массиве с указанным элементом в качестве аргумента.

Коротко и просто:

<script>
var results = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "classd": "child-of-10"}];

results.forEach( function( item ) {
    console.log( item );
    });
</script>
478
var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "classd": "child-of-10"}];

for (var i = 0; i < arr.length; i++){
    var obj = arr[i];
    for (var key in obj){
        var attrName = key;
        var attrValue = obj[key];
    }
}

var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "class": "child-of-10"}];
    
for (var i = 0; i < arr.length; i++){
  document.write("<br><br>array index: " + i);
  var obj = arr[i];
  for (var key in obj){
    var value = obj[key];
    document.write("<br> - " + key + ": " + value);
  }
}

примечание: метод for-in подходит для простых объектов. Не очень умный, чтобы использовать с объектом DOM.

@AlexanderSupertramp устанавливается с помощью литеральной записи массива с объектами в литеральной записи объекта. В JavaScript массивы по сути также являются объектами. Так что я бы все еще ссылался на arr, установленный с помощью JSON.
Привет я могу просто спросить, хочу ли я использовать это, чтобы получить удаленный массив JSON, как мне это сделать? пожалуйста, дайте мне некоторое руководство!
@musicformellons Обратитесь кdeveloper.mozilla.org/en/docs/Web/JavaScript/Reference/… для современного подхода (не поддерживается IE).
но arr не является JSON.
Не забудьте проверить прямо в вашемfor key in obj цикл этоobj.hasOwnProperty(key) --- иначе однажды вы могли бы найти другие ключи, работающие на их путиobj что вы не хотите, если кто-то расширяет прототип, например ...
14

пример mootools:

var ret = JSON.decode(jsonstr);

ret.each(function(item){
    alert(item.id+'_'+item.classd);
});
9

Для вложенных объектов его можно получить как с помощью рекурсивной функции:

function inside(events)
  {
    for (i in events) {
      if (typeof events[i] === 'object')
        inside(events[i]);
      else
      alert(events[i]);
    }
  }
  inside(events);

где в качестве события используется объект json.

Отлично. Просто чтобы это было упомянуто; если вы читаете переменную (i), вы можете получить имена свойств (для чего это стоит)
39

Если это вашdataArray:

var dataArray = [{"id":28,"class":"Sweden"}, {"id":56,"class":"USA"}, {"id":89,"class":"England"}];

затем:

$(jQuery.parseJSON(JSON.stringify(dataArray))).each(function() {  
         var ID = this.id;
         var CLASS = this.class;
});
Лучший ответ с использованием JQuery. Я кодирую данные из бэкэнда, используя AJAX, поэтому я не использовал «stringify» функция. Код понятен и красив!
3
var jsonString = "{\"schema\": {\"title\": \"User Feedback\", \"description\":\"so\", \"type\":\"object\", \"properties\":{\"name\":{\"type\":\"string\"}}}," +
                        "\"options\":{ \"form\":{\"attributes\":{}, \"buttons\":{ \"submit\":{ \"title\":\"It\", \"click\":\"function(){alert('hello');}\" }}} }}";
var jsonData = JSON.parse(jsonString);

function Iterate(data)
{
    jQuery.each(data, function (index, value) {
        if (typeof value == 'object') {
            alert("Object " + index);
            Iterate(value);
        }
        else {
             alert(index + "   :   " + value);
        }
    });

};

Iterate(,jsonData);
Вы должны объяснить свой код. Ответ без объяснения не очень помогает.
76

использованиеforeach:

<html>
<body>
<script type="text/javascript">
var mycars = [{name:'Susita'}, {name:'BMW'}];
for (i in mycars)
{
  document.write(mycars[i].name + "<br />");
}
</script>
</body>
</html>

Приведет к:

Susita
BMW
Работает как на массивах, так и на jsons.
@SachinPrasad Нет,i это имя свойства.
Это обычный массив, а не JSON.
Susita - это переменная, зависящая от культуры, верно? :-)
Правильно, переменная верхнего уровня, как BMW ;-)
10

Вы можете использовать мини-библиотеку, такую как objx -http://objx.googlecode.com/

Вы можете написать код так:

var data =  [ {"id":"10", "class": "child-of-9"},
              {"id":"11", "class": "child-of-10"}];

// alert all IDs
objx(data).each(function(item) { alert(item.id) });

// get all IDs into a new array
var ids = objx(data).collect("id").obj();

// group by class
var grouped = objx(data).group(function(item){ return item.class; }).obj()

Есть больше «плагинов» доступно, чтобы вы могли обрабатывать данные, как это, см.http://code.google.com/p/objx-plugins/wiki/PluginLibrary

54

Пожалуйста, дайте мне знать, если это не так просто:

    var jsonObject = {
        name: 'Amit Kumar',
        Age: '27'
    };
    for (var prop in jsonObject) {
        alert("Key:" + prop);
        alert("Value:" + jsonObject[prop]);
    }
Если вы получили свои данные с помощью jQuery.getJSON (), то это работает просто отлично.
Ваш jsonObject не является реальным объектом JSON. Это объект JavaScript. Вот почему это работает. Однако, если у кого-либо есть объект JSON, он может преобразовать его в объект JS, а затем использовать ваш метод. Чтобы преобразовать объект JSON в объект JS, используйте jsObject = JSON.parse (jsonObject);

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