Get Data from JSON file using Angularjs

Hi Friends,

In the below post we will learn how to fetch data of a json file using angular js. I will modify my previous example of a angular js to get some data from json file. I have created a json file at the same directory and named it as “groceryList.json” and added some predefined data as below in that fille.

image

next I have updated the “itemListCtrl” as below.

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> myGroceryApp.controller("itemListCtrl", function ($scope,$http) {
$scope.itemList
= model;

$http.get(
"groceryList.json").success(function (data) {
$scope.itemList.items
= data;
});


$scope.AddGroseryItem
= function (itemName, quantity) {
var srNo = $scope.itemList.items.length+1;
$scope.itemList.items.push({
srNo: srNo,
itemName: itemName,
quantity: quantity,
done:
false
});
}


});

 

Here I have added “$http” service at the controller parameter , then I have used “$http.get” method to fetch the data from “groceryList.json” file. In the success callback I have assigned the “$scope.itemList.items” with the returned data.

When you browse this ,you will see the below page as output.

image

I hope you found this post useful. Thanks for reading. Happy Coding Smile.

Advertisements

One thought on “Get Data from JSON file using Angularjs

  1. Hello, where do you acctually put the file ? I'm having trouble locating it in the local environment as well as the production environment. It always comes back with a 404 Not found Error .

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s