How to use json and ajax to create a javascript array from a PHP array?

Question

Trying the create a javaScript array from a PHP array of urls to images using JSON and AJAX. Then I want to display the images on a cordova app. I believe my issue is I'm either I'm receiving or sending the Json messages with automatic html tags. My xmlhttp.response is equal the array of urls but it has html tags which are not present in the PHP file. I think because of these tags my JSON.parse isn't working?

This is my PHP stored on a server. I'm returning the urls in json message.

<?php
include("mysqlconnect.php");

$select_query = "SELECT `ImagesPath` FROM `offerstbl` ORDER by `ImagesId` DESC";
$sql = mysql_query($select_query) or die(mysql_error());   


$data = array();
while($row = mysql_fetch_array($sql,MYSQL_BOTH)){
$data[] = $row['ImagesPath'];


}

echo json_encode($data);

?>

This is my script in my cordova app. I want to covent the JSON message into a javaScript array and display the first image in the array in the div contents. But I think I'm calling a message which includes html tags so I can't parse the message I could be wrong. I currently get three error alerts because the ready state is not correct.

 <html>
 <script>

 var arr = [];

      function importJson(str) {

            if (str=="") {
                document.getElementById("content").innerHTML="";
                return;
            }
            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 (xmlhttp.readyState==4 && xmlhttp.status == 200){

                alert(xmlhttp.response);

                arr = JSON.parse(xmlhttp.response);
                //var arr = (array)json.parse(xmlhttp.response);
                for (var i = 0; i < arr.length; i++) {
                    buildImage(arr[i]);
                    alert(arr[0]);
                }

            } else {


            alert("Error");
            }


            }



            xmlhttp.open("GET","http://server/~name/folder/content.php);
            xmlhttp.responseType = "json";
            xmlhttp.send();

            buildImage=function(src) {
                var img = document.createElement('img');
                img.src = src;
                document.getElementById("content").appendChild(img);

            }
      }

    window.onload = importJson();

 </script>


<body>
<div id="content"></div>

Have you checked the json that your php script is outputting, what your script is receiving, and what is happening during each stage of the JSON parsing? There are also some typos in your JS. — i alarmed alien
– i alarmed alien, Commented Aug 23, 2014 at 12:09
PHP should be outputting just the array but it's receiving the array plus html tags. Where? — MichaelF
– MichaelF, Commented Aug 23, 2014 at 12:16
["http:\/\/server\/~name\/folder\/images\/22-08-2014-1408726981.jpg","http:\/\/server\/~name\/folder\/images\/07-08-2014-1407418088.png"] Something like this — MichaelF
– MichaelF, Commented Aug 23, 2014 at 13:29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; <html xmlns="w3.org/1999/xhtml">; </html>["http:\/\/server\/~name\/folder\/images\/22-08-2014-1408726981.jpg","htt‌p:\/\/server\/~name\/folder\/images\/07-08-2014-1407418088.png"] — MichaelF
– MichaelF, Commented Aug 23, 2014 at 13:34

i alarmed alien · Accepted Answer · 2014-08-23 13:44:04Z

0

At present, your PHP script is outputting a web page, but the javascript is looking for JSON. To output JSON, you need to set the headers in the php script:

header('Content-Type: application/json');
echo json_encode($data);

answered Aug 23, 2014 at 13:44

i alarmed alien

9,5403 gold badges29 silver badges40 bronze badges

I keep getting the response thats the headers are already sent and I can't modify them?

MichaelF
– MichaelF

08/23/2014 13:54:05
Commented Aug 23, 2014 at 13:54
I found html tags in my "include("mysqlconnect.php");" and that was the issue. Thank you

MichaelF
– MichaelF

08/23/2014 14:01:04
Commented Aug 23, 2014 at 14:01
Cool. It's probably best to set the header right at the beginning of the script to avoid that problem. Also, mysql_* commands are being deprecated -- you should use mysqli_* or PDO if possible. See php.net/manual/en/mysqlinfo.api.choosing.php

i alarmed alien
– i alarmed alien

08/23/2014 14:03:50
Commented Aug 23, 2014 at 14:03

Add a comment |

Collectives™ on Stack Overflow

How to use json and ajax to create a javascript array from a PHP array?

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related