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.

have you inspected it (F12) to see if the data was injected in html code? the data might have shown correctly, but the table might not have css formatted which resulted in you only saw lines of data. — Klaus
– Klaus, Commented Sep 26, 2016 at 11:47
You need to state that the content is HTML Table , Have you tried using .innerHTML ? or .html() in jquery — Vikrant
– Vikrant, Commented Sep 26, 2016 at 11:48
Maybe some of the data that is coming from your ajax call contains HTML tags that could be breaking your <table> markup. Can you post the resulting HTML using F12 (developer tools)? — juliano.net
– juliano.net, Commented Sep 26, 2016 at 11:50
add border to table and cells, it will show you the things were separated, not in single statement, use bootstrap css for better look and feel — user1363245
– user1363245, Commented Sep 26, 2016 at 12:00

Marcos Alexandre Sedrez · Accepted Answer · 2016-09-26 12:05:10Z

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>

answered Sep 26, 2016 at 12:05

Marcos Alexandre Sedrez

5373 silver badges13 bronze badges

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

Comments

Chamith Saranga · Accepted Answer · 2016-09-26 12:05:22Z

 $(() => {

            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>

Collectives™ on Stack Overflow

append jquery ajax (json) to table

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related