How to create a JSON object, send it to a Javascript and how to access it in the Javascript

Question

My goal is to Prompt the user for a Location, and call my php program which will get that location's record from the database. Then send the JSON object back to the calling Javascript function which will then populate the user Form with the data from the database record.

I am stuck with figuring out the proper format to create the JSON and once received by the Javascript function, how to parse it properly to populate the user form.

Here is my Javascript function that should prompt the user, and call the php to retrieve the record from the database.

function partModify() {
    var WPN = prompt("Please enter the West Part Number", "Harry Potter");
    if (WPN != null) {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
    //            document.getElementById("txtHint").innerHTML = this.responseText;

                var frm = document.getElementById("form-ajax");
                var i;

    //          console.dir(response);      // for debug
        alert(this.responseText);
                for (i in this.responseText) {
                    if (i in frm.elements) {
                        frm.elements[i].value = this.responseText[i];
                    }
                }
            }
        }


        xmlhttp.open("GET","part_get.php?q=" + WPN,true);
        xmlhttp.send();
    }

}

Here is the PHP program that gets the database record and sends it back via JSON.

<?php

$q = ($_GET['q']);

// Build the query based on the passed in parameters

if(!empty($q)) {

    //The query
    $query = "SELECT * FROM part_data WHERE WestPartNumber = '$q'";
    //echo ($query); //see how our query look like at the moment

    $username="xxxx";
    $password="xxxx";
    $database="xxxx";
    $datahost="xxxx";
    mysql_connect($datahost,$username,$password);
    @mysql_select_db($database) or die( "Unable to select database");

    $result=mysql_query($query);
        while ($row = mysql_fetch_row($result)) {
    $temp[] = $row;
}
echo json_encode($temp);

    mysql_close();
    exit;
} else {
echo 'Empty call';
}
echo 'Exiting Call';
?>

The closest I have been able to get is that when I display the JSON object in my Javascript using the alert() call, i get the whole PHP file text along with the database record at the end.

Can someone help educate me on what I am doing wrong?

Rich

Your web server is treating the request as an html file to be fetched instead of a script to be executed. Delete the html. — Jared Smith
– Jared Smith, Commented Apr 9, 2017 at 17:17
Tell us what you get when you call your php script directly from a browser. and then you show source code from browser (ctrl+u in chrome) — Ahmed Kooli
– Ahmed Kooli, Commented Apr 9, 2017 at 18:26
Now, I only receive the JSON which looks like the following: [{"0":"36","PartID":"36","1":"Indiana","Location":"Indiana","2":"Fizer","Customer":"Fizer","3":"Caps","Family": --and on to the end. Does this look like a proper format? — rtemen
– rtemen, Commented Apr 9, 2017 at 18:30
I have updated my part_get.php file. Changes are in the code above. I cannot get the JSON format to have the Name:Value pairs. Instead I get the following: [["36","Indiana","Fizer","Caps","PC01","W-PC01","Fizer's Jar Caps","2","15","2","35 Ton","2","1","\u0000","\u0000","\u0000","\u0000","\u0000","\u0000","Mat PC23","","1.28","0","0","0.58","0","\u0000","","","0","0","0","0","0","\u0000","Custom","0","12","144","Production"]] This is the correct data as expected from the query, but where are the name parts of the pairs? — rtemen
– rtemen, Commented Apr 10, 2017 at 16:10

Ahmed Kooli · Accepted Answer · 2017-04-09 18:24:50Z

1

Your PHP Script is like an API, it should return only JSON. So first thing to do is to call it from a browser http://localhost/part_get.php?q=99

Then view code source of the page (ctrl+u in google chrome) and check that you have a valid JSON string returned by your http server.

Also, you can get rid of all that messy JS code, and use JQuery then you'll have this:

$.getJSON("part_get.php", {
        q: WPN,
    })
    .done(function(data) {
        console.log(data)
    });

answered Apr 9, 2017 at 18:24

Ahmed Kooli

7831 gold badge6 silver badges10 bronze badges

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

2 Comments

rtemen Over a year ago

Hi, Kooli. If I change to JQuery, will I not need to go through all of my code and change all JS code to JQuery? If so, I was hoping not to have to do all of that work. My project is pretty large.

Jared Smith Over a year ago

@rtemen you don't need jquery. Pulling in a huge library just to make an slightly shorter ajax request is not a good idea.

WahhabB · Accepted Answer · 2017-04-09 17:19:37Z

0

You want to return the json_encode, not echo it. Echo essentially adds it to the HTML file. Return makes it available to the calling program.

answered Apr 9, 2017 at 17:19

WahhabB

5303 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to create a JSON object, send it to a Javascript and how to access it in the Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related