How to show JSON array data by using javascript?

Question

I have a ajax returning json array data like this,

[{
    "UserName": "John",
    "Total": "45",
    "Correct(%)": "71.1111",
    "Incorrect(%)": "28.8889"
}, {
    "UserName": "KKK",
    "Total": "42",
    "Correct(%)": "47.6190",
    "Incorrect(%)": "52.3810"
}, {
    "UserName": "AAA",
    "Total": "54",
    "Correct(%)": "81.4815",
    "Incorrect(%)": "18.5185"
}, {
    "UserName": "BBB",
    "Total": "39",
    "Correct(%)": "58.9744",
    "Incorrect(%)": "41.0256"
}]

I want to show that data by using javascript like this,

UserName: John Total: 45 Correct(%): 71.1111
Incorrect(%): 28.8889

UserName: KKK Total: 42 Correct(%): 47.6190
Incorrect(%): 52.3810

UserName: AAA Total: 54 Correct(%): 81.4815
Incorrect(%): 18.5185

UserName: BBB Total: 39 Correct(%): 58.9744
Incorrect(%): 41.0256

So, I try like this,

$.ajax({
                url: 'some.php',
                type: 'post',
                data: {dept:d},
                dataType: 'json',
                success: function(data) {
                    console.log("success");
                    var temp = "";
                    if(data && data!="") {
                        for(var i=0; i<data.length; i++) {
                            $.each(data,function(k,v){
                                $.each(v,function(k,s){
                                    temp +=k+': <b>'+s+'</b> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';
                                });
                                temp +="<br/><br/>";
                                console.log(temp);
                            });
                        }

                        document.getElementById('user').innerHTML= temp;
                    }
});

But, I got five line for each user. I was wrong while looping. So, how can I do this?

try removing the for loop

roullie
– roullie

2016-02-08 03:37:01 +00:00
Commented Feb 8, 2016 at 3:37 — roullie
– roullie, Commented Feb 8, 2016 at 3:37
Thank you so much. Now, Its ok.

Cloud
– Cloud

2016-02-08 03:41:54 +00:00
Commented Feb 8, 2016 at 3:41 — Cloud
– Cloud, Commented Feb 8, 2016 at 3:41
@roullie make it as answer

Afsar
– Afsar

2016-02-08 03:43:02 +00:00
Commented Feb 8, 2016 at 3:43 — Afsar
– Afsar, Commented Feb 8, 2016 at 3:43
@roullie make your comment to answer please.

Cloud
– Cloud

2016-02-08 03:55:33 +00:00
Commented Feb 8, 2016 at 3:55 — Cloud
– Cloud, Commented Feb 8, 2016 at 3:55
@NightMare comment made to answer. :)

roullie
– roullie

2016-02-08 04:56:09 +00:00
Commented Feb 8, 2016 at 4:56 — roullie
– roullie, Commented Feb 8, 2016 at 4:56

roullie · Accepted Answer · 2016-02-08 04:55:26Z

1

Try removing the for loop.

 //for(var i=0; i<data.length; i++) {
    $.each(data,function(k,v){
        $.each(v,function(k,s){
           temp +=k+': <b>'+s+'</b> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';
        });
        temp +="<br/><br/>";
        console.log(temp);
    });
 //}

answered Feb 8, 2016 at 4:55

roullie

2,82019 silver badges26 bronze badges

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

1 Comment

roullie Over a year ago

@NightMare no problem. glad i could help. :)

Vikash Kumar · Accepted Answer · 2016-02-08 05:00:58Z

1

Use this code:

$.ajax({
    url: 'some.php',
    type: 'post',
    data: {dept:d},
    dataType: 'json',
    success: function(data) {
        console.log("success");
        var temp = '';
        if(data && data != "") {
            var temp = '<ul>';
            for(var i = 0; i < data.length; i++) {
                temp += '<li>UserName: ' + data[i]['UserName'] + '&nbsp;Total: ' + data[i]['Total'] + '&nbsp;Correct(%): ' + data[i]['Correct(%)'] + '&nbsp;Incorrect(%): ' + data[i]['Incorrect(%)'] + '</li>';
            }
            temp += '</ul>';

            document.getElementById('user').innerHTML = temp;
        }
    }
});

answered Feb 8, 2016 at 5:00

Vikash Kumar

1,1119 silver badges17 bronze badges

1 Comment

Cloud Over a year ago

Thank you. Its the different way.

kizeloo · Accepted Answer · 2016-02-08 03:43:59Z

0

You only need to use 1 $.each loop, otherwise you are looping through all the data muliple times.

answered Feb 8, 2016 at 3:43

kizeloo

1838 bronze badges

Collectives™ on Stack Overflow

How to show JSON array data by using javascript?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related