Question

尝试将从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>

Ajax回调的结果是：

回调（{ “错误”：[]， “结果”：[{ “FoundDate”： “2013-12-04T16：11：36-08：00”， “货币代码”： “USD”， “NightDuration” ：“2.0”，“EndDate”：“12/08/2013”，“标题”：“开罗五星级酒店，每晚36美元”，“IsWeekendStay”：“真实”，“价格”：“36.0”，“StartDate “：” 2013" 年12月6日， “URL”：“HTTP：//www.example.com/hotel/...&的startDate = 12/06/2013＆安培;结束日期= 12/08/2013＆安培;出价= 0＆amp; sid = 0“，”City“：”Cairo“，”CountryCode“：”EG“，”NeighborhoodLatitude“：”30.0152“，”NeighborhoodLongitude“：”31.1756“，”邻居“：”Cairo West - Giza“， “StarRating”：“5.0”，“StateCode”：“EG”}，{“FoundDate”：“2013-12-04T14：51：44-08：00”，

Answer 1

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

在回调中循环播放它。你现在还没有完成它。你只是为了警报而循环。
在表格中为每一行动态创建一个新行。您可以使用tr方法克隆退出的jquery clone。但请将id替换为＆＃39; 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);
              });
          }

如何从API获取数据并放入表中（Jquery）

1 个答案: