Turn tables from MySQL Database into variables in Javascript

Question

I have a MySQL database which have simple tables like this:

colorTable
label | price | name
---------------------
red      10      Red
blue     20      Blue

sizeTable
label | price | name | available
---------------------------------
small    5       Small    Yes
med      10      Med      No

I want to load those variables into javascript variables so that they are an array of objects like this:

var colorTable = [
    {label:'red', price: '10', name: 'Red'},
    {label:'blue', price: '20', name: 'Blue'}
];

var sizeTable = [
     {label:'small', price: '5', name: '10', available: 'Yes'},
     {label:'med', price: '10', name: 'Med', available: 'No'}
];

I was able to load them in by outputting the variables into a plain .php file and loading that file as a javascript file, but something tells me there is a better way and I have no idea what that way would be?

I'm fine using plain javascript or jQuery, whichever is easiest.

It would need to loop through an unlimited number of tables (and columns within those tables) to automatically pull data for every table added to the database.

Why can't you json_encode() the array you're retrieving from your table? — Blake
– Blake, Commented Sep 10, 2016 at 19:57
Yep, like Blake says, just have a file where your php calls echo json_encode(mySqlResults); then call that file with ajax and process the results exactly like you want — Wesley Smith
– Wesley Smith, Commented Sep 10, 2016 at 20:09
In the question I mention that's what i'm already doing, but there has to be a better way than loading a PHP file as a javascript file. — Jordash
– Jordash, Commented Sep 10, 2016 at 20:10

Wesley Smith · Accepted Answer · 2016-09-10 20:37:38Z

1

Have a getData.php page that gets your data from the database like this:

if(isset($_POST['command'])&&$_POST['command']=='getMyData'){ 
    // .... get data from db
    // in your php, you'll need to loop over the tables you have and order the results something like this:

    $tables=["colorTable"=> $colorTableQueryResult, "sizeTable"=>$sizeTableQueryResult];
    echo json_encode($tables);
    exit;
}

Then in a .js file, have this:

       $.ajax({
          type: "POST",
          url: "getData.php",
          data: {command:'getMyData'},
          dataType:'JSON',
          success: function(response) {
                console.log(response);             
          },
          error: function(xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            console.log(err.Message);
          }
       });

The result should be:

   {
    colorTable = [{
        label: 'red',
        price: '10',
        name: 'Red'
      }, {
        label: 'blue',
        price: '20',
        name: 'Blue'
      }],
      sizeTable: [{
          label: 'small',
          price: '5',
          name: '10',
          available: 'Yes'
        }, {
          label: 'med',
          price: '10',
          name: 'Med',
          available: 'No'
        }
      }

Access them like response.colorTable

edited Sep 10, 2016 at 20:37

answered Sep 10, 2016 at 20:18

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

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

2 Comments

Jordash Over a year ago

I can't manually be adding in tables like that, it has to auto detect which tables are in the database and automatically assign the variables.

Wesley Smith Over a year ago

See my edit, just setup the array in your php then use the response object however you want, all the data will be there.

Collectives™ on Stack Overflow

Turn tables from MySQL Database into variables in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related