Javascript 如何从API获取数据并将其放入tha表（Jquery）_Javascript_Jquery_Html Table

Javascript 如何从API获取数据并将其放入tha表（Jquery）

javascript jquery

Javascript 如何从API获取数据并将其放入tha表（Jquery）,javascript,jquery,html-table,Javascript,Jquery,Html Table,试图将从JSONP获得的所有信息存储在表中。已使用“警报”进行测试，以确保只有一行有更多信息，并且可以看到该行有更多信息。但当运行它时，在表中我可以看到标题行和第一行。有人能纠正我的错误吗 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </script> <sc

试图将从JSONP获得的所有信息存储在表中。已使用“警报”进行测试，以确保只有一行有更多信息，并且可以看到该行有更多信息。但当运行它时，在表中我可以看到标题行和第一行。有人能纠正我的错误吗

 <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>


jQuery（文档）.ready（函数（$）{
$.ajax（{
url:“http://api.example.com/v1/deal/hotel?apikey=xxx&format=JSONP", 
数据类型：“jsonp”，
成功：函数（已解析的_json）{
$.each（已解析的_json.Result，函数（索引，值）{
警报（索引+”：“+value.starting+”，“+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（“货币”）.innerHTML=货币；
var price=parsed_json['Result'][0]['price']；
document.getElementById（“price”）.innerHTML=price；
var link=parsed_json['Result'][0]['Url']；
document.getElementById（“link”）.innerHTML=link；
//如何表现enlaces
var city=parsed_json['Result'][0]['city']；
document.getElementById（“城市”）.innerHTML=城市；
var country=parsed_json['Result'][0]['CountryCode']；
document.getElementById（“国家”）.innerHTML=国家；
var stars=parsed_json['Result'][0]['starting']；
document.getElementById（“stars”）.innerHTML=stars；
}
}); 
}); 
开始日期
结束日期
夜晚
通货
价格
链接
城市
国家代码
星级

Ajax回调的结果是：

回调（{“Errors”：[]，“Result”：[{“FoundDate”：“2013-12-04T16:11:36-08:00”，“CurrencyCode”：“USD”，“NightDuration”：“2.0”，“EndDate”：“12/08/2013”，“Headline”：“开罗五星级酒店，$36/晚”，“IsWeekendStay”：“true”，“Price”：“36.0”，“StartDate”：“12/06/2013”，“Url”：“http‍://www.example.com/hotel/…&startDate=12/06/2013&endDate=12/08/2013&bid=0&sid=0，“城市”：“开罗”，“国家代码”：“EG”，“邻里纬度”：“30.0152”，“邻里经度”：“31.1756”，“邻里”：“开罗西部-吉萨”，“星级”：“5.0”，“州代码”：“EG”}，{“成立日期”：“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>

使用appendTo有什么方法可以做到这一点吗？

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);
              });
          }