AngularJs read json file not recognized - html

I am testing AngularJS. I am trying to read a json file with http.get and show it in a ng-repeat.
I have two problems...
First, the file with .json extension is not recognized. I have to rename it with .js extension
Second, the format elements in the file are not recognize. Repeater is filled with empty rows.
Here is my Angular.html
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope, $http) {
$scope.loadData = function () {
$http.get("productData.js").success(function (data) {
$scope.products = data;
});
}
});
</script>
</head>
<body ng-controller="defaultCtrl">
<div class="panel panel-default">
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead><tr><th>Name</th><th>Category</th><th>Price</th></tr></thead>
<tbody>
<tr ng-hide="products.length">
<td colspan="3" class="text-center">No Data</td>
</tr>
<tr ng-repeat="item in products">
<td>{{name}}</td>
<td>{{category}}</td>
<td>{{price | currency}}</td>
</tr>
</tbody>
</table>
<p>
<button class="btn btn-primary" ng-click="loadData()">
Load Data
</button>
</p>
</div>
</div>
</body>
</html>
Here is my ProductData.js
[{ "name": "Apples", "category": "Fruit", "price": 1.20, "expiry": 10 },
{ "name": "Bananas", "category": "Fruit", "price": 2.42, "expiry": 7 },
{ "name": "Pears", "category": "Fruit", "price": 2.02, "expiry": 6 },
{ "name": "Tuna", "category": "Fish", "price": 20.45, "expiry": 3 },
{ "name": "Salmon", "category": "Fish", "price": 17.93, "expiry": 2 },
{ "name": "Trout", "category": "Fish", "price": 12.93, "expiry": 4 }]
What I am doing wrong?
Thanks.

Rename your file as productdata.json. and change your code according to it
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope, $http) {
$scope.loadData = function () {
$http.get("productData.json").success(function (data) {
$scope.products = data;
});
}
});
Also if you are using angularjs version above 1.3 replace .Success with .Then, because .Success has been deprecated

I have found why it does not appear... It was my mistake.. I had to replace
<tr ng-repeat="item in products">
<td>{{name}}</td>
<td>{{category}}</td>
<td>{{price | currency}}</td>
</tr>
for this one
<tr ng-repeat="item in products">
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
</tr>
I have forgotten to add item.
Anyway.. I could not find why my PC do not accept .json file... If I put those file in IIS directory and run it from IIS, it Works fine.. But it does not work from outside IIS.

Related

how to repeat the rows for the key of key value

