CODEWITHSUNDEEP
javascriptphpmysqljson
John Barcy
John Barcy

Reputation: 11

Turning PHP into JSON array when parsed in Javascript

So, in order to create a page that has dynamic HTML, the following Javscript code was used: 

function add0(Text, Value){ 
 var x = document.getElementById("thingy");
var option = document.createElement("option");
option.text = Text;
option.value = Value;
x.add(option);}
function add(Text, Value){ 
var x = document.getElementById("stuff");
var option = document.createElement("option");
option.text = Text;
option.value = Value;
x.add(option);}
var c = 0;
var value =<?php echo json_encode($ToAndFromR); ?>;
var formula = <?php echo json_encode($FormulaR); ?>;
while(c < <?php echo $countr ?>){
add0(value[c], formula[c]);
add(value[c], formula[c]);

c++;

}

This was done after recieving $ToAndFromR and $Formula from a SQL Query, in which the code is :

$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
//declare variables
$countr = null;
$sql = "SELECT * FROM `convert`";
$drippage = mysqli_query($conn, $sql); 
//this counts the number of rows
if (mysqli_num_rows($drippage)) {
    $countr = mysqli_num_rows($drippage);
}
$ToAndFrom = mysqli_query($conn, "SELECT ToAndFrom FROM `convert`");
$ToAndFromR = null;
$ToAndFromR = mysqli_fetch_all($ToAndFrom, MYSQLI_BOTH);

$FormulaR = null;
$Formula = mysqli_query($conn, "SELECT Formula FROM `convert`");
$FormulaR = mysqli_fetch_all($Formula, MYSQLI_BOTH);

However, the HTML gets shown as [object Object] in the dropdown list, as opposed to their actual values when a regular PHP array is used. Is there a way to fix this?

Upvotes: 0

Views: 50

Answers (2)

Phil
Phil

Reputation: 165069

Each Text and Value passed to your JavaScript functions will be an object with two properties (because you're using MYSQLI_BOTH fetch mode), eg

{"0": "some value", "ToAndFrom": "some value"}

You're attempting to assign this to the option's text and value properties.

You also appear to be running three queries when you should be running one.

mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$conn = new mysqli($servername, $username, $password, $dbname);
$conn->set_charset('utf8');

$result = $conn->query('SELECT `ToAndFrom` AS `text`, `Formula` AS `value` FROM `convert`');
$options = $result->fetch_all(MYSQLI_ASSOC);

and in your JavaScript

var options = <?= json_encode($options) ?>;
for (var i = 0, l = options.length; i < l; i++) {
    add0(options[i].text, options[i].value);
    add(options[i].text, options[i].value);
}

Also, you could cut down on the almost identical JavaScript functions add0 and add by simply passing the <select> ID, eg

function add(selectId, text, value) {
    var x = document.getElementById(selectId);
    // and so on
}

with

add('thingy', options[i].text, options[i].value);
add('stuff', options[i].text, options[i].value);

Upvotes: 2

Freya Ren
Freya Ren

Reputation: 2164

I think you should write a separate PHP script which echo the JSON.

Then in the javascript, you should call this PHP and parse the JSON. A simple code:

  var xhr = new XMLHttpRequest();
        xhr.open("GET", "sql.php", true);

        var htmltext= '';
        xhr.onload = function (e) {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var jsoninfo = xhr.responseText;
                    var obj = JSON.parse(jsoninfo);
                    // text = obj.attribute;
                    // add0(text,formula[c])
                   }
       }
}

Upvotes: 0

Related Questions