JSON splitting data with JQUERY

Question

I am using json for the first time so this may be a bit of a stupid question.

My PHP code for returning json is as follows:

$query="SELECT * FROM user_db WHERE rest_id='$rest_id'";
$result=mysqli_query($dbc, $query);
$row=array();
while($r = mysqli_fetch_assoc($result)) {
    $rows{'Users'][] = $r;
}
echo json_encode($rows);

This returns the following:

{"Users":
[{"user_id":"1361453832p3y","name":"","username":"sideshow","password":"sideshow","user_type":"1","rest_id":"1361453832fxL","email":""},
{"user_id":"1361523362ANq","name":"Sharon","username":"Sharon45","password":"Sharon45","user_type":"3","rest_id":"1361453832fxL","email":""},
{"user_id":"1361523653SXp","name":"Heather F","username":"fishface","password":"golliwog","user_type":"3","rest_id":"1361453832fxL","email":""}]}

All I am trying to do is to loop out the results and append them to the page.

My current JQuery is:

var name="";
        var username="";
        var password="";
        var user_type="";
        var output="";
        var obj=$.parseJSON(html);

        $.each(obj, function(){
            output+="<p><strong>"+this['name']+"</strong></p>";
            output+="<p>Username: "+this['username']+" Password: "+this['password']+"</p>";
            output+="<hr />";
        });


        $('.user_holder').html(output);

This just echos out each field three times. I have not found a way to loop through each json field.....

var obj=$.parseJSON(html); what contains html? – Scipion Feb 22 '13 at 10:47 — Scipion, Feb 22 '13 at 10:47

score 3 · Accepted Answer · answered Feb 22 '13 at 10:47

You can try this:

var name="";
var username="";
var password="";
var user_type="";
var output="";

$.each($.parseJSON(html).Users, function(){
    output+="<p><strong>"+this['name']+"</strong></p>";
    output+="<p>Username: "+this['username']+" Password: "+this['password']+"</p>";
    output+="<hr />";
});

As you see the only difference is in the $.each method where we pass the Users property instead of the whole object.

Here is the output

<p><strong></strong></p><p>Username: sideshow Password: sideshow</p><hr /><p><strong>Sharon</strong></p><p>Username: Sharon45 Password: Sharon45</p><hr /><p><strong>Heather F</strong></p><p>Username: fishface Password: golliwog</p><hr />

score 1 · Answer 2 · answered Feb 22 '13 at 10:48

1

change this

$.each(obj, function(){

to this:

$.each(obj.Users, function(){

answered Feb 22 '13 at 10:48

Oden

756
8
21

score 0 · Answer 3 · answered Feb 22 '13 at 10:45

0

You need to loop through each JSON object and reference an index containing the data and the reference the key.

for example

 obj['Users'][0]['Username']

will return the first instance of username.

so you will need to use a nested for loop to loop through the data.

answered Feb 22 '13 at 10:45

Roy James Schumacher

636
2
11
27

How do I get a count for the returned data ? This is where I seem to be stuck – Sideshow Feb 22 '13 at 10:46

score 0 · Answer 4 · edited May 23 '17 at 12:12

If I understand you correctly, you are sooo close to nailing it. I think you are just not referencing the Users field in obj.

$.each(obj.Users, function(){
    output+="<p><strong>"+this['name']+"</strong></p>";
    output+="<p>Username: "+this['username']+" Password: "+this['password']+"</p>";
    output+="<hr />";
});

console.log is your friend :) If you did

console.log(obj)

you could inspect what obj was, and see it has a Users field, and you'd be laughing :)

To learn about console.log, see this question: What is console.log?

score 0 · Answer 5 · answered Feb 22 '13 at 10:49

0

try

$.each(json,function(i,j){
    $(j).each(function(k,v){    
     console.log(v.user_id);
     console.log(v.username);        
    });
});

demo

answered Feb 22 '13 at 10:49

Dakait

2,531
1
25
43

score 0 · Answer 6 · answered Feb 22 '13 at 10:53

0

try:

$.each(obj.Users, function(){
        output+="<p><strong>"+this['name']+"</strong></p>";
        output+="<p>Username: "+this['username']+" Password: "+this['password']+"</p>";
        output+="<hr />";
    });

answered Feb 22 '13 at 10:53

RedDevil79

445
5
13

score 0 · Answer 7 · answered Feb 22 '13 at 10:53

0

Have tried like this ?

         for(var i=0; i < obj.Users.length; i++){
            var username  =obj.Users[i].username;
                //TODO get remaining value of  obj.Users[i];

        }

answered Feb 22 '13 at 10:53

Suresh Atta

120,458
37
198
307

JSON splitting data with JQUERY

7 Answers7