Ajax JQuery request to Mysql with php doesn't work with JSON

Question

I worked on this for hours and I wasn't able to find a solution on your site. I have a jsonTable.php who connect to database and return a Json by echo:

{
    "livres": [{ 
        "titre": "John", 
        "auteur": "Doe", 
        "annee": "1989"
    },{ 
        "titre": "Anna", 
        "auteur": "Smith", 
        "annee": "1989"
    },{ 
        "titre": "Peter", 
        "auteur": "Jones", 
        "annee": "1989"
    }]
}

The JQuery code I use is simple, it's:

$.ajax({
    url: 'jsonTable.php',
    type: 'GET',
    dataType : 'json',
    /*data: {
        json: jsonData
    },*/
    success: function (response) {
        alert(response);
        console.log(response);
        var trHTML = '';
        $.each(response, function (item) {
            trHTML += '<tr><td>' + item.titre + '</td><td>' + item.auteur + '</td><td>' + item.annee + '</td></tr>';
        });
        $('#records_table').append(trHTML);
    }
});

The problem is it's doesn't work and return the error:

Uncaught TypeError: Cannot use 'in' operator to search for '179' in {"livres":[
{"titre":"John", "auteur":"Doe", "annee":"1989"},
{"titre":"Anna", "auteur":"Smith", "annee":"1989"},
{"titre":"Peter", "auteur":"Jones", "annee":"1989"}
]}

Strangely I didn't find that much example and I can solve it by my self.

Provide the code for jsonTable.php

Coloured Panda
– Coloured Panda

2016-02-04 14:04:58 +00:00
Commented Feb 4, 2016 at 14:04 — Coloured Panda
– Coloured Panda, Commented Feb 4, 2016 at 14:04
response = $.parseJSON(response);

devpro
– devpro

2016-02-04 14:06:36 +00:00
Commented Feb 4, 2016 at 14:06 — devpro
– devpro, Commented Feb 4, 2016 at 14:06

jeroen · Accepted Answer · 2016-02-04 14:06:59Z

3

response does not contain the array you want to loop over, response.livres does.

So you probably just need to change it to:

$.each(response.livres, function (item) {
               ^^^^^^^ here
    ...

answered Feb 4, 2016 at 14:06

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

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

4 Comments

user3162862 Over a year ago

I made the change and now I have a: Uncaught TypeError: Cannot read property 'length' of undefined. Error. I don't use lenght in the $.each. Could you tell me please.

jeroen Over a year ago

@user3162862 What is the exact output of console.log(response);?

user3162862 Over a year ago

Uncaught TypeError: Cannot read property 'length' of undefined

user3162862 Over a year ago

Ok now my table is populated with the response=$.parseJSON(response). The problem is that all field are undefined. Rank Content UID undefined undefined undefined undefined undefined undefined undefined undefined undefined

user3162862 · Accepted Answer · 2016-02-04 15:25:29Z

0

here is the jsonTable.php file:

<?php




$dbhote = "localhost";
$dbutilisateur = "";
$dbpasse = "";
$dbnom = "";

$erreur = false;

//Connexion  MySQL Server

try {
    $connexion = new
            PDO('mysql:host=' . $dbhote . ';dbname=' . $dbnom, $dbutilisateur, $dbpasse);
} catch (Exception $e) {
    echo 'Erreur : ' . $e->getMessage() . '<br />';
    echo 'Num : ' . $e->getCode();
    $erreur = true;
}

if (!$erreur) {



    $query = "SELECT * FROM livres WHERE 1"; //WHERE sexe = '$sexe'";


    $req_prepare=$connexion->prepare($query);
    $req_prepare->execute();

   $encode = array();


   while( $ligne = $req_prepare->fetch(PDO::FETCH_ASSOC) ) {
    $encode[] = $ligne;        
    }    
    $req_prepare->closeCursor();


   // echo json_encode($encode);
    $encode = '{"livres":[
    {"titre":"John", "auteur":"Doe", "annee":"1989"},
    {"titre":"Anna", "auteur":"Smith", "annee":"1989"},
    {"titre":"Peter", "auteur":"Jones", "annee":"1989"}
]}';
    echo json_encode($encode);        
}
?>

The index.php has:

$.ajax({
    url: 'jsonTable.php',
    type: 'GET',
    dataType : 'json',
    /*data: {
        json: jsonData
    },*/
    success: function (response) {
        alert(response);
        console.log(response);
        var trHTML = '';
        $.each(response.livres, function (item) {
            trHTML += '<tr><td>' + item.titre + '</td><td>' + item.auteur + '</td><td>' + item.annee + '</td></tr>';
        });
        $('#records_table').append(trHTML);
    }
});

I receive in the console the error: Uncaught TypeError: Cannot read property 'length' of undefined This come from the $.each but I don't know what!!

answered Feb 4, 2016 at 15:25

user3162862

3891 gold badge2 silver badges6 bronze badges

3 Comments

jeroen Over a year ago

You should add this to your question and not as an answer. Note that now you are overwriting your array with a string before you encode it and that will mess-up your output so you need to remove that first.

user3162862 Over a year ago

How can I get the format of a question because in comment I can barely write code.

user3162862 Over a year ago

I found the answer. This is to add a id into the function of the $.each. As:$.each(response.livres, function (id,item) {

Collectives™ on Stack Overflow

Ajax JQuery request to Mysql with php doesn't work with JSON

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related