I received the json data in AngularJs and want to display the particular value of json data in table using ng-repeat.
json data:
{
"15":{
"Unique number":"133077",
"Designation":"Software Engineer",
},
"16":{
"Unique number":"133079",
"Designation":"Senior Software Engineer",
},
"18":{
"Unique number":"143688",
"Designation":"Senior Software Engineer",
}
}
I want to display in table like this using HTML:
| uniq no | designation |
| 133077 | Software Engineer |
| 133079 | Senior Software Engineer |
| 143688 | Senior Software Engineer |
Any help please.
Thanks in advance.
angular.module('app',[]).controller('myCtrl', function($scope){
$scope.members = {
"15":{
"Unique number":"133077",
"Designation":"Software Engineer",
},
"16":{
"Unique number":"133079",
"Designation":"Senior Software Engineer",
},
"18":{
"Unique number":"143688",
"Designation":"Senior Software Engineer",
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<table>
<thead>
<th>SI.NO</th>
<th>Unique number</th>
<th>Designation</th>
</thead>
<tbody>
<tr ng-repeat="member in members">
<td>{{$index + 1}}</td>
<td>{{member['Unique number']}}</td>
<td>{{member.Designation}}</td>
</tr>
</tbody>
</table>
</div>
EDIT : OP changed the requirement to add an extra field to display serial number.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = {"15":{
"Unique number":"133077", "Designation":"Software Engineer", },
"16":{
"Unique number":"133079", "Designation":"Senior Software Engineer", },
"18":{
"Unique number":"143688", "Designation":"Senior Software Engineer", }
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="myCtrl">
<table class="table table-bordered table-striped">
<thead>
<th>Sl. No.</th>
<th>Unique number</th>
<th>Designation</th>
</thead>
<tr ng-repeat='(key, value) in data'>
<td>
{{$index + 1}}
</td>
<td>
{{value["Unique number"]}}
</td>
<td>
{{value["Designation"]}}
</td>
</tr>
</table>
</div>
My solution base on new components architecture simple for understand:
(function() {
'use strict';
// app.js
angular
.module('app', [])
.component('myApp', {
template: '<items-table items="$ctrl.items"></items-table>',
bindings: {},
controller: function() {
this.items = {
"15": {
"Designation": "Software Engineer",
"Unique number": "133077"
},
"16": {
"Designation": "Senior Software Engineer",
"Unique number": "133079"
},
"18": {
"Designation": "Senior Software Engineer",
"Unique number": "143688"
}
};
}
});
const itemsTableTemplate = `
<div class="items">
<h2>Items</h2>
<table>
<thead>
<tr>
<th>unique no</th>
<th>designation</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(id, item) in $ctrl.items track by id">
<td ng-bind="item['Unique number']"></td>
<td ng-bind="item['Designation']"></td>
</tr>
</tbody>
</table>
</div>
`;
// items-table.component.js
angular
.module('app')
.component('itemsTable', {
template: itemsTableTemplate,
bindings: {
items: '<'
},
controller: ItemsTableController,
controllerAs: '$ctrl'
});
function ItemsTableController() {
// Constructor
}
angular.bootstrap(document.getElementById('app'), ['app'], {
strictDi: true
})
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div id="app">
<my-app>
Loading...
</my-app>
</div>

Create a table from REST object by setting data in columnar manner

I have a REST service, which returns this object:
[
{
"id": 100,
"value": "2452"
},
{
"id": 100,
"value": "2458"
},
{
"id": 1,
"value": "2457"
},
{
"id": 1,
"value": "2459"
},
{
"id": 4,
"value": "2460"
},
{
"id": 5,
"value": "3458"
}
]
Now, using this GET service, I want the following table to be built in angular and show it in UI.
100 1 4 5
-------------------
2452 2457 2460 3458
2458 2459
i.e. the unique ids should create the header and the list of values associates to each header value will be appended to respective column.
I have tried something with ng-repeat like this:
<table border="1">
<tr>
<th ng-repeat="column in cols">{{column.id}}</th>
</tr>
<tr>
<td ng-repeat="column in cols">
<md-list>
<md-list-item class="md-2-line" ng-repeat="val in column.values">
<md-checkbox ng-model="item.done"></md-checkbox>
<div class="md-list-item-text">
??
</div>
</md-list-item>
</md-list>
</td>
</tr>
But still wondering how to do the same? Please help.
Try use groupBy filter.
var app = angular.module('anApp', ['angular.filter']);
app.controller('aCtrl', function($scope) {
$scope.data = [
{
"id": 100,
"value": "2452"
},
{
"id": 100,
"value": "2458"
},
{
"id": 1,
"value": "2457"
},
{
"id": 1,
"value": "2459"
},
{
"id": 4,
"value": "2460"
},
{
"id": 5,
"value": "3458"
}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
<table border="1">
<tr>
<th ng-repeat="col in data | groupBy: 'id'">{{col[0].id}}</th>
</tr>
<tbody>
<tr>
<td ng-repeat="col in data | groupBy: 'id'">
<table>
<tr ng-repeat="c in col">
<td> {{c.value}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>

$http.get method in angularjs for rest Api

I want to fetch the list of friends for the REST-API into table using $http.get method in angularjs. Please see the DEMO.
I am not able to load the JSON data, When I click on button.
JSON.data
{
"friends": [
{
"FirstName": "John",
"LastName": "Doe"
},
{
"FirstName": "Ann",
"LastName": "Wellington"
},
{
"FirstName": "Sabrina",
"LastName": "Burke"
}
]
}
Index.html
<body ng-app="step4App">
<div ng-controller="FriendsCtrl">
<button ng-click="loadFriends()">Load Friends</button>
<table>
<thead>
<tr><th>First</th><th>Last</th></tr>
</thead>
<tbody>
<tr ng-repeat="friend in friends">
<td>{{friend.FirstName}}</td>
<td>{{friend.LastName}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app=angular.module("step4App",[]);
app.controller("FriendsCtrl", function($scope, $http){
$scope.loadFriends=function(){
$http.get("friendsList.json").success(function(data){
$scope.friends=data;
}).error(function(){
alert("An unexpected error occured!");
});
}
});
</script>
</body>
Your JSON file have an object, and $scope.friends is an array.
You need change this:
$scope.friends=data;
to:
$scope.friends = data.friends;
DEMO

AngularJS and HTML Table

I have json that looks like this :
[
{
"date": "25/06/2015",
"details": [
{
"p": "AM",
"b": "2500"
},
{
"p": "JL",
"b": "300"
}
]
},
{
"date": "24/06/2015",
"details": [
{
"p": "AM",
"b": "2300"
},
{
"p": "JL",
"b": "1300"
}
]
}
]
I want to write the data to an html table using angularjs, but I want the value of date.details.p to determine which column the value of date.details.b should go in. So, for example the value date.details.b will always go in column 2 if date.details.p = 'AM'.
The JSON data will not always contain data that would relate to each column, nor can the order of the details array be guaranteed.
Any ideas gratefully received.
EDIT
The expected output would be
Date AM JL
25/06/2015 2500 300
24/06/2015 2300 1300
Based on the limited info I can suggest you can use ngShow.
<tr>
<td class="ColumnTwo">
<span data-ng-show="checkAM(date)">{{date.details.p}}</span>
</td>
</tr>
In the function checkAM you can check if date.details.p == "AM"
Based on the situation you can use
ngSwitch
ngIf
Also check out https://stackoverflow.com/a/15810462/2489860
Try this:
<table>
<tr>
<th>Date</th>
<th>AM</th>
<th>JL</th>
</tr>
<tr ng-repeat="item in data">
<td>{{ item.date }}</td>
<td ng-repeat="detail in item.details">
<span ng-show="detail.p=='AM' && $index == 0">{{ detail.b }}</span>
<span ng-show="detail.p=='JL' && $index == 1">{{ detail.b }}</span>
</td>
</tr>
</table>
You can see and run the complete code below:
angular.module('app', [])
.controller('ctrl', function ($scope) {
$scope.data = [
{
"date": "25/06/2015",
"details": [
{
"p": "AM",
"b": "2500"
},
{
"p": "JL",
"b": "300"
}
]
},
{
"date": "24/06/2015",
"details": [
{
"p": "AM",
"b": "2300"
},
{
"p": "JL",
"b": "1300"
}
]
}
];
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<table>
<tr>
<th>Date</th>
<th>AM</th>
<th>JL</th>
</tr>
<tr ng-repeat="item in data">
<td>{{ item.date }}</td>
<td ng-repeat="detail in item.details">
<span ng-show="detail.p=='AM' && $index == 0">{{ detail.b }}</span>
<span ng-show="detail.p=='JL' && $index == 1">{{ detail.b }}</span>
</td>
</tr>
</table>
</div>
</body>
</html>

Angular.js - Nested JSON scope with Angular

{
"imports": {
"imported": [
{
"date": "19/9/2014",
"item": [
{
"sn": "3366698",
"type": "Food",
"weight": "10tn."
},
{
"sn": "3366699",
"type": "Eqipment",
"weight": "20kg."
}
]
},
{
"date": "20/9/2014",
"item": [
{
"sn": "3366700",
"type": "Electronics",
"weight": "100pt."
},
{
"sn": "3366701",
"type": "Food",
"weight": "5tn."
}
]
}
]
}
}
I have this json and I am not sure if it's in the right structure. I am trying to render each item type (duplicates included) as table header by the following $.getJSON method:
$scope.items = data.imports.item;
and HTML as:
<table border="1" >
<thead>
<tr>
<th ng-repeat="item in items">{{item.type}}</th>
</tr>
</thead>
</table>
But I couldn't succeed. What am I doing wrong?
EDIT: jsfiddler
I don't see you are using the imported propery at all, try
$scope.items = data.imports.imported;
since imported is your array and not item.
<table border="1" >
<thead>
<tr>
<th ng-repeat="item in items">{{item.type}}</th>
</tr>
</thead>
</table>
Your json ist broken, paste your json here:
http://jsonformatter.curiousconcept.com/
You'll see that data.imports.item would be undefined.
Correct JSON to access would look like:
{
"imports": {
"item": [
{
"sn": "3366698",
"type": "Food",
"weight": "10tn."
},
{
"sn": "3366699",
"type": "Eqipment",
"weight": "20kg."
}
]
}
}
Also access your data after:
<th ng-repeat="item in items">
{{item["type"]}}
</th>