How do I display returned JSON from RESTful API call with JavaScript -
after parsing json object, how display returned data restful api call vanilla javascript?
do create html elements data , add them page or have hidden html elements , innerhtml returned data display elements via css?
i decided best approach needed create html template @ bottom of html. way reduce number of dom elements have manually code:
<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> then using creative javascript i:
- cache template,
- create dom element inject template
- insert data
- and append template dom
/** * display results api call */ // template var dailytemplate = document.getelementbyid('daily-template').innerhtml, // create element inject template dailysite = document.createelement('div'); // inject template dailysite.innerhtml = dailytemplate; /** * inject data 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'; // other code omitted... // append template dom document.getelementbyid("search-results").appendchild(dailysite);
Comments
Post a Comment