0 Replies - 364 Views - Last Post: 27 March 2018 - 04:07 AM

#1 Pogaca   User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 142
  • Joined: 24-August 13

DevExtreme library - display data

Posted 27 March 2018 - 04:07 AM

Hello there. So, I found this DevExtreme library and tried to apply to my own code. This is the code I want to apply:

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.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1