Populate a table dynamically using javascript echoed from php?

Question

I want to populate a table with some data I get from a database using http requests. I get json encoded data with a php script and then I populate the table using jquery echoed from a php script. I doesn't look neat at all and I am wondering how I can do that differently.

I want to have php and js in separate files because at the moment when I view the source of the webpage I have like 3k+ lines as all the javascript code is generated inside a script tag and due to the large amount of data the javascript code gets repeated. The actual data I have to work with will be even bigger than what I use now for testing.

To give you a better idea of what I am doing at the moment I will write some dummy code here:

<?php
require_once ('functions.php');
include 'header.html';
include 'standardTable.html';

$results = file_get_contents("http://url.com");
$decodedResult = json_decode($results, true);

// I have a function that creates and empty table based on how big the data set is 
// This function is placed in functions.php
CreateEmptyTable($decodedResults);

// Then I go ahead and populate the table based on some rules
PopulateTable($decodedResults);

function PopulateTable($res)
{
    $rowNum = 0;
    for ($i=0;$i<count($res);$i++)
    {
        $rowNum++;
        foreach($res as $key => $value)
        {
            if ($key == "something")
                echo '$("tbody tr#row_'.$rowNum.'")
                   .find("td:nth-child(id_based_on_key)").text("'.$value.'");
                ';
            else if ($key == "something_else")
                echo 'some other jquery lines';
        }
    }
}

include 'footer.html';

So as you can see this doesn't look pretty at all so I'm wondering if I can structure my code in another way. The thing to keep in mind is that I have to pass php values to the javascript code.

I will appreciate if you can help me out with this and please let me know if you need more details as I wrote something short as an example and it may not be clear enough.

Cheers!

Answer 1

Heard of Ajax? or jQuery Ajax?

Well basically this is I would do it:

PHP file - To be the back - end only create response and controll the Database..

HTML file - to be the View.

JS\\jQuery - to be the controller.

Ajax allows you to Asynchronously request for data from other servers or send data.

Description of Ajax by jQuery + Examples

So the structure would be more like :

Answer 2

Why not use a XMLHttpRequest to call for the JSON data returned by the PHP page and build a table directly into the DOM?

This is what I'd choose to do, have the PHP do nothing but read the database and spit out the JSON, I'd have the javascript collect that and format a table anyway I needed, making use of CSS etc.

What exactly is in the PHP that you feel you must embed into the JavaScript?