up vote 1 down vote favorite
share [g+] share [fb]

i have a ajax call that returns some json like this:

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

indide the #cand div ill get:

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

how can i loop through this data and place each name in a div?

thanks

link|improve this question
98% accept rate
feedback

2 Answers

up vote 1 down vote accepted

Assuming your server side script doesn't set the proper Content-Type: application/json response header you will need to indicate to jQuery that this is JSON by using the dataType: 'json' parameter.

Then you could use the $.each() function to loop through the data:

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

or use the $.getJSON method:

$.getJSON('/functions.php', { get_param: 'value' }, function(data) {
    $.each(data, function(index, element) {
        $('body').append($('<div>', {
            text: element.name
        }));
    });
});
link|improve this answer
success. thanks. DO i have to send json pr i can send anything from my php function? – Patrioticcow Jan 21 at 9:14
@Patrioticcow, you can send JSON as well. In this case you will need to set the contentType: 'application/json' setting in your $.ajax function and JSON serialize the data parameter, like that: data: JSON.stringify({ get_param: 'value' }). Then in your php script you would need to json decode to get back the original object. – Darin Dimitrov Jan 21 at 9:16
feedback
up vote 1 down vote

setting dataType:'json' will parse json for you

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

or else you can use parseJSON

var parsedJson = $.parseJSON(jsonToBeParsed);

here is how you can iterate

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

iterate using each

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

http://jsfiddle.net/fyxZt/4/

link|improve this answer
success. thanks. – Patrioticcow Jan 21 at 9:14
glad that helped ... – 3nigma Jan 21 at 9:16
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.