CODEWITHSUNDEEP
javascriptphphtmljsonweb
Abu Machi
Abu Machi

Reputation: 121

Output the gotten json data from the database

I read the data from the database as json object. Also took that data to another page, where I want to show that data, but the problem is in showing the data.

Here is my code for showing data: Please check the comments in the code!!!

var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {

            object = JSON.stringify(this.responseText);
            console.log(object);


            console.log(object);
            //console.log(object['data'][0]['title']); ERROR

            object2 = JSON.parse(object)
            console.log(object2);
            //console.log(object2['data'][0]['title']); ERROR
            console.log(object2.title); //here  ENDEFINED




            objectParsed = JSON.parse(
                '{"ID":"1","type":"zima","title":"skijanje","description":"Lorem ipsum dolor sit amet,sed diam voluptua.","people":"From 2 to 8","available":"From November to February","price":"From 350 to 500","numTaken":"0"}'
            );

            console.log(objectParsed);
            console.log(objectParsed.title); // here I got the right ouput which is SKIJANJE

            //document.getElementById("test").innerHTML = object.title;
        }
    };
    xmlhttp.open("GET", "readTourData.php", true);
    xmlhttp.send();

And here is the data I got from "readTourData" enter image description here

Finally here is the output when I try to show data: enter image description here

The variable object look like this (console.log(object) ) : enter image description here

The data I got from the db: data: [{ID: "1", type: "zima", title: "skijanje",…}]

0 : {ID: "1", type: "zima", title: "skijanje",…} ID : "1" available : "From November to February" description : "Lorem ipsum dolor sit amet,sed diam voluptua." numTaken : "0" people : "From 2 to 8" price : "From 350 to 500" title : "skijanje" type : "zima"

Console output:

--First console --> console.log(object) : "\r\n data: [{\"ID\":\"1\",\"type\":\"zima\",\"title\":\"skijanje\",\"description\":\"Lorem ipsum dolor sit amet,sed diam voluptua.\",\"people\":\"From 2 to 8\",\"available\":\"From November to February\",\"price\":\"From 350 to 500\",\"numTaken\":\"0\"}]\r\n\r\n"

--Second console --> console.log(object2): data: [{"ID":"1","type":"zima","title":"skijanje","description":"Lorem ipsum dolor sit amet,sed diam voluptua.","people":"From 2 to 8","available":"From November to February","price":"From 350 to 500","numTaken":"0"}]

-- Third console --> console.log(object2.title) : undefined

-- Fourth console -- > console.log(objectParsed): {ID: "1", type: "zima", title: "skijanje", description: "Lorem ipsum dolor sit amet,sed diam voluptua.", people: "From 2 to 8", …} ID : "1" available : "From November to February" description : "Lorem ipsum dolor sit amet,sed diam voluptua." numTaken : "0" people : "From 2 to 8" price : "From 350 to 500" title : "skijanje" type : "zima" proto : Object

--and last console --> console.log(objectParsed.title): Skijanje

Upvotes: 3

Views: 90

Answers (1)

Prisoner
Prisoner

Reputation: 50711

The issue is that there is no object.title.

The object object appears to be an array.

Each object in the array appears to have a title attribute.

So you should be able to access the title of the first object in the array with something like: object[0].title or object[0]['title']

It is often helpful to print out the object to see all of this nesting with something like

console.log(JSON.stringify(object,null,1));

This way it would have been more clear that you needed to access the data property and what that property looks like.

Upvotes: 0

Related Questions