简体   繁体   中英

I'm using jquery's $.Ajax method to pull json data but it won't render it to the page

I can get part of the data to render to the page (specifically: request, ack, and return_info) however it will not render my user data (user_id, name, session_token, photo_url). I need all user data stored to render in a table.

$(document).ready(function () {
    $.ajax({
        url: "http://url/getaccount",
        type: 'GET',
        dataType: "json",
        data: {
            'account': 'all'
        },
    }).then(function (data) {
        $('.request').append(data.request);
        $('.ack').append(data.ack);
        $('.return_info').append(data.return_info);
        $('user_id').append(data.user_id);
        $('.name').append(data.name);
        $('.session_token').append(data.session_token);
        $('.photo_url').append(data.photo_url);
    });

    console.log();
});

Html

<table class="table table-striped">

    <tr>
        <td><b>User</b>
        </td>
        <td><b>Turbo User ID</b>
        </td>
        <td><b>Name</b> 
        </td>
        <td><b>Session Token<b></td>
                <td><b>Request</b>
        </td>
        <td><b>Ack</b> 
        </td>
        <td><b>Return Info<b></td>
        </tr>
        <tr>
                <td class="photo_url"></td>
                <td class="user_id"></td>
                <td class="name"></td> 
                <td class="session_token"></td>
                <td class="request"></td>
                <td class="ack"></td> 
                <td class="return_info"></td>
        </tr>
 </table>

I will be using this for several hundred users. I am not sure if I will need a for loop of not. Thank you!

<table id="myTable" class="table table-striped">
    <thead>
    <tr>
        <th><b>User</b></th>
        <th><b>Turbo User ID</b>
        </th>
        <th><b>Name</b> 
        </th>
        <th><b>Session Token<b></th>
        <th><b>Request</b>
        </th>
        <th><b>Ack</b> </th>
        <th><b>Return Info<b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>            
 </table>

$(document).ready(function () {
    $.ajax({
        url: "http://url/getaccount",
        type: 'GET',
        dataType: "json",
        data: {
            'account': 'all'
        },
    }).then(function (data) {
        for(var i = 0; i < data.accounts.length; i++){
            $('#myTable tbody').append("<tr>");
            $('#myTable tbody').append("<td class=\"photo_url\">" + data.accounts[i].photo_url + "</td>");
            $('#myTable tbody').append("<td class=\"user_id\">" + data.accounts[i].user_id + "</td>");     
            //etc...
            $('#myTable tbody').append("</tr>");             
        }
    });

    console.log();
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM