How to handle and output right json array

Question

My ajax request looks like this:

$.post('newsletter.php?mode=grab', { search: searchstring }, function(data) {
    $('#newsletter_receivers').html(
            data
    );
});

Output from this is: (data)

{"id":"111","fullname":"Test Test","age":"31"}{"id":"112","fullname":"Max Max","age":"31"}{"id":"113","fullname":"123 123","age":"31"}{"id":"114","fullname":"Det Fungerar","age":"31"}

Now this is just putting this json in the div element for now.

But how can i extract each json array and output the fullname and age?

So it will appear as:

Test Test - 31
Max max - 31

genesis · Accepted Answer · 2011-08-28 09:52:35Z

1

In case your valid json looks like

[{"id":"111","fullname":"Test Test","age":"31"},{"id":"112","fullname":"Max Max","age":"31"},{"id":"113","fullname":"123 123","age":"31"},{"id":"114","fullname":"Det Fungerar","age":"31"}]

you can use

$.post('newsletter.php?mode=grab', { search: searchstring }, function(data) {
    data = $.parseJSON(data);
    $.each(data, function(index,b){
       $('#newsletter_receivers').append('<br>'+b.fullname+' - '+b.age);
    });
});

edited Aug 28, 2011 at 9:52

answered Aug 28, 2011 at 9:32

genesis

51.1k20 gold badges99 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nicola Peluchetti Over a year ago

this just saves the last iteration as the html, because you are overwrting it at every iteration! :)

Karem Over a year ago

@genesis tried this, does not work, it doesnt output anything and when it has 2 json arrays it gives me undefined - undefinedundefined-undefined . I tried to do prepend/append() so it dont overwrite, but still nothing. I tried alert(); nothing either

genesis Over a year ago

@Karem: try it now. Your json IN OP is not valid

Nicola Peluchetti · Accepted Answer · 2011-08-28 09:54:59Z

I corrected your json wichi is not valid. You could do:

var json = [
    {
    "id": "111",
    "fullname": "Test Test",
    "age": "31"},
{
    "id": "112",
    "fullname": "Max Max",
    "age": "31"},
{
    "id": "113",
    "fullname": "123 123",
    "age": "31"},
{
    "id": "114",
    "fullname": "Det Fungerar",
    "age": "31"}
];
var text = '';
$.each(json, function(index, b) {
    text += b.fullname + ' - ' + b.age + '<br/>';
});

$('#newsletter_receivers').html(text);

fiddle here:

http://jsfiddle.net/4crnm/

for your example:

$.post('newsletter.php?mode=grab', { search: searchstring }, function(data) {
    data = $.parseJSON(data);
    var text = '';
    $.each(data, function(index, b) {
        text += b.fullname + ' - ' + b.age + '<br/>';
    });
    $('#newsletter_receivers').html(text);
});

Paul · Accepted Answer · 2011-08-28 09:44:59Z

0

That's not valid JSON. You'll need to turn it into an array or something. If you can't do it server side then try this:

$.post('newsletter.php?mode=grab', { search: searchstring }, function(data){
    $('#newsletter_receivers').html('');
    $.each($.parseJSON('['+data.replace(/\}\{/g, '},{')+']'), function(){
        $('#newsletter_receivers').append('<div>'+this.fullname+' - '+this.age+'</div>');
    });
});

If you can fix it server side that'd be a lot better of a solution.

answered Aug 28, 2011 at 9:44

Paul

142k28 gold badges285 silver badges272 bronze badges

Comments

Rafay · Accepted Answer · 2011-08-28 11:15:16Z

0

change your jason to something like

{
    "data": [
        {
            "id": "111",
            "fullname": "Test Test",
            "age": "31"
        },
        {
            "id": "112",
            "fullname": "Max Max",
            "age": "31"
        },
        {
            "id": "113",
            "fullname": "123 123",
            "age": "31"
        },
        {
            "id": "114",
            "fullname": "Det Fungerar",
            "age": "31"
        }
    ]
}

and access it like,

$(function(){
 $.post("path/to/json",function(data){
  $(data.data).each(function(i,j){
  alert(data.data[i].fullname);
  });
  },'json');
});

whne you specify the dataType as json you dont need to do $.parseJSON also you can verify your json at www.jsonlint.com

edited Aug 28, 2011 at 11:15

answered Aug 28, 2011 at 9:36

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Collectives™ on Stack Overflow

How to handle and output right json array

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related