Hoe JSON-gegevens te parseren met jQuery / JavaScript?

Ik heb een AJAX-aanroep die een JSON als volgt retourneert:

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

In de #canddiv krijg ik:

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

Hoe kan ik deze gegevens doorlopen en elke naam in een div plaatsen?

Antwoord 1, autoriteit 100%

Ervan uitgaande dat uw server-side script niet de juiste Content-Type: application/jsonresponsheader instelt, moet u aan jQuery aangeven dat dit JSON is met behulp van het dataType: 'json'parameter.

Dan kunt u de functie $.each()gebruiken om door de gegevens:

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

of gebruik de $.getJSONmethode:

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

Antwoord 2, autoriteit 29%

Als u dataType:'json'instelt, wordt JSON voor u geparseerd:

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

Of je kunt parseJSONgebruiken:

var parsedJson = $.parseJSON(jsonToBeParsed);

Vervolgens kunt u het volgende herhalen:

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

…door $().eachte gebruiken:

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

JSFiddle

Antwoord 3, autoriteit 10%

Probeer de volgende code, het werkt in mijn project:

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

Antwoord 4, autoriteit 4%

$(document).ready(function () {
    $.ajax({ 
        url: '/functions.php', 
        type: 'GET',
        data: { get_param: 'value' }, 
        success: function (data) { 
         for (var i=0;i<data.length;++i)
         {
         $('#cand').append('<div class="name">data[i].name</>');
         }
        }
    });
});

Antwoord 5, autoriteit 2%

Gebruik die code.

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

Antwoord 6, autoriteit 2%

ok, ik had hetzelfde probleem en ik repareer het als volgt door []te verwijderen uit [{"key":"value"}]:

1. Zorg ervoor dat je in je php-bestand zo afdrukt

echo json_encode(array_shift($your_variable));

2. doe dit in uw succesfunctie

success: function (data) {
    var result = $.parseJSON(data);
      ('.yourclass').append(result['your_key1']);
      ('.yourclass').append(result['your_key2']);
       ..
    }

en je kunt het ook herhalen als je wilt

Antwoord 7, autoriteit 2%

Ik ben het eens met alle bovenstaande oplossingen, maar om aan te geven wat de oorzaak van dit probleem is, is de belangrijkste speler in alle bovenstaande code deze regel code:

dataType:'json'

wanneer u deze regel mist (wat optioneel is), worden de gegevens die door de server worden geretourneerd, behandeld als tekenreeks met volledige lengte (wat het standaard retourtype is). Door deze regel code toe te voegen, informeert jQuery om de mogelijke json-tekenreeks om te zetten in een json-object.

Elke jQuery ajax-aanroep moet deze regel specificeren, als u een json-gegevensobject verwacht.

Antwoord 8

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>

Antwoord 9

Json-gegevens

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

Bij ophalen

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

Antwoord 10

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

Antwoord 11

Hier ziet u hoe u dit in JavaScript zou doen, dit is een zeer efficiënte manier om het te doen!

let data = "{ "name": "mark"}"
let object = JSON.parse(data);
console.log(object.name);

dit zou een teken zijn