How to create table with AJAX

Question

I have three lists

Devices    =     (Mango, Apple, Orange)
Lifetime    =     (100,200,100)
Status =     (Yes, No, Yes)

These lists are grouped as a template

template = {
     'Device'   :  Devices,
     'Lifetime' :  Lifetime,
     'Status'   :  Status,
}

I need to create a table for web interface in AJAX from the above template displaying:

DEvices  Lifetime   Status
Mango    100        Yes
Apple    200        No
Orange   100        Yes

How can this be done in html with script using AJAX?

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div id="wrapper">
            %include navbar.tmpl ovVersion=ovVersion, roverMode=roverMode

            <div id="page-wrapper">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">Wireless Sensor</h1>
                    </div>
                </div>
                <script>
                    var n_dots = 1;
                    $( document ).ready(function() {
                        $.ajax({
                                dataType: "json",
                                url: "/wirelessSensor/dag",
                                success: updateForData,
                                error: errorOnAjax
                            });

                        function updateForData(json) {              

                         $("div").html("<table><tr><th>Devices></th><th>Lifelist</th><th>Status</th></tr>");
                         $.each(json.devices, function( index, value ) {
                           $("div").append("<tr><td>" + value + "</td><td>" + json.lifelist[index] + "<td></td><td>" + json.status[index] + "</td></tr>");
                             });
                         $("div").html("</table>"); 

                     }

                    function errorOnAjax(jqxhr, status, errorstr) {
                        var errText = (errorstr == null)
                                ? '' : ', error: ' + errorstr;
                        console.log('Ajax error: ' + status + errText);
                    }         

                });

                </script>


            </div>
        </div>
    </body>
</html>

I tried doing like this. But guess I have issues in my syntax

You should look at [this](http://stackoverflow.com/questions/1413952/how-to-create-a-new-table-with-rows-using-jquery-and-wrap-it-inside-div) for your answer. — Catman155, Mar 07 '17 at 10:26

score 0 · Answer 1 · answered Mar 07 '17 at 10:23

0

Use the jQuery each function to loop through the elements

$("div").html("<table><tr><th>Fruits></th><th>Price</th><th>Available</th></tr>");
$.each(Fruits, function( index, value ) {
    $("div").append("<tr><td>" + value + "</td><td>" + Price[index] + "<td></td><td>" + Available[index] + "</td></tr>");
    });
$("div").html("</table>");

answered Mar 07 '17 at 10:23

TVA van Hesteren

1,031
3
20
47

I tried running this inside script tag , but getting error. – NTP Mar 07 '17 at 14:34

How to create table with AJAX

1 Answers1