New Topic/Question
Reply
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.
MultiQuote
| 