JSON The data are as follows ：
1 var data ={ 2 "cityid":"101180101", 3 "update_time":"2020-11-09 11:45:26", 4 "city":" zhengzhou ", 5 "cityEn":"zhengzhou", 6 "country":" China ", 7 "countryEn":"China", 8 "data":[ 9 { 10 "day":"9 Japan （ today ）", 11 "date":"2020-11-09", 12 "week":" Monday ", 13 "wea":" Fine " 14 }, 15 { 16 "day":"9 Japan （ today ）", 17 "date":"2020-11-09", 18 "week":" Monday ", 19 "wea":" Fine " 20 } 21 ] 22 }
Use art-Template Template process
1 <body> 2 <div class="table-responsive"> 3 <h3> The weather forecast </h3> 4 <table class="table" align="center" id="tables"> 5 <!-- Template insertion position --> 6 </table> 7 </div> 8 <!-- 1. introduce jsonp Function plug-ins --> 9 <script src="js/jsonp.js"></script> 10 <!-- 2. introduce template-web.js --> 11 <script src="js/template-web.js"></script> 12 <!-- 3. establish template Templates --> 13 <script type="text/html" id="tplHead"> 14 <tr> 15 <th> date </th> 16 <th> temperature </th> 17 <th> The weather </th> 18 <th> week </th> 19 <th> wind direction </th> 20 <th> Wind grade </th> 21 <th> The air index </th> 22 </tr> 23 <!-- Show common data --> 24 {{if headInfo}} 25 <tr> 26 <td>{{headInfo.cityid}}</td> 27 <td>{{headInfo.city}}</td> 28 <td>{{headInfo.cityEn}}</td> 29 <td>{{headInfo.country}}</td> 30 <td>{{headInfo.country}}</td> 31 <td>{{headInfo.countryEn}}</td> 32 <td>{{headInfo.update_time}}</td> 33 34 </tr> 35 {{/if}} 36 <!-- Show multiple sets of data --> 37 {{each headInfo.data}} 38 <tr> 39 <td>{{$value.date}}</td> 40 <td>{{$value.tem}}</td> 41 <td>{{$value.wea}}</td> 42 <td>{{$value.week}}</td> 43 <td>{{$value.win[0]}}</td> 44 <td>{{$value.win_speed}}</td> 45 <td>{{$value.air_level}}</td> 46 </tr> 47 {{/each}} 48 </script> 49 <!-- 4. get data --> 50 <script> 51 var tables = document.querySelector('#tables'); 52 // Use jsonp get data 53 jsonp({ 54 url: 'https://tianqiapi.com/api', 55 data: { 56 appid: '78141834', 57 appsecret: '45U5ttdZ', 58 version: 'v1', 59 cityid: '101180101', 60 }, 61 success: function(data) { 62 //template The first parameter is the template id, The second parameter is the global object , It can't be an array 63 var tableHead = template('tplHead', { 64 headInfo: data 65 }); 66 // Fill the acquired data into the page document 67 tables.innerHTML = tableHead; 68 } 69 70 }) 71 </script> 72 73 </body>
