How to pass query results to javascript

Question

I'm trying to create list of countries using javascript function such as :

    <div id='content'>
        <script type="text/javascript">

            $(document).ready(function () {               
           var countries = new Array("Afghanistan", "Albania", "Algeria", ...);

            // Create a jqxComboBox
            $("#jqxComboBox").jqxComboBox({source: countries, multiSelect: true, width: 600, height: 25});           


            $("#arrow").jqxButton({  });
            $("#arrow").click(function () {
                $("#jqxComboBox").jqxComboBox({ showArrow: false });
            });
            .       
            .
            .

But I'd like to change the source of var countries to be taken from my database, my sql query is $q = "SELECT country FROM countrytbl";

I'm still beginner in js so have no idea about how to do that!!

Note: each country should be in two quotations "" in order to make the list works

What server language are you using to generate this page? Browser JavaScript can't usually interact directly with a database, so you need to have your server talk to the database, either before the page is rendered, or in a script designed to run after the fact (such that JavaScript asks your custom server script to get the data from MySQL). — Jpec07
– Jpec07, Commented Oct 12, 2018 at 18:29
I'm using mysql database with php pages including some js inside these pages — sandanet
– sandanet, Commented Oct 12, 2018 at 19:59

ArtisticPhoenix · Accepted Answer · 2018-10-12 18:19:58Z

2

Change it like this

var countries = <?php echo json_encode($countries); ?>;

Where $countries is your array of results. For example if your PHP array is like this:

$countries = array("Afghanistan", "Albania");

Then the end result of your HTML will be like this:

<div id='content'>
    <script type="text/javascript">

        $(document).ready(function () {               
           var countries = ["Afghanistan", "Albania"];
 ...

After PHP does it's thing. Of course this assumes whatever file this HTML is in has access to the $countries variable (and it's properly populated and defined). If it doesn't you'll get a javascript error for this:

var countries = ;

Which will probably be in the source code for your page.

Just FYI JSON, you may see it sometimes, stands for Javascript Object Notation. Which is a fancy way of saying a way to represent Javascript Objects (and Arrays) as a string. So json_encode transforms your PHP array into a string that Javascript can understand as an array (in this case). Then like any string in PHP/HTML files you just echo it out where you want it.

Hope that helps.

edited Oct 12, 2018 at 18:19

answered Oct 12, 2018 at 18:13

ArtisticPhoenix

21.7k2 gold badges27 silver badges38 bronze badges

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

5 Comments

sandanet Over a year ago

well, how to get database query like this $countries = array("Afghanistan", "Albania", ..);?

sandanet Over a year ago

I tried to make query in a php part like this but the countries list still empty <?php $q = "SELECT country FROM countrytbl"; foreach ($db->query($q) as $row){ $countries = $row["country"]; } ?>

Jeff Over a year ago

@sandanet change one line to $countries[] = $row["country"]; - this will add the country to the array $countries. EDIT: Ah, and the foreach is wrong. Search for mysqli_fetch_array(). See this example php.net/manual/en/mysqli-result.fetch-array.php#95881

sandanet Over a year ago

wow finally it's done, as u mentioned i did changes like this $query=mysqli_query($db,$q); while ($row = mysqli_fetch_assoc($query)): $countries[] = $row["country"]; endwhile;

sandanet Over a year ago

yup sure, i did it

Collectives™ on Stack Overflow

How to pass query results to javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related