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
– Scipion

2013-02-22 10:47:44 +00:00
Commented Feb 22, 2013 at 10:47 — Scipion
– Scipion, Commented Feb 22, 2013 at 10:47

Minko Gechev · Accepted Answer · 2013-02-22 10:47:15Z

3

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 />

answered Feb 22, 2013 at 10:47

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

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

Comments

Oden · Accepted Answer · 2013-02-22 10:48:16Z

1

change this

$.each(obj, function(){

to this:

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

answered Feb 22, 2013 at 10:48

Oden

7508 silver badges21 bronze badges

Comments

Roy James Schumacher · Accepted Answer · 2013-02-22 10:45:08Z

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, 2013 at 10:45

Roy James Schumacher

6462 gold badges11 silver badges27 bronze badges

1 Comment

Sideshow Over a year ago

How do I get a count for the returned data ? This is where I seem to be stuck

Dakait · Accepted Answer · 2013-02-22 10:49:46Z

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, 2013 at 10:49

Dakait

2,6181 gold badge28 silver badges46 bronze badges

Comments

RedDevil79 · Accepted Answer · 2013-02-22 10:53:04Z

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, 2013 at 10:53

RedDevil79

4455 silver badges13 bronze badges

Comments

Suresh Atta · Accepted Answer · 2013-02-22 10:53:36Z

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, 2013 at 10:53

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:12:31Z

0

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?

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Feb 22, 2013 at 10:48

Mike Hogan

10.8k9 gold badges50 silver badges86 bronze badges

Collectives™ on Stack Overflow

JSON splitting data with JQUERY

7 Answers 7

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related