web-dev-qa-db-ja.com

JSON上のjQueryループはAJAXから発生しますか？成功しましたか？

JQuery AJAX successコールバックで、オブジェクトの結果をループオーバーしたいと思います。これはFirebugでレスポンスがどのように見えるかの例です。

[
 {"TEST1":45,"TEST2":23,"TEST3":"DATA1"},
 {"TEST1":46,"TEST2":24,"TEST3":"DATA2"},
 {"TEST1":47,"TEST2":25,"TEST3":"DATA3"}
]

各要素にアクセスできるように結果をループする方法はありますか。私は以下のようなことを試みましたが、これはうまくいっていないようです。

jQuery.each(data, function(index, itemData) {
  // itemData.TEST1
  // itemData.TEST2
  // itemData.TEST3
});
jqueryajaxjson
144
aherrick

外側のループを削除してthisをdata.dataに置き換えることができます。

$.each(data.data, function(k, v) {
    /// do stuff
});

あなたは近かった：

$.each(data, function() {
  $.each(this, function(k, v) {
    /// do stuff
  });
});

オブジェクト/マップの配列があるので、外側のループはそれらを繰り返します。内側のループは、各オブジェクト要素のプロパティを繰り返します。

237
cletus

getJSON 関数を使うこともできます。

    $.getJSON('/your/script.php', function(data) {
        $.each(data, function(index) {
            alert(data[index].TEST1);
            alert(data[index].TEST2);
        });
    });

これは本当にifesdjeenの答えの単なる言い換えですが、私はそれが人々に役立つかもしれないと思いました。

78
clone45

Fire Foxを使用している場合は、コンソールを開いて（F12キーを使用）、これを試してください。

var a = [
 {"TEST1":45,"TEST2":23,"TEST3":"DATA1"},
 {"TEST1":46,"TEST2":24,"TEST3":"DATA2"},
 {"TEST1":47,"TEST2":25,"TEST3":"DATA3"}
];

$.each (a, function (bb) {
    console.log (bb);
    console.log (a[bb]);
    console.log (a[bb].TEST1);
});

それが役に立てば幸い

38
0100110010101

他の誰かにとってこれで行き詰まっている、それはおそらくajax呼び出しがあなたの返されたデータをテキストとして解釈しているのでうまく機能していない - すなわちそれはまだJSONオブジェクトではない。

ParseJSONコマンドを手動で使用するか、単にajax呼び出しにdataType： 'json'プロパティを追加することで、JSONオブジェクトに変換できます。例えば.

jQuery.ajax({
    type: 'POST',
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    data: data, 
    dataType: 'json', // ** ensure you add this line **
    success: function(data) {
        jQuery.each(data, function(index, item) {
            //now you can access properties using dot notation
        });
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("some error");
    }
});
14
Dave Hilditch

他の配列と同じようにjson配列にアクセスします。

for(var i =0;i < itemData.length-1;i++)
{
  var item = itemData[i];
  alert(item.Test1 + item.Test2 + item.Test3);
}
14
Jon R

GetJSON関数を使うこともできます。

$.getJSON('/your/script.php', function(data) {
    $.each(data, function(index) {
        alert(data[index].TEST1);
        alert(data[index].TEST2);
    });
});
7
Anurag Yadav

これは、すべてのデータ値を簡単に表示するために思いついたものです。

var dataItems = "";
$.each(data, function (index, itemData) {
    dataItems += index + ": " + itemData + "\n";
});
console.log(dataItems);
4
Yovav

jQuery.map関数を試してみてください。マップではうまく機能します。

var mapArray = {
  "lastName": "Last Name cannot be null!",
  "email": "Email cannot be null!",
  "firstName": "First Name cannot be null!"
};

$.map(mapArray, function(val, key) {
  alert("Value is :" + val);
  alert("key is :" + key);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
4
PanwarS87

あなたが警戒したくないなら、それはutml htmlです、そしてこれをしてください

...
    $.each(data, function(index) {
        $("#pr_result").append(data[index].dbcolumn);
    });
...

注意： "html"ではなく "append"を使用してください

hTMLコードはこのようになります。

...
<div id="pr_result"></div>
...

Htmlとしてレンダリングする前にjquery内のdivをスタイル（クラスを追加）することもできます。

2
The Dead Guy

$eachは動作します。もう1つのオプションは 配列結果に対するjQuery Ajaxコールバックです

function displayResultForLog(result) 
{
       if (result.hasOwnProperty("d")) {
           result = result.d
       }

    if (result !== undefined && result != null )
    {
        if (result.hasOwnProperty('length')) 
        {
            if (result.length >= 1) 
            {
                for (i = 0; i < result.length; i++) {

                    var sentDate = result[i];

                }
            }
            else 
            {
                $(requiredTable).append('Length is 0');
            }
        }

        else 
        {
            $(requiredTable).append('Length is not available.');
        }

    }
    else 
    {
        $(requiredTable).append('Result is null.');
    }
  }
0
Lijo

Foreachには.mapを使います。例えば

success:function(data){
      let dataItems = JSON.parse(data)
      dataItems = dataItems.map((item) => {
        return $(`<article>
                      <h2>${item.post_title}</h2>
                      <p>${item.post_excerpt}</p>
              </article>`)
      })
    },
0
dimitar

配列内の値を検索するためのES2015矢印関数の一部です

const result = data.find(x=> x.TEST1 === '46');

チェックアウトArray.prototype.find（） HERE

0
Leonardo Trimarchi

以下に示すようにJQuery ajax呼び出し関数のshortメソッドを使用している場合は、ループスルーできるように、返されたデータをjsonオブジェクトとして解釈する必要があります。

$.get('url', function(data, statusText, xheader){
 // your code within the success callback
  var data = $.parseJSON(data);
  $.each(data, function(i){
         console.log(data[i]);
      })
})
0
Frederick Eze