如何使用JavaScript显示RESTful API调用返回的JSON
解析JSON对象后,如何使用普通JavaScript显示RESTful API调用返回的数据如何使用JavaScript显示RESTful API调用返回的JSON,javascript,api,rest,dom,unobtrusive-javascript,Javascript,Api,Rest,Dom,Unobtrusive Javascript,解析JSON对象后,如何使用普通JavaScript显示RESTful API调用返回的数据 我是用数据创建HTML元素并将它们添加到页面中,还是隐藏HTML元素并在返回的数据中嵌入HTML,然后通过CSS显示元素?我决定最好的方法是在HTML的底部创建HTML模板。通过这种方式,我可以减少需要手动编码的DOM元素的数量: <script id="daily-template" type="text/template"> <div class="xl-12">
我是用数据创建HTML元素并将它们添加到页面中,还是隐藏HTML元素并在返回的数据中嵌入HTML,然后通过CSS显示元素?我决定最好的方法是在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对象中获得了所需的数据,你就可以用它做任何你想做的事情。谢谢Nick,但是你认为最好的方法是什么呢?你能更深入地了解一下你想要完成什么吗?我想我要问的是,操作DOM并用解析的JSON数据注入html元素的最佳实践和最有效的方法是什么。到目前为止,我有两种方法来解决这个问题,但代码似乎是错误的。抱歉,我对Javascript还不太熟悉抱歉我忘了给你贴上@NickZuber的标签
/**
* 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);