AJAX सफलता से JSON परिणाम पर jQuery लूप?


152

JQuery AJAX सफलता कॉलबैक पर मैं ऑब्जेक्ट के परिणामों पर लूप करना चाहता हूं। यह एक उदाहरण है कि फायरबग में प्रतिक्रिया कैसी दिखती है।

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

1
यह काम करना चाहिए। क्या आप वाकई समान कोड और समान डेटा हैं?
तमसा सीज़ेग

जवाबों:


255

आप बाहरी लूप को हटा सकते हैं और उसके thisसाथ बदल सकते हैं data.data:

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

आप करीब थे:

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

आपके पास ऑब्जेक्ट्स / मैप्स की एक सरणी है, इसलिए बाहरी लूप उन पर निर्भर करता है। आंतरिक लूप प्रत्येक ऑब्जेक्ट तत्व पर गुणों से अधिक पुनरावृत्त करता है।


पहला लूप एक "श्रेणी" के लिए है जबकि एक लूप "विशेषता" के लिए है। और कैसे किया जाता है?
डॉक्यूम्बस

क्या होगा यदि आप इसके गुणों के बजाय वस्तु तत्व के साथ काम करना चाहते हैं? प्रश्न कार्य में @ aherrick का लूप क्यों नहीं है?
स्टुपेरयूज़र

1
यदि इस लूपिंग का उपयोग $(data)इसके बजाय एक अलग फ़ंक्शन उपयोग में किया जाता है data, अन्यथा चर kहमेशा 0. वापस आ जाता है
user1226868

2
क्या कोई व्यक्ति चर और v को समझा सकता है जिसे दूसरे फ़ंक्शन में पास किया गया है?
ब्रेंट कॉनर

इस मामले में @BrentConnor k & v उस सरणी की कुंजी और मान का प्रतिनिधित्व करता है जिसके माध्यम से साइकिल चल रही है। Jquery .each () फ़ंक्शन पर पढ़ें
भूत इको

80

आप getJSON फ़ंक्शन का उपयोग भी कर सकते हैं :

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

यह वास्तव में ifesdjeen के जवाब का केवल एक रिकॉर्डिंग है, लेकिन मुझे लगा कि यह लोगों के लिए उपयोगी हो सकता है।


इससे मदद मिली। किसी कारण से मुझे काम करने के लिए @ क्लेटस का जवाब नहीं मिला लेकिन यह किया। निश्चित नहीं है कि jQuery के बारे में भव्य रहस्य क्या है, लेकिन सरल कोड हमेशा काम नहीं करता है जैसा कि आप इसे करने की उम्मीद करते हैं।
अट्टुरसम्स

38

यदि आप फायर फॉक्स का उपयोग करते हैं, तो बस एक कंसोल खोलें (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);
});

आशा करता हूँ की ये काम करेगा


17

किसी और के साथ अटक के लिए, यह शायद काम नहीं कर रहा है क्योंकि अजाक्स कॉल आपके डेटा को पाठ के रूप में व्याख्या कर रहा है - अर्थात यह अभी तक एक JSON ऑब्जेक्ट नहीं है।

आप पार्सजॉन कमांड का उपयोग करके या केवल डेटा टाइप जोड़कर इसे JSON ऑब्जेक्ट में कनवर्ट कर सकते हैं: अपने ajax कॉल में '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");
    }
});

यह मुझे "डेटा अपरिभाषित है" दे रहा है।
ह्यूग सीग्रेव्स

आपको अपने स्वयं के चर का उपयोग करना चाहिए जो उस डेटा को संग्रहीत करता है जिसे आप url में दे रहे हैं। यदि आपके डेटा वेरिएबल को mydata कहा जाता है, तो डेटा का उपयोग करें: mydata
डेव हिल्डिच

आह। इसे अब पा लिया है। धन्यवाद।
ह्यूग सीग्रेव्स

Uncaught TypeError: Cannot use 'in' operator to search for '188' inउस त्रुटि को प्राप्त करना।
Si8

15

आप किसी भी अन्य सरणी की तरह json सरणी तक पहुँचें।

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

1
पुराना सवाल है, लेकिन आप बिना नाम जाने कैसे जान के ज़रिए लूप कर सकते हैं ... जैसे Test1, Test2, ext ...
BarclayVision

@BarclayVision आप एक नंबर के रूप में कुंजी का उपयोग करते हैं। पहली कुंजी है [0], अगला [1], और इसी तरह।
copilot0910

क्या हम लूप के लिए इसके अंदर एक और अजाक्स कॉल का उपयोग कर सकते हैं? यदि हाँ, तो कृपया मुझे बताएँ कैसे?
ज्योति जाधव

5

यह वह है जो मैं आसानी से सभी डेटा मूल्यों को देखने के लिए आया था:

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


4

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>


2

यदि आप अलर्ट नहीं चाहते हैं, तो आप html चाहते हैं, तो यह करें

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

ध्यान दें: "परिशिष्ट" नहीं "html" का उपयोग करें अन्यथा अंतिम परिणाम वही है जो आप अपने HTML दृश्य पर देख रहे होंगे

तब आपका html कोड इस तरह दिखना चाहिए

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

इससे पहले कि आप html के रूप में प्रस्तुत करें, आप jquery में div (वर्ग जोड़) को स्टाइल कर सकते हैं


0

यदि आप नीचे दिखाए गए अनुसार JQuery के अजाक्स कॉल फ़ंक्शन की संक्षिप्त विधि का उपयोग कर रहे हैं, तो लौटाए गए डेटा को आपके लिए लूप के रूप में सक्षम होने के लिए एक 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

$eachकाम करेगा .. एक अन्य विकल्प सरणी परिणाम के लिए jQuery Ajax Callback है

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

मैं 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>`)
  })
},
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.