JSON을 통한 jQuery loop over JSON 성공으로 인한 결과?

JSON을 통한 jQuery loop over JSON 성공으로 인한 결과?

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

오브젝트/맵 배열이 있기 때문에 외부 루프가 그 위에 반복됩니다.내부 루프는 각 객체 요소의 속성에서 반복됩니다.

getJ를 사용할 수도 있습니다.SON 기능:

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

도움이 되었으면 좋겠다

이 문제를 안고 있는 다른 사용자의 경우, Ajax 콜이 반환된 데이터를 텍스트로 해석하고 있기 때문에(즉, 아직 JSON 개체가 아님) 작동하지 않을 수 있습니다.

parseJ를 사용하여 수동으로 JSON 개체로 변환할 수 있습니다.SON 명령 또는 단순히 dataType: 'json' 속성을 ajax 호출에 추가합니다.

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

다른 어레이와 마찬가지로 json 어레이에 액세스합니다.

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

모든 데이터 값을 쉽게 표시하기 위해 다음과 같이 생각했습니다.

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를 스타일링(클래스 추가)할 수도 있습니다.

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

다음과 같이 JQuery ajax 호출 함수의 짧은 메서드를 사용하는 경우 반환된 데이터를 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]);
      })
})

배열에서 값을 찾기 위한 ES2015 화살표 함수를 좋아합니다.

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

Array.protype.find()는 이쪽에서 확인하세요.

$each동작합니다.다른 옵션은 어레이 결과에 대한 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.');
  }
}

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