append jquery ajax (json) to table

Question

I have a ajax call that retreives data and its success portion looks like this:

$("table.table").append("<tr><td>ID: " + item.ID + "</td><td>Name: " + item.name +" Url:</td><td><a href='https://.......sharepoint.com/" +item.url+ "'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a>" + "</td></tr>");

My html table look like this:

<table class="table"></table>

I am trying to show elements like a table:

But instead it's shows like single sentence, like this one: ID: 002 Name: toysrus Url:(icon)

How can I solve this problem and is there any way that I can make items look little bit more modern and useful. Any suggestion will be highly appreciated.

var uri = 'sharepointmodel.json';  
            function find() {
                var info = $('#KUNDE').val()
                $("#loader").show();
                   $.getJSON(uri)
                    .done(function (data) {                       
                        var item = data.filter(function (obj) {
                            return obj.name === info || obj.ID === info;
                        })[0];
                        if (typeof item ==='undefined'){
                            alert("Ukendt navn eller ID");
                        }
                        else if (typeof item !== 'undefined' || item !== null){                  
             $("table.table").append("<tr><td>ID: " + item.ID + "</td><td>Name: " + item.name +" Url:</td><td><a href='https://........sharepoint.com/" +item.url+ "'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a>" + "</td></tr>");
                      }                                                
                    })
                    .fail(function (jqXHR, textStatus, err) {                     
                        $('#ERROR').text('Kan ikke oprette forbindelse til serveren! '/* + err*/);}).always(function (){$("#loader").hide();
                    }); 
            }

and Html part is:

<body>
    <header>
        <a href="index.html" id="logo">
            <h1></h1>
            <h2></h2>
        </a>
        <nav>
            <ul>
                <li><a href="index.html">SearchBox</a></li>
                <li><a href="http://.com/">.com</a></li>
                <li><a href="http://.com/support/">Support&Aflastning</a></li>
            </ul>
        </nav>
    </header>
                <div class="container">   
                <li class="li-myLeagues"> 
                <div style="float:left;margin-left:10px;">                      
                                <input type="text" id="KUNDE" placeholder="Search by name or ID." value="" size="60" /> 
                                <div id="loader" style="display:none;"><img src="loader.gif" /></div>    </div>  
                                <div style="float:left;margin-left:10px;">              
                                <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button> 
                                </div> 
                            </li>
                    </div>
                    <div id="loader" style="display:none;"><img src="loader.gif" /></div>  
                    <section class="section">
            <div class="liper">              
                 <table class="table"></table>         
            <p id="ERROR" />  </p>
            </div>
                </section>

Sorry its looks very messy.

Answer 1

Like this?

 $("table.table").append("<thead><tr><th>ID</th><th>Name</th><th>URL</th></tr></thead>"); $("table.table").append("<tr><td>1</td><td>MARC</td><td><a href='https://.......sharepoint.com'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a></td></tr>"); $("table.table").append("<tr><td>2</td><td>MICHAEL</td><td><a href='https://.......sharepoint.com'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a></td></tr>");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border=1 class="table"></table>

Answer 2

  $(() => { var jsonObject = [{ id: '002', name: 'Google', Icon: 'https://t0.rbxcdn.com/98aeff8137da4af6157fb1c29836d9bc' }, { id: '002', name: 'Fb', Icon: 'https://t0.rbxcdn.com/875e717ac7ae0df8d133278d0c52f963' }, { id: '002', name: 'Yahoo', Icon: 'https://t0.rbxcdn.com/875e717ac7ae0df8d133278d0c52f963' }] ; //Get the external template definition using a jQuery selector var template = kendo.template($("#javascriptTemplate").html()); //Create some dummy data var data = jsonObject; var result = template(data); //Execute the template $("table").html(result); //Append the result });

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Slider</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> </head> <body> <table></table> <script id="javascriptTemplate" type="text/x-kendo-template"> <table> <tr> <td><b>ID</b> </td> <td> <b>Name </b> </td> <td> <b>icon </b> </td> </tr> # for (var i = 0; i < data.length; i++) { # <tr> <td> #= data[i].id #</td> <td> #= data[i].name # </td> <td> <img src="#= data[i].Icon #" width="150px" height="150px"/> </td> </tr> # } # </table> </script> </body> </html>

append jquery ajax (json) to table

Question

2 answers

solution1
1 ACCPTED 2016-09-26 12:05:10

solution2
1 2016-09-26 12:05:22

append jquery ajax (json) to table

Question

2 answers

solution1 1 ACCPTED 2016-09-26 12:05:10

solution2 1 2016-09-26 12:05:22

solution1
1 ACCPTED 2016-09-26 12:05:10

solution2
1 2016-09-26 12:05:22