JSON / जावास्क्रिप्ट के साथ JSON डेटा पार्स कैसे करें?


190

मेरे पास एक AJAX कॉल है जो कुछ JSON को इस तरह लौटाता है:

$(document).ready(function () {
    $.ajax({ 
        type: 'GET', 
        url: 'http://example/functions.php', 
        data: { get_param: 'value' }, 
        success: function (data) { 
            var names = data
            $('#cand').html(data);
        }
    });
});

#candमैं अंदर मिलेगा div:

[ { "id" : "1", "name" : "test1" },
  { "id" : "2", "name" : "test2" },
  { "id" : "3", "name" : "test3" },
  { "id" : "4", "name" : "test4" },
  { "id" : "5", "name" : "test5" } ]

मैं इस डेटा के माध्यम से कैसे लूप कर सकता हूं और प्रत्येक नाम को div में रख सकता हूं।

जवाबों:


281

अपने सर्वर साइड स्क्रिप्ट को मानते हुए उचित Content-Type: application/jsonप्रतिक्रिया हेडर सेट नहीं करता है जिसे आपको jQuery को इंगित करना होगा कि यह dataType: 'json'पैरामीटर का उपयोग करके JSON है ।

तब आप $.each()डेटा के माध्यम से फंक्शन का उपयोग कर सकते हैं :

$.ajax({ 
    type: 'GET', 
    url: 'http://example/functions.php', 
    data: { get_param: 'value' }, 
    dataType: 'json',
    success: function (data) { 
        $.each(data, function(index, element) {
            $('body').append($('<div>', {
                text: element.name
            }));
        });
    }
});

या $.getJSONविधि का उपयोग करें :

$.getJSON('/functions.php', { get_param: 'value' }, function(data) {
    $.each(data, function(index, element) {
        $('body').append($('<div>', {
            text: element.name
        }));
    });
});

सफलता। धन्यवाद। क्या मुझे json pr भेजना है? मैं अपने php फ़ंक्शन से कुछ भी भेज सकता हूँ?
देशभक्तिपूर्ण

7
@Patrioticcow, आप JSON भी भेज सकते हैं। इस मामले में आपको contentType: 'application/json'अपने $.ajaxफ़ंक्शन में सेटिंग सेट करने की आवश्यकता होगी और JSON dataपैरामीटर को क्रमबद्ध करेगा , जैसे data: JSON.stringify({ get_param: 'value' }):। फिर अपनी php स्क्रिप्ट में आपको मूल ऑब्जेक्ट को वापस पाने के लिए json डिकोड करना होगा।
डारिन दिमित्रोव २१'१२ को

यह "किया गया: फ़ंक्शन" क्या है? क्या यह "सफलता" के समान है? मैं इसे डॉक्स में नहीं देखता हूं।
बुटिक बटुक

मेरा json डेटा यह है {"0":{"level1":"done","level2":"done","level3":"no"}}कि इसे प्रत्येक चर में कैसे निकाला जा सकता है? मैं इस $.eachविधि का उपयोग करने की कोशिश की, लेकिन अपरिभाषित संस्करण देता हैlevel1 = ele[0].level1;
संस्करण 151291

@DarinDimitrov हिंडोला में इन आंकड़ों को कैसे दिखाया जाए?
निर्देबा

79

सेटिंग dataType:'json'आपके लिए JSON को पार्स करेगी:

$.ajax({
  type: 'GET',
  url: 'http://example/functions.php',
  data: {get_param: 'value'},
  dataType: 'json',
  success: function (data) {
    var names = data
    $('#cand').html(data);
  }
});

या फिर आप उपयोग कर सकते हैं parseJSON:

var parsedJson = $.parseJSON(jsonToBeParsed);

तो आप निम्न को पुन: व्यवस्थित कर सकते हैं:

var j ='[{"id":"1","name":"test1"},{"id":"2","name":"test2"},{"id":"3","name":"test3"},{"id":"4","name":"test4"},{"id":"5","name":"test5"}]';

... का उपयोग करके $().each:

var json = $.parseJSON(j);
$(json).each(function (i, val) {
  $.each(val, function (k, v) {
    console.log(k + " : " + v);
  });
}); 

JSFiddle


मेरा json डेटा यह {"0":{"level1":"done","level2":"done","level3":"no"}}कैसे प्रत्येक चर में निकाल सकते हैं? मैं इस $.eachविधि का उपयोग करने की कोशिश की, लेकिन अपरिभाषित level1 = ele[0].level1;
संस्करण

