AJAX 성공의 JSON 결과에 대한 jQuery 루프?

AJAX 성공의 JSON 결과에 대한 jQuery 루프?

---

jQuery AJAX 성공 콜백에서 객체의 결과를 반복하고 싶습니다. 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
});

---

외부 루프를 제거하고 다음으로 바꿀 수 this있습니다 data.data.

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

당신은 가까이 있었다 :

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

객체 / 맵 배열이 있으므로 외부 루프가 반복됩니다. 내부 루프는 각 객체 요소의 속성을 반복합니다.

---

getJSON 함수를 사용할 수도 있습니다 .

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

이것은 실제로 ifesdjeen의 답변을 다시 말한 것일 뿐이지 만 사람들에게 도움이 될 것이라고 생각했습니다.

---

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

그것이 도움이되기를 바랍니다

---

다른 배열과 마찬가지로 json 배열에 액세스하십시오.

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

---

다른 사람 이이 문제를 겪고 있다면 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");
    }
});

---

이것은 모든 데이터 값을 쉽게 볼 수 있도록 고안 한 것입니다.

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

---

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>

---

경고를 원하지 않는다면, 그것은 html을 원합니다.

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

참고 : "html"이 아닌 "append"를 사용하십시오. 그렇지 않으면 마지막 결과가 html보기에 표시됩니다.

그런 다음 HTML 코드는 다음과 같아야합니다

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

html로 렌더링하기 전에 jquery에서 div 스타일을 지정할 수도 있습니다 (클래스 추가).

---

$each will work.. Another option is jQuery Ajax Callback for array result

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.');
    }
  }

---

I use .map for foreach. For example

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>`)
      })
    },

---

If you are using the short method of JQuery ajax call function as shown below, the returned data needs to be interpreted as a json object for you to be able to loop through.

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

---

I am partial to ES2015 arrow function for finding values in an array

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

Checkout Array.prototype.find() HERE

참고URL : https://stackoverflow.com/questions/733314/jquery-loop-over-json-result-from-ajax-success