Why isn't my data appearing when using $http.get in AngularJS?

Question

Why isn't my data appearing when using $http.get in AngularJS?

I'm encountering an issue where my bar graph doesn't display data when using $http.get. However, if I eliminate $http.get and directly call the URL, the data shows up perfectly. Any suggestions on what might be causing this problem?

AngularJS

var app = angular.module('customCharts', ['dx']);

function ChartController($scope, $http) {

    $http.get("http://localhost:53640/Home/PostChart")
        .success(function (data) {
            $scope.productSettings = {
                dataSource: data,
                title: 'Displays Product Costs for items in our Database',
                series: {
                    argumentField: "Name",
                    valueField: "Cost",
                    type: "bar",
                    color: '#008B8B'
                },
                commonAxisSettings: {
                    visible: true,
                    color: 'black',
                    width: 2
                },
                argumentAxis: {
                    title: 'Items in Product Store Database'
                },
                valueAxis: {
                    title: 'Dollar Amount',
                    valueFormat: 'currency'
                }
            };
        });

}

HTML

<div ng-app="customCharts">
    <div ng-controller="ChartController">
        <div dx-chart="productSettings"></div>
    </div>
</div>

JSON

[{"Name":"Learn SQL Server 2014","Cost":34.95},{"Name":"ASUS PC","Cost":499.99},{"Name":"SQL Server 2014","Cost":600.00}]

json asp.net-mvc angularjs

Answer 1

Answer №1

Here is my approach to resolving this particular issue.

let app = angular.module('customCharts', ['dx']);

app.controller("ChartController", function ($scope, $http, $q) {
    $scope.productSettings = {
        dataSource: new DevExpress.data.DataSource({
            load: function () {
                let def = $.Deferred();
                $http({
                    method: 'GET',
                    url: 'http://example.com/Home/GetData'
                }).success(function (data) {
                    def.resolve(data);
                });
                return def.promise();
            }
        }),
        series: {
            title: 'Visualizing Product Prices for our Database Items',
            argumentType: String,
            argumentField: "Name",
            valueField: "Price",
            type: "bar",
            color: '#FFA500'
        },
        commonAxisSettings: {
            visible: true,
            color: 'blue',
            width: 2
        },
        argumentAxis: {
            title: 'Products in the Database'
        },
        valueAxis: {
            title: 'Amount in Dollars',
            valueFormat: 'currency'
        }
    }
})

Answer 2

Here is my approach to resolving this particular issue.

let app = angular.module('customCharts', ['dx']);

app.controller("ChartController", function ($scope, $http, $q) {
    $scope.productSettings = {
        dataSource: new DevExpress.data.DataSource({
            load: function () {
                let def = $.Deferred();
                $http({
                    method: 'GET',
                    url: 'http://example.com/Home/GetData'
                }).success(function (data) {
                    def.resolve(data);
                });
                return def.promise();
            }
        }),
        series: {
            title: 'Visualizing Product Prices for our Database Items',
            argumentType: String,
            argumentField: "Name",
            valueField: "Price",
            type: "bar",
            color: '#FFA500'
        },
        commonAxisSettings: {
            visible: true,
            color: 'blue',
            width: 2
        },
        argumentAxis: {
            title: 'Products in the Database'
        },
        valueAxis: {
            title: 'Amount in Dollars',
            valueFormat: 'currency'
        }
    }
})

Answer 3

Answer №2

To ensure the chart updates correctly, it is important to implement two-way binding. Include the following code within your $scope.productSettings:

    $scope.productSettings = {
       ...
       bindingOptions: {
         dataSource: 'dataSource'
       }
    };

In this code snippet, the attribute dataSource refers to a variable in your scope ($scope.dataSource) that you will need to update after successfully executing the $http.get method.

    $http.get('http://localhost:53640/Home/PostChart').
    success(function(data) {
       $scope.dataSource = data;
    });

For more information, refer to the documentation here

Answer 4

To ensure the chart updates correctly, it is important to implement two-way binding. Include the following code within your $scope.productSettings:

    $scope.productSettings = {
       ...
       bindingOptions: {
         dataSource: 'dataSource'
       }
    };

In this code snippet, the attribute dataSource refers to a variable in your scope ($scope.dataSource) that you will need to update after successfully executing the $http.get method.

    $http.get('http://localhost:53640/Home/PostChart').
    success(function(data) {
       $scope.dataSource = data;
    });

For more information, refer to the documentation here

Why isn't my data appearing when using $http.get in AngularJS?

Answer №1

Answer №2

Similar questions

Using jQuery within an Angular Controller: The specific function $(...).overhang is not recognized in this context

Fetching a value by key from a JSON object in a Node.js script

Creating dropdown options with JSON and Angular

Finding the root cause of the error message 'Unexpected character: :' from using rjson

Deciphering JSON information using a LOOP

Guide on utilizing JSON data sent through Express res.render in a public JavaScript file

Pressing the element may result in some instability in its operation

Maintain the current states when returning to a previous point in time

Decoding a collection of items using Jackson

Angularjs update the <select> tag inside ng-if functionality

Having difficulty invoking another controller within a controller in Angular by utilizing $rootScope, $compile, and $route

Remove the image by clicking on the "X" icon located on the top right corner of the image

Manipulating JSON Data with Retrofit on Android

Angular appends a slash to the URL path index.php#/todiv preventing me from navigating to the desired location

By harnessing a JSON response

Tips on parsing JSON data with Python

convert a JSON object into an array field

Definition of JSON Schema attribute: Field schema not supported for field... : Type of field is undefined

Using AngularJS Material's mdDialog to show locally stored data in a template

In the absence of an Avatar, verify the gender from the JSON data and insert it into the image