So I have a json file with nested elements. This is my json file:
[
{
"qid": "1",
"contester": "0",
"answer": "0",
"question": "What are you most likely to do after getting into an argument? ",
"images": [
{
"qid": "1",
"imageid": "AB100",
"imgname": "doghug_q1",
"imgpath": "Images\/Q1\/doghug_q1.jpg"
},
{
"qid": "1",
"imageid": "AB101",
"imgname": "eq_q1.jpg",
"imgpath": "Images\/Q1\/eat_q1.jpg"
},
{
"qid": "1",
"imageid": "AB102",
"imgname": "headache_q1",
"imgpath": "Images\/Q1\/headache_q1.jpg"
},
{
"qid": "1",
"imageid": "AB106",
"imgname": "scream_q1.jpg",
"imgpath": "Images\/Q1\/scream_q1.jpg"
},
{
"qid": "1",
"imageid": "AB107",
"imgname": "shopping_q1",
"imgpath": "Images\/Q1\/shopping_q1.jpg"
},
{
"qid": "1",
"imageid": "AB108",
"imgname": "walkAlone_q1",
"imgpath": "Images\/Q1\/walkAlone_q1.jpg"
}
]
},
{
"qid": "2",
"contester": "0",
"answer": "0",
"question": "Which game would you rather play?",
"images": [
{
"qid": "2",
"imageid": "AB105",
"imgname": "charades_q2.jpg",
"imgpath": "Images\/Q2\/charades_q2.jpg"
},
{
"qid": "2",
"imageid": "AB109",
"imgname": "playingCards_q2.jpg",
"imgpath": "Images\/Q2\/playingCards_q2.jpg"
},
{
"qid": "2",
"imageid": "AB110",
"imgname": "chess_q2",
"imgpath": "Images\/Q2\/chess_q2.jpg"
},
{
"qid": "2",
"imageid": "AB111",
"imgname": "twister_q2",
"imgpath": "Images\/Q2\/twister_q2.jpg"
}
]
}
]
And this is my controller that i used to access the json :
var app= angular.module('myApp', []);
app.controller('ListCtrl', ['$scope', '$http',
function($scope, $http) {
$http.get('results.json').success(function(data) {
$scope.questions = data; // get data from json
angular.forEach($scope.questions, function(item){
console.log(item.images);
})
});
});
}
]);
And then my html code to display the questions and each questions list of images using the ng-repeat :
<body ng-app="myApp" >
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="question in questions"> {{question.qid}} </li>
</ul>
</div>
</body>
As of now iam trying to display the questions id from the json file as a list however the output im getting is a:
{{question.qid}}
as the output in my html page.. Can someone please help me. I dont know what im doing wrong.
your code has some missing things.
Here is working example of your code
http://plnkr.co/edit/FvD26TYZ9v8TbgUBUzN2?p=preview
firstly,
var app = angular.module('myApp', []); //variable app is missing.
secondly, data you mention has missing closing square brace.
First define app
var app = angular.module('myApp', []);
Then initiate your $scope.questions on your controller like
$scope.questions = [];
Also you might need to parse your data with
$scope.questions = JSON.parse(data);
You haven's define the app so you should change the first line of your code to this and check your closing tags on your js code...:
var app = angular.module('myApp', []);
app.controller('ListCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.questions = [];
$http.get('results.json').success(function(data) {
$scope.questions = data; // get data from json
angular.forEach($scope.questions, function(item){
console.log(item.images);
})
});
}
]);
Complete working code for your case :
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="question in questions"> {{question.qid}} </li>
</ul>
</div>
</body>
</html>
JS
var app = angular.module('plunker',[]);
app.controller('ListCtrl',function ($scope,$http) {
$http.get('data.json').success(function(data) {
$scope.questions = data; // get data from json
});
});
Working Plunker
It is working !! Try once !!
Related
Finally trying to learn AngularJS and I can't quite figure out how to make components work recursively. I have a simple example that's not rendering as expected.
HTML
<body ng-app="myApp" ng-controller="myCtrl as vm">
<nested-list list="vm.list"></nested-list>
</body>
JavaScript
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.list = [
{ "name": "Item 1" },
{ "name": "Item 2",
"subItems": [
{ "name": " Item 2.1" }
]
},
{ "name": "Item 3",
"subItems": [
{ "name": " Item 3.1" },
{ "name": "Item 3.2",
"subItems": [
{ "name": "Item 3.2.1" },
{ "name": "Item 3.2.2" }
]
}
]
}];
}])
.component('nestedList', {
bindings: {
list: '<'
},
template: `
<div ng-repeat="item in $ctrl.list" >
<div> {{item.name}} </div>
<nested-list list="item.subItems"></nested-list>
</div>
`
});
Undoubtedly because I'm missing something obvious, the list from the app's main controller myCtrl isn't getting bound to the root component. If anyone can provide insight, I'd be grateful.
Stephen
As you are using controllerAs, you should be binding values to controller this(context) instead of binding values to $scope.
.controller('myCtrl', [function() {
var vm = this;
vm.list = [ ..];
}]);
Plunker Here
Trying to get the certain fields to display, ideally in a table (headings, rows & columns). And looking for a best way find fields in a Json feed. I tried using the controller to find the fields then pass that data to the view in the HTML.
Is there something wrong in the controller with respect to the Json? the fields are empty. Seems like nothing is passed from the controller to the view ? This is what I tried:
<!doctype html>
<html ng-app="app" >
<head>
<meta charset="utf-8">
<title>LIVE</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('DataCtrl', function ($scope, $http) {
$scope.result = {
"data": {
"transactionList": [{
"barcode": "52905819992681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "12Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}, {
"barcode": "52905819592681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "23Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}]
}
}
};
$scope.elements = $scope.result.data.transactionList.map(function (res) {
var e = {};
e.transTypeId = res.transTypeId;
e.userId = res.userId;
e.storeId = res.storeId;
return e;
});
});
</script>
</head>
<body ng-controller="DataCtrl">
<h1>Live from the JSON feed</h1>
<ul>
<li ng-repeat="e in elements">
{{ e.transTypeId}}: {{ e.userId }}, {{ e.storeId }}
</li>
</ul>
</body>
</html>
You have a extra } in your $scope.result. It should be like:
$scope.result = {
"data": {
"transactionList": [{
"barcode": "52905819992681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "12Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}, {
"barcode": "52905819592681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "23Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}]
}
};
// get rid of this};
Here is working plunkr
Perhaps a }; too many?
Automatic indentation usually makes those kinds of errors apparent.
Have you tried to use ng-model="...", it gives you the opportunity to overwrite an attribute or to show it. You can try it with
<input type="number" ng-model="someID" disabled="disabled">
*disabled if u need readOnly on that field.
and see how it works, maybe it can help you out.
regards
I may be wrong, but you are trying to read json data directly without parsing it?
MDN JSON.parse()
Also it would be nice if you upload your code on something like http://jsfiddle.net
This way people can test it out.
I have been following the Angular tutorials, and I am trying to get my JSON data to appear, yet I know I am doing something wrong, but can't figure out the proper method.
I know that somewhere in my app.js my scope is messed up.
How can I display the Family Name of each product?
Here is the layout I have:
app.js
var eloApp = angular.module('eloMicrosite', []);
eloApp.controller('homeListController', ['$scope', '$http',
function($scope, $http) {
$http.get('/Elo/eloMS.min.json')
.success(function(data) {
$scope.products = data;
});
}]);
eloApp.controller('HomeController', function(){
this.products = $scope.products;
});
HTML
<div ng-controller="HomeController as home">
{{home.products[o]["Family Name"]}}
</div>
JSON Layout
{
"products": [
{
"Family Name": "3201L",
"Type": "IDS",
"Size (inches)": 32,
"Aspect Ratio": "16:9",
"Part Number": "E415988",
"Product Description": "ET3201L-8UWA-0-MT-GY-G",
"Marketing Description": "3201L 32-inch wide LCD Monitor",
"Advance Unit Replacement": "",
"Elo Elite": "",
"Package Quantity": 1,
"Minimum Order Quantity": 1,
"List Price": 1800
},
.
.
.
],
"families": [
{
category: "Category1"
},
{
category: "Category2"
}
],
"accessories": [
{
category: "Category1"
},
{
category: "Category2"
}
]
}
You should add homeListController on your page instead of HomeController, Also need to use this instead of using $scope as you wanted to follow controllerAs syntax, 2nd controller is useless in this scenario, you could remove that from app.js.
Markup
<div ng-controller="homeListController as home">
{{home.products[0]["Family Name"]}}
</div>
Controller
eloApp.controller('homeListController', ['$http',
function($http) {
var home = this;
$http.get('/Elo/eloMS.min.json')
.success(function(data) {
home.products = data.products; //products should mapped here
});
}]);
Demo Plunkr
I'm taking tutorial in CodeSchool about angular and I try to create my own experiment in html5 and angular new version in vs2012.
I try to test angular repeat but the problem is HTML5 can't render my angular.
When I try to run my page, the repeater only show the angular statement {{item.name}}:{{item.quantity}} not the result. Why? -"show code below"
Angular script :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
application.js :
<script type="text/javascript" src="Scripts/application.js"></script>
$(function () {
var app = angular.module('zaskarCorp', []);
app.controller('kirito', function ($scope) {
$scope.items = [{
"name": "dual sword",
"quantity": 2
}, {
"name": "gun",
"quantity": 1
}, {
"name": "laser sword",
"quantity": 1
}];
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="zaskarCorp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script type="text/javascript" src="Scripts/application.js"></script>
</head>
<body data-ng-controller="kirito">
<ul>
<li data-ng-repeat="item in items">
<span>{{item.name}}:{{item.quantity}}</span>
</li>
</ul>
</body>
</html>
As you can see I add data- in my angular because I use html5. -"I hate warnings"
Your code has a number of typos and errors:
funtion instead of function
agular instead of angular
no jQuery included, but you call $(function(){...})
Here's a plunker with your code working.
Also, for future reference, if you remove .min from the angular source, it makes it easier to debug.
Please add this directive to your body tag:
data-ng-app="zaskarCorp"
Also, you have some misspellings in your javascript code.
Without using jQLite your code will look like this:
var app = angular.module('zaskarCorp', []);
app.controller('kirito', function ($scope) {
$scope.items = [
{
"name": "dual sword",
"quantity": 2
},
{
"name": "gun",
"quantity": 1
},
{
"name": "laser sword",
"quantity": 1
}];
});
Full code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="zaskarCorp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script>
var app = angular.module('zaskarCorp', []);
app.controller('kirito', function($scope) {
$scope.items = [{
"name": "dual sword",
"quantity": 2
}, {
"name": "gun",
"quantity": 1
}, {
"name": "laser sword",
"quantity": 1
}];
});
</script>
</head>
<body data-ng-controller="kirito">
<ul>
<li data-ng-repeat="item in items">
<span>{{item.name}}:{{item.quantity}}</span>
</li>
</ul>
</body>
</html>
I have a defined a basic controller which has a function called setSector (at the bottom)
function AppCtrl ($scope) {
$scope.sectors =
{
"Sector": [
{
"sectorDesc": "London and South East",
"sectorCode": "LSE",
"SectorPPM": {
"Total": "10329",
"OnTime": "9195",
"Late": "1134",
"CancelVeryLate": "206",
"PPM": {
"rag": "A",
"text": "89"
},
"RollingPPM": {
"trendInd": "-",
"rag": "R",
"text": "83"
}
}
},
{
"sectorDesc": "Long Distance",
"sectorCode": "LD",
"SectorPPM": {
"Total": "1383",
"OnTime": "1159",
"Late": "224",
"CancelVeryLate": "68",
"PPM": {
"rag": "R",
"text": "83"
},
"RollingPPM": {
"trendInd": "+",
"rag": "G",
"text": "92"
}
}
},
{
"sectorDesc": "Regional",
"sectorCode": "REG",
"SectorPPM": {
"Total": "5348",
"OnTime": "4678",
"Late": "670",
"CancelVeryLate": "196",
"PPM": {
"rag": "R",
"text": "87"
},
"RollingPPM": {
"trendInd": "=",
"rag": "R",
"text": "87"
}
}
},
{
"sectorDesc": "Scotland",
"sectorCode": "SCO",
"SectorPPM": {
"Total": "2026",
"OnTime": "1861",
"Late": "165",
"CancelVeryLate": "41",
"PPM": {
"rag": "A",
"text": "91"
},
"RollingPPM": {
"trendInd": "+",
"rag": "G",
"text": "94"
}
}
}
]
}
$scope.currentSector = null;
$scope.setSector = function (sectorCode) {
$scope.currentSector = $scope.sectors[sectorCode];
};
}
which is called from my index file.
<html ng-app>
<head>
<title>PPM Viewer</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>PPM Dashboard</h1>
<ul>
<li ng-repeat="sector in sectors.Sector">
{{sector.sectorCode}} - {{sector.sectorDesc}}
</li>
</ul>
<p>
Current sector : {{currentSector.sectorDesc}}
Current code : {{currentSector.sectorCode}}
</p>
</div>
</body>
When you click on the sectors in the UL list, the name of the clicked on sector is supposed to appear at the bottom, but for some reason the function is not passing back anything.
I am sure it is due to needing to specify the $scope.sectors.Sector somewhere in the function. but nothing I try will work. I am still quite new to angular and scopes, and think that I need to force the scope to go to a deeper level.. just not sure how
Can anyone advise how I can make the function... function! =)
Many thanks
So neater way of doing this would be to use the $index functionality of Angular. Try changing your code to:
HTML
<ul>
<li ng-repeat="sector in sectors.Sector">
{{sector.sectorCode}} - {{sector.sectorDesc}}
</li>
</ul>
JS
$scope.setSector = function (index) {
$scope.currentSector = $scope.sectors.Sector[index];
};
$index in an ng-repeat states the index of an item in an array, which you can use in the javascript to select the correct sector from your array.
http://docs.angularjs.org/api/ng.directive:ngRepeat
You're setting $scope.currentSector, instead of .sectorDesc
So either change your function or template:
Template:
Current sector : {{currentSector}}
Or function:
$scope.currentSector = {};
$scope.setSector = function (sectorCode) {
$scope.currentSector.sectorDesc = $scope.sectors[sectorCode];
};