如何从API获取数据并将其放入表(Jquery）中

How to get the data from API and put into tha table (Jquery)

本文关键字：Jquery API 获取数据更新时间：2024-03-08

尝试将从JSONP获得的所有信息存储在表中。已经用"alert"进行了测试，以确保只有一行有更多的信息，并且可以看到那一行还有更多的信息。但当运行它时，在表中我可以看到标题行和第一行。有人能纠正我的错误吗？

 <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
    </script> 
    <script>
        jQuery(document).ready(function($) { 
            $.ajax({ 
                url : "http://api.example.com/v1/deal/hotel?apikey=xxx&format=JSONP", 
                dataType : "jsonp",
                success : function(parsed_json) { 
                    $.each(parsed_json.Result, function( index, value ) {
                    alert( index + ": " + value.StarRating + " , "+ value.Url);
                });
                var from = parsed_json['Result'][0]['StartDate']; 
                document.getElementById("from").innerHTML = from;
                var from = parsed_json['Result'][0]['StartDate']; 
                document.getElementById("from").innerHTML = from;
                var to = parsed_json['Result'][0]['EndDate']; 
                document.getElementById("to").innerHTML = to;
                var nights = parsed_json['Result'][0]['NightDuration']; 
                document.getElementById("nights").innerHTML = nights;
                var currency = parsed_json['Result'][0]['CurrencyCode']; 
                document.getElementById("currency").innerHTML = currency;           
                var price = parsed_json['Result'][0]['Price']; 
                document.getElementById("price").innerHTML = price;
                var link = parsed_json['Result'][0]['Url']; 
                document.getElementById("link").innerHTML = link;
                //how to represent enlaces
                var city = parsed_json['Result'][0]['City']; 
                document.getElementById("city").innerHTML = city;
                var country = parsed_json['Result'][0]['CountryCode']; 
                document.getElementById("country").innerHTML = country;
                var stars = parsed_json['Result'][0]['StarRating']; 
                document.getElementById("stars").innerHTML = stars; 
                }
            }); 
        }); 
    </script>
    </head>
    <body>
    <table id="t">
        <tr>
            <th>Start date</th>
            <th>End date</th>
            <th>Nights</th>
            <th>Currency</th>
            <th>Price</th> 
            <th>Link</th>
            <th>City</th>
            <th>Country Code</th>
            <th>Star Rating</th>
        </tr>
        <tr>
            <td id="from"></td> 
            <td id="to"></td>
            <td id="nights"></td>
            <td id="currency"></td>
            <td id="price"></td> 
            <td id="link"></td>
            <td id="city"></td>
            <td id="country"></td>
            <td id="stars"></td>
        </tr>
    </table>
    </body>
    </html>

Ajax回调的结果是：

callback（｛"Errors"：[]，"Result"：[｛"FoundDate"："2013-12-04T16:11:36-08:00"，"CurrencyCode"："USD"，"NightDuration"："2.0"，"EndDate"：2013&EndDate=12/08/2013&bid=0&sid=0"，"城市"："开罗"，"国家代码"："EG"，"邻居纬度"："30.0152"，"邻居经度"："31.1756"，"邻里"："开罗西部-吉萨"，"星级评定"："5.0"，"StateCode"："EG"｝，｛"FoundDate"："2013-12-04T14:51:44-08:00"，

如果结果中有多行，则必须-

在回调中循环使用它。您现在没有循环浏览它。您循环只是为了发出警报
在表中为每一行动态创建一个新行。您可以使用jquery clone方法为此克隆现有的tr。但将id替换为"class"
通过修改新创建的行中每个td的innerHtml，将数据添加到与该行相关的行中
最后，将行追加到表中

HTML-

<table id="t">
    <tr>
        <th>Start date</th>
        <th>End date</th>
        <th>Nights</th>
        <th>Currency</th>
        <th>Price</th> 
        <th>Link</th>
        <th>City</th>
        <th>Country Code</th>
        <th>Star Rating</th>
    </tr>
    <tr class="first">
        <td class="from"></td> 
        <td class="to"></td>
        <td class="nights"></td>
        <td class="currency"></td>
        <td class="price"></td> 
        <td class="link"></td>
        <td class="city"></td>
        <td class="country"></td>
        <td class="stars"></td>
    </tr>
</table>

Javascript-

success : function(parsed_json) { 
              $.each(parsed_json.Result, function( index, record ) {  
                 $row = $('.first').clone();          
                 var from = record['StartDate']; 
                 $row.find('.from').html(from);
                 //Similarly repeat the above two lines for other columns
                 //...
                 $('#t').append($row);
              });
          }