DevExtreme Grid
Now, my code looks something like this and it is named personalJS.js:
/* @ Author: Aleksandar Arsic @ Desctiption: Display data grid for weather @ Date: 26.03.2018 */ //http://api.wunderground.com/api/c6d29c65b3384a09/conditions/q/RS/Belgrade.json $(document).ready(function() { var country,city,tempF,tempC; var objB = new Object; var stringB; // If user clicks on Belgrade from navbar $("#belgrade").click(function(){ // Ajax used to get JSON data $.getJSON("http://api.wunderground.com/api/c6d29c65b3384a09/conditions/q/RS/Belgrade.json",function(data) { country = data.current_observation.display_location.state_name; city = data.current_observation.display_location.city; tempC = data.current_observation.temp_c; tempF = data.current_observation.temp_f; objB.country = country; objB.city = city; objB.tempC = tempC; objB.tempF = tempF; stirngB = JSON.stringify(objB); console.log(objB.tempF); $(function(){ $("#gridContainer").dxDataGrid({ dataSource: {objB}, columns: [ "country","city","tempC", "tempF" ] }); }); }); }); // If user clicks on London from navbar $("#london").click(function(){ // Ajax used to get JSON data $.getJSON("http://api.wunderground.com/api/c6d29c65b3384a09/conditions/q/GB/London.json",function(data) { country = data.current_observation.display_location.state_name; city = data.current_observation.display_location.city; tempC = data.current_observation.temp_c; tempF = data.current_observation.temp_f; }); }); // If user clicks on Tokyo from navbar $("#tokyo").click(function(){ // Ajax used to get JSON data $.getJSON("http://api.wunderground.com/api/c6d29c65b3384a09/conditions/q/JP/Tokyo.json",function(data) { country = data.current_observation.display_location.state_name; city = data.current_observation.display_location.city; tempC = data.current_observation.temp_c; tempF = data.current_observation.temp_f; }); }); });
Get your attention on belgrade click, anything else is still not in function. So, when I click on Belgrade from navigation, it doesn't show any data. Column names are right, but there is just no data even I created obj, and tried with array, and even with stringify JSON. This is my HTML:
<!DOCTYPE html> <html lang="en"> <head> <title>Weather page</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="personal.css" type="text/css" /> <script src="jquery-2.2.3.min.js" type="text/javascript"></script> <script src="js/DevExtreme/dx.all.js" type="text/javascript"></script> <script src="js/bootstrap.min.js"></script> <script src="personalJS.js" type="text/javascript"></script> <link href="css/DevExtreme/dx.common.css" rel="stylesheet" type="text/css"/> <link href="css/DevExtreme/dx.light.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-3 sidebar"> <ul class="nav nav-sidebar"> <li class="sidebarActive text-center"><a href="#">WEATHER PICKER <span class="sr-only">(current)</span></a></li> <li><a href="#" id="london">London <span class="glyphicon glyphicon-cloud pull-right"></span></a></li> <li><a href="#" id="belgrade">Belgrade<span class="glyphicon glyphicon-cloud pull-right"></span></a></li> <li><a href="#" id="tokyo">Tokyo<span class="glyphicon glyphicon-cloud pull-right"></span></a></li> </ul> </div> <div class="demo-container col-lg-8"> <div id="gridContainer"></div> </div> </div> </div> </body> </html>
Please download library on your own and follow the proper structure so that you can use bootstrap and DevExtreme.