CODEWITHSUNDEEP
javascriptphparraysajax
Buck
Buck

Reputation: 187

Make an array Javascript with a PHP array

I have a ajax script that returns me an associative array list as follows: 

array(24) {  
["id"]=>  
string(4) "3478"  
["joindate"]=>  
string(19) "2016-10-17 21:20:28"  
["ip"]=>  
string(12) "xxx.xxx.xx.xx"  
...  
}

array(24) {  
["id"]=>  
string(4) "3479"  
["joindate"]=>  
string(19) "2016-10-17 21:20:28"  
["ip"]=>  
string(12) "xxx.xxx.xx.xx"   
...  
}

HTML

<thead>
  <tr>
    <th><b><u>key 1</u></b></th>
    <th><b><u>key 2</u></b></th>
    <th><b><u>key 3</u></b></th>
    <th><b><u>key 4</u></b></th>
    <th><b>etc...</b></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>value 1</td>
    <td>value 2</td>
    <td>value 3</td>
    <td>value 4</td>
    <td>etc...</td>
  </tr>
<tr>
    <td>value 1</td>
    <td>value 2</td>
    <td>value 3</td>
    <td>value 4</td>
    <td>etc...</td>
  </tr>
</tbody>

My current javascript where formation is an ID and methode is my date

data += "data=" +formation+' '+methode; 
$.ajax({ 
        url: "core/display_lead.php", 
        type: "post", 
        data: data, dataType: "html", 
        success : function(code_html, statut){ 
            console.log(code_html); 
        }, 
        error : function(resultat, statut, erreur){ 
            console.log("La requête n'a pas aboutie..."); 
            console.log(resultat); 
            console.log(statut); 
            console.log(erreur);
         } 
});

how do I get the key to creating a table header, then only the value to fill it ?

For the moment I transmits data to Javascript with a simple PHP var_dump, there is a cleaner method, perhaps?

thanks a lot

Upvotes: 0

Views: 76

Answers (4)

L. Herrera
L. Herrera

Reputation: 490

Convert the array to json_encode and pass the data to the javascript, I replicate your idea with mine:

<html>
    <head>
        <script src='../assets/jquery/jquery-latest.js' type='text/javascript'></script>
    </head>
<?php
        $data_ = array(
            array(
                "id" => "3478",
                "joindate" => "2016-10-17 21:20:28",
                "ip" => "xxx.xxx.xx.xx"
            ),
            array(
                "id" => "3479",
                "joindate" => "2016-10-17 21:20:28",
                "ip" => "xxx.xxx.xx.xx"
            )
        );

        $json_data = json_encode($data_);
    ?>
<script type="text/javascript">
        $(document).ready(function(){
            var data_ = <?php echo $json_data; ?>;
                var html = '<table border="1">';
                    html += '<thead>';
                    html += '<tr>';
                        html += '<th>ID</th>';
                        html += '<th>JOINDATE</th>';
                        html += '<th>IP</th>';
                    html += '</tr>';
                    html += '<thead>';
                    html += '<tbody>';
                        for(var i = 0; i < data_.length; i++) {
                            html += '<tr>';
                                html += '<td>' + data_[i].id + '</td>';
                                html += '<td>' + data_[i].joindate + '</td>';
                                html += '<td>' + data_[i].ip + '</td>';
                            html += '</tr>';
                        }

                    html += '</tbody>';
                $("#div_data").html(html);
        });
    </script>


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

Please bear with my html tags XD. Hope it helps.

Upvotes: 1

RiggsFolly
RiggsFolly

Reputation: 94642

So first change your PHP code to send back a JSON respose instead of a var_dump

<?php

    $all = array();
    while ($row = mysql_fetch_array($req, MYSQLI_ASSOC)){ 
         $all[] = $row; 
    }

    echo json_encode($all);

Now in your javascript, tell the .ajax functionality to expect JSON as a response

data += "data=" +formation+' '+methode; 
$.ajax({ 
        url: "core/display_lead.php", 
        type: "post", 
        data: data, 
        dataType: "json",           //<-- amended

        success : function(data, statut){ 
            console.log(data); 
        }, 
        error : function(resultat, statut, erreur){ 
            console.log("La requête n'a pas aboutie..."); 
            console.log(resultat); 
            console.log(statut); 
            console.log(erreur);
         } 
});

Now using this and @krasipenkov answer and a little look at the data using the javascript debugger you should be almost all the way there. The data parameter on your success method should now be a javascript native data type i.e an array or an object depending on the data you built in PHP and easy enough to process

Afraid I really have to add this as well now I see your using the mysql_extension. Every time you use the mysql_ database extension in new code a Kitten is strangled somewhere in the world it is deprecated and has been for years and is gone for ever in PHP7. If you are just learning PHP, spend your energies learning the PDO or mysqli database extensions. Start here

Upvotes: 1

Jan
Jan

Reputation: 59

var_dump is meant for debugging purposes. if you want transfer data to another script / language, you rather go for json.

So you do something like (untested):

<script>
var myJavascriptVariable = <?php echo(json_encode($myPHPVariable)); ?>;
</script>

At the top of your script / website. After that you have the JS Variable myJavascriptVariable which holds your data.

You might also want to have a look at Plugins like "DataTables" for jquery (see: https://datatables.net ). Those handle the Table Creation and offer additional features like sorting and filtering.

Upvotes: 1

krasipenkov
krasipenkov

Reputation: 2029

You can json_encode the result returned by your php like that:

echo json_encode($data);

after that you can parse it in javascript and iterate over it:

var html = '<table>';
$.each(data, function(i, item) {
    var head = '';
    var row = '<tr>';
    if($i === 0) {
        head += '<thead><tr>'
    }
    $.each(item, function(key, value) {
        head += '<th><b><u>'+key+'</u></b></th>';
        row += '<td>'+value+'</td>';
    });
    if($i === 0) {
        head += '</tr></thead>'
    }
    row += '</tr>';
    html += head+row;
});​
html += '</table>';

and append the html variable to a html element.

Upvotes: 1

Related Questions