提问人：j_quelly 提问时间：1/21/2016 更新时间：9/10/2016 访问量：1045
如何使用 JavaScript 显示从 RESTful API 调用返回的 JSON
How do I display returned JSON from RESTful API call with JavaScript
问：
解析 JSON 对象后，如何使用 vanilla JavaScript 显示 RESTful API 调用返回的数据？
我是用数据创建 HTML 元素并将它们添加到页面中，还是我有隐藏的 HTML 元素和返回的 innerHTML，然后通过 CSS 显示元素？
答：
0赞
j_quelly
9/10/2016
#1
我决定满足我需求的最佳方法是在我的 html 底部创建一个 HTML 模板。这样我就可以减少我必须手动编码的 DOM 元素的数量：
<script id="daily-template" type="text/template">
<div class="xl-12">
<h2 class="location"><?php echo $daily['name']; ?>, <?php echo $daily['sys']['country']; ?></h2>
<img class="flag" />
</div>
<div class="xl-2 s-12 m-6 no-padding-top h140 text-center">
<h3 class="description"></h3>
<img class="icon" />
</div>
<div class="xl-2 s-12 m-6 no-padding-top h140 text-center">
<h5>Current</h5>
<h5 class="temp"></h5>
</div>
<div class="xl-2 s-6 m-3 text-center">
<h5>Low</h5>
<h5 class="min-temp"></h5>
</div>
<div class="xl-2 s-6 m-3 text-center">
<h5>High</h5>
<h5 class="max-temp"></h5>
</div>
<div class="xl-2 s-6 m-3 text-center">
<h5>Humidity</h5>
<h5 class="humidity"></h5>
</div>
<div class="xl-2 s-6 m-3 text-center">
<h5>Wind</h5>
<h5 class="wind"></h5>
</div>
<div class="clear"></div>
</script>
然后使用一些创造性的 Javascript I：
- 缓存模板，
- 创建一个 DOM 元素来注入模板
- 插入数据
- 然后将模板附加到 DOM
/**
* Display the results from API call
*/
// get the template
var dailyTemplate = document.getElementById('daily-template').innerHTML,
// create an element to inject the template
dailySite = document.createElement('div');
// inject the template
dailySite.innerHTML = dailyTemplate;
/**
* Inject the data to the template
*/
// location
dailySite.getElementsByClassName('location')[0].innerHTML = current.name + ', ' + current.sys.country;
// flag
dailySite.getElementsByClassName('flag')[0].src = 'http://openweathermap.org/images/flags/' + current.sys.country.toLowerCase() + '.png';
// description
dailySite.getElementsByClassName('description')[0].innerHTML = ucfirst(current.weather[0].description);
// weather icon
dailySite.getElementsByClassName('icon')[0].src = 'http://openweathermap.org/img/w/' + current.weather[0].icon + '.png';
// all other code omitted...
// append the template to the DOM
document.getElementById("search-results").appendChild(dailySite);
评论