How do i parse json data retrieved from php script in javascript or jquery

Question

Please somebody help me, am new to ajax, i have been trying to read json data from php script but just no success. when i console.log the data i get this,

{"name":"JOHN","surname":"FIGO","sex":"M","Records_id":"1","student":""}.

and when i do this console.log(data[2]); i simply get n character. what i want is to get the values, for example, console.log(data['name']); should give JOHNor console.log(data[0]); should give JOHN. when i use either javascript or jquery parse methods, i get an error, i dont understand. Here is are the codes;

<?php 
$conn= new mysqli('localhost', 'root', '', 'Goldfinger');

$query= 'SELECT * FROM records';

$result= $conn->query($query);

     while($row = $result->fetch_assoc()) {
       echo json_encode($row);

}
?>

and jquery;

$('#one').click(function () {

        $.ajax({
            url: 'ajaxtesting.php',
            type: 'POST',       
            success: function (data) {
                if (data) {
                    console.log(data['name']);
                };
            }, 
            error: function () {
                $('div:not(#one)').text('error dude!');
            }
        })
    })

pardon my code if it's very poor. Thank you in advance.

use console.log(data.name) console.log(data.surname)

guradio
– guradio

2015-10-01 08:18:35 +00:00
Commented Oct 1, 2015 at 8:18 — guradio
– guradio, Commented Oct 1, 2015 at 8:18
am getting undefined!

ifeoluwa king
– ifeoluwa king

2015-10-01 08:39:09 +00:00
Commented Oct 1, 2015 at 8:39 — ifeoluwa king
– ifeoluwa king, Commented Oct 1, 2015 at 8:39

Norlihazmey Ghazali · Accepted Answer · 2015-10-01 08:18:34Z

3

Put dataType : 'json', inside ajax setting like so :

 $.ajax({
        url: 'ajaxtesting.php',
        type: 'POST',
        dataType : 'json', //<------------- here   
        success: function (data) {
            if (data) {
                console.log(data['name']);
            };
        }, 
        error: function () {
            $('div:not(#one)').text('error dude!');
        }
    })

or simply parse inside success callback :

 $.ajax({
        url: 'ajaxtesting.php',
        type: 'POST',       
        success: function (data) {
           var myData = $.parseJSON( data ); //<------- here
            if ( myData ) {
                console.log(myData['name']);
            };
        }, 
        error: function () {
            $('div:not(#one)').text('error dude!');
        }
    })

edited Oct 1, 2015 at 8:18

answered Oct 1, 2015 at 8:17

Norlihazmey Ghazali

9,0701 gold badge25 silver badges42 bronze badges

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

6 Comments

guradio Over a year ago

by default i think ajax returns a JSON if you dont specify it.Correct me if I am wrong. Thank you

Norlihazmey Ghazali Over a year ago

If no dataType was specified, jQuery will try to refer based on the MIME type of the response, otherwise string will returned. It common practice to specify the dataType other than string.

guradio Over a year ago

I see i thought the default is JSON if you dont specify anything thank you for clarification. I hope you explain this in the answer and also provide a documentation for better understating of the OP as well

ifeoluwa king Over a year ago

for your first method i get the error, while the second gives, Uncaught SyntaxError: Unexpected token {, ajax.html1.

Norlihazmey Ghazali Over a year ago

I guess something wrong with echo json_encode($row);, why you put inside loop anyway?

|

Collectives™ on Stack Overflow

How do i parse json data retrieved from php script in javascript or jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related