1
@ 151291 अपने सवाल पूछने का उचित तरीका नहीं है, वैसे भी यहाँ आपके json के लिए fiddle jsfiddle.net/fyxZt/1738 है । नोट ऐरे नोटेशनjson[0]
राफे

धन्यवाद। उपयोगी उत्तर। Db टेबल में निर्दिष्ट कॉलम वैल्यू कैसे प्राप्त करें?
PHPFAN

@PHPFan आप डेटाबेस तालिका क्वेरी करने के लिए कैसे मतलब है? कृपया अधिक जानकारी प्रदान करें और मैं एक नया प्रश्न पूछने की सलाह दूंगा, जिसमें आवश्यक विवरण शामिल हैं।
रफय

इस प्रश्न में उदाहरण के लिए @Rafay अगर मैं केवल नाम मान प्राप्त करना चाहता हूं
PHPFan

24

निम्नलिखित कोड का प्रयास करें, यह मेरी परियोजना में काम करता है:

//start ajax request
$.ajax({
    url: "data.json",
    //force to handle it as text
    dataType: "text",
    success: function(data) {

        //data downloaded so we call parseJSON function 
        //and pass downloaded data
        var json = $.parseJSON(data);
        //now json variable contains data in json format
        //let's display a few items
        for (var i=0;i<json.length;++i)
        {
            $('#results').append('<div class="name">'+json[i].name+'</>');
        }
    }
});


6

उस कोड का उपयोग करें।

     $.ajax({

            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Your URL",
            data: "{}",
            dataType: "json",
            success: function (data) {
                alert(data);
            },
            error: function (result) {
                alert("Error");
            }
        });

5

ठीक है, मैं एक ही समस्या थी और मैं निकाल कर इस तरह इसे ठीक []से [{"key":"value"}]:

  1. अपने php फ़ाइल में इस तरह से प्रिंट करने वाले shure बनाएं
echo json_encode(array_shift($your_variable));
  1. अपनी सफलता के समारोह में यह करो
 success: function (data) {
    var result = $.parseJSON(data);
      ('.yourclass').append(result['your_key1']);
      ('.yourclass').append(result['your_key2']);
       ..
    }

और यदि आप चाहें तो इसे लूप भी कर सकते हैं


5

मैं उपरोक्त सभी समाधानों से सहमत हूं, लेकिन इस मुद्दे का मूल कारण क्या है, यह बताने के लिए कि उपरोक्त कोड में प्रमुख भूमिका खिलाड़ी इस कोड की लाइन है:

dataType:'json'

जब आप इस पंक्ति को याद करते हैं (जो वैकल्पिक है), सर्वर से लौटाए गए डेटा को पूर्ण लंबाई स्ट्रिंग (जो डिफ़ॉल्ट वापसी प्रकार) के रूप में माना जाता है। कोड की इस लाइन को जोड़ने से jQuery के ऑब्जेक्ट में संभावित json स्ट्रिंग को कन्वर्ट करने के लिए jQuery को सूचित करता है।

किसी भी jQuery के अजाक्स कॉल को इस लाइन को निर्दिष्ट करना चाहिए, अगर json डेटा ऑब्जेक्ट की उम्मीद है।


3
var jsonP = "person" : [ { "id" : "1", "name" : "test1" },
  { "id" : "2", "name" : "test2" },
  { "id" : "3", "name" : "test3" },
  { "id" : "4", "name" : "test4" },
  { "id" : "5", "name" : "test5" } ];

var cand = document.getElementById("cand");
var json_arr = [];
$.each(jsonP.person,function(key,value){
    json_arr.push(key+' . '+value.name  + '<br>');
    cand.innerHTML = json_arr;
});

<div id="cand">
</div>

2

Json डेटा

data = {"clo":[{"fin":"auto"},{"fin":"robot"},{"fin":"fail"}]}

जब पुनः प्राप्त करें

$.ajax({
  //type
  //url
  //data
  dataType:'json'
}).done(function( data ) {
var i = data.clo.length; while(i--){
$('#el').append('<p>'+data.clo[i].fin+'</>');
}
});

0
$.ajax({
  url: '//.xml',
  dataType: 'xml',
  success: onTrue,
  error: function (err) {
      console.error('Error: ', err);
  }
});

$('a').each(function () {
  $(this).click(function (e) {
      var l = e.target.text;
      //array.sort(sorteerOp(l));
      //functionToAdaptHtml();
  });
});
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.