I'm new to Angular and I'm trying to set up a simple display. I've looked through the documentation on ng-repeat and have done some of the tutorials with success every time. However, when I went to do a mock of my own I can't get anything to show from the JSON file. Even using the often found Angular "todo.json" example found everywhere I still am unable to figure this one out. I'm not sure if it has to do something with JSON or possibly nesting the ng-repeat. Can anyone guide me to seeing the light?! hehe. Thanks in advance.
So, here's the Plunker link. http://plnkr.co/edit/8rNgPHUHEe88Gpw6aM1D
HTML:
<!doctype html>
<html ng-app="App" >
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="Calendar">
<ul>
<li ng-repeat="items in events">
{{items.events}}
</li>
</ul>
</body>
</html>
JS:
var App = angular.module('App', []);
App.controller('Calendar', function($scope, $http) {
$http.get('todos.json')
.then(function(res){
$scope.events = res.data;
});
});
JSON:
[
{
"events": [
{
"EventTitle": {
"href": "http://example.com/event1",
"text": "HEADLINE TEXT FOR EVENT 1"
},
"HeadlineImage": {
"href": "http://example.com/event1",
"src": "http://example.com/Image.jpg",
"text": "CAPTION TEXT FOR IMAGE "
},
"Eventdescription": "Lorem Loreem Loreeem Ipsum Ipsuum Ipsuuum ..."
}
]
}
]
Your data structure is pretty weird. Check an updated working plunker: http://plnkr.co/edit/SXHjqxjZ2bgJSs327jz4?p=preview
You can use <pre>{{ events | json }}</pre> in your view to easily inspect/debug objects.
If you must keep this structure, then you need to do something like this
<ul>
<li ng-repeat="items in events">
{{items.EventTitle.text}}</>
</li>
</ul>
controller:
App.controller('Calendar', function($scope, $http) {
$http.get('todos.json')
.then(function(res){
$scope.events = res.data[0].events;
});
});
Here's a forked plunker
Edit:
The revised plunker, using the above changes. The scope var should be res.data.events
Updating after a new json structure provided:
Here's a working example with actual json data
Related
I am just getting started with AngularJs and I'm making a simple site navigation app that queries an API for values. Currently I'm trying to make an accordion sidebar applet (is that the correct term for a child app of a parent app?) that loads the primary sections, then lists the categories within when the section headers are clicked.
Well I got it to work without throwing an error (yay!) but if I apply the css, then the accordion becomes timid and bashful, only revealing whats inside for less than a second before hiding the contents again. And a lot of times I have to click on the header twice before something happens.
I'm guessing its a problem with Bootstrap because as I mentioned, It's not like that if I remove the css and just have raw html output. Here's my code:
index.html
<!DOCTYPE html>
<html ng-app="navApp" ng-strict-di>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="~/Areas/AngularTest/scripts/app.js"></script>
</head>
<body ng-cloak>
<div ng-controller="menuController">
<div ng-include src="'templates/sidebar.html'"></div>
</div>
</body>
</html>
Using Grunt to combine my js files into one app.js so here are the separate pieces.
scripts/controllers/navController.js
var navApp = angular.module('navApp', [
'ngResource',
'ui.bootstrap',
'ngAnimate'
]);
navApp.controller('menuController', [
'$scope',
'navSectionList',
'navGetCategories',
function ($scope, navSectionList, navGetCategories) {
$scope.navSectionList = navSectionList.query();
$scope.getSectionID = function (event) {
var sectionID = event.currentTarget.attributes["data-id"].value;
$scope.sectionID = sectionID;
$scope.navGetCategories = navGetCategories
.getResource(sectionID)
.query();
};
}
],
function ($scope) {
$scope.oneAtATime = true;
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
}
);
scripts/services/navService.js
navApp.factory('navSectionList', [
'$resource', function ($resource) {
return $resource('/api/navigation/section/list', {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}
]);
navApp.factory('navGetCategories', ['$resource', function ($resource) {
var service = {
getResource: function (sectionID) {
return $resource('/api/navigation/category/' + sectionID, {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}
};
return service;
}]);
templates/sidebar.html
<div class="sidebar">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading="Products" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
<ul>
<li>New Arrivals</li>
<li>On Sale</li>
</ul>
</div>
<div uib-accordion-group class="panel-default" heading="{{section.name}}" ng-click="getSectionID($event)" ng-repeat="section in navSectionList" data-id="{{section.id}}">
<ul ng-repeat="categories in navGetCategories">
<li ng-show="categories.pid == section.id">
{{categories.name}}
</li>
</ul>
</div>
</uib-accordion>
</div>
I don't really understand AngularJs well enough at this point to figure out what is going on. What do you think I should do to fix this?
Oh God I did it again. So it turns out that you gotta be careful about which version of bootstrap.css you are using. If its one that Angular-UI does not support, you'll get all that funny business going on.
Replacing the css with the following helped fix this problem.
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
Version 4 was too advanced for ui.bootstrap.
Currently new & working on a web app using AngularJS, using Nginx serv.
I want to select some precise values to put them in a html table.
I kept searching and never find an adequate solution.
Do you have an idea on how can I make this work?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('variables.json').success(function(data) {
$scope.variables = data;
});
});
</script>
<link rel="stylesheet" type="text/css" href="../app/css/style.css">
</head>
<body ng-app="app" ng-controller="myCtrl" ng-init="variables">
<ul>
<li ng-repeat="var in variables">
{{var.b}}
{{var.a}}
</li>
</ul>
</body>
</html>
JSON File:
{
"a":6084.0,
"b":979
}
I just put an example of the JSON file. My purpose is to display for example just the b or a value.
You can read as (key,value) in $variables and display value.
<ul>
<li ng-repeat="(key,value) in variables">
{{key}}:{{value}}
</li>
</ul>
Demo link
https://plnkr.co/edit/nTUOvyMHcDRdtSzyecLw?p=preview
ng-repeat only works if the data in your json will be Array Since the data is the Object it will not find any element so it won't showing values .
change the Json as below:
[{
"a":6084.0,
"b":979
}]
The directive ngRepeat works with objects if the following syntax is used:
<div ng-repeat="(key, value) in myObj"> ... </div>
15.html
<html>
<meta charset="utf-8">
<title>Angularjs htttp services</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
</script>
<script src="controller15.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="people">
<ul>
<h2> names and ages of the programmers</h2>
<li ng-repeat="person in persons">
{{ person.Name +':' +person.Age}}
</li>
</ul>
</div>
</body>
</html>
controller15.js
var app=angular.module('mainApp',[]);
app.controller('people', function($scope,$http)
{
$http.get('database.json')
.success(function(response)
{
$scope.person=response.records;
});
});
database.json where I stored the info:
{
"records":[
{
"Name":"mehul","Age":"13"
},
{
"Name":"ashok","Age":"23"
},
{
"Name":"rajesh","Age":"44"
}
]
}
I have attached all of the code, please review my code. I am a beginner in angularjs; it would be always good if you suggest me a particular material or web site to go through.
First: Do not use a minified version of angular to see described errors in
your browser console. then tel me what errors do you see!
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js">
I have created a simple demoapp and it seems to work perfectly file.
The demoapp uses restangular for the get request.
/* the emp.json file from where the data is coming*/
[
{"id":1,
"subject":"#aashima"
},
{"id":2,
"subject":"#aansh"
},
{"id":3,
"subject":"#artle"
},
{"id":4,
"subject":"#harish"
}
]
<!doctype html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Restangular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
</head>
<body>
<div ng-controller="IndexCtrl as omega" ng-cloak>
<ul>
<li ng-repeat="result in omega.people">
<span ng-bind="result.subject"></span>
</li>
</ul>
<span ng-bind="omega.hero"></span>
</div>
<script>
var app = angular.module('app', ['restangular'])
.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl("js");
});
app.controller('IndexCtrl', function( Restangular) {
var self=this;
Restangular.all('emp.json').getList().then(function(result) {
self.people = result;
});
});
</script>
</body>
</html>
The app works perfectly but the problem in here is that the json response from my backend will be something like this
{"user":[
{"id":1,
"subject":"#aashima"
},
{"id":2,
"subject":"#aansh"
},
{"id":3,
"subject":"#artle"
}
]
}`
I tired to integrate the code with this json response, does Restangular supports this json and if it does do I need a different approach !!!
I'm trying to ng-repeat over 'cols' as a starting point. But I'm getting an error when trying to consume this JSON
{
"cols":["id","name","type"],
"rows":[
["284","JAMES DEAN","Employee"],
["243","Brian J Adamms","Employee"],
["237","Test Account","Brokerage Account"],
["241","Robert Borkman","guest"]
]
}
The error appears to be in the angularJS file, but Im sure the problem is elsewhere.
Error: a.push is not a function
W#http://127.0.0.1/js/lib/angular.min.js:10
g#http://127.0.0.1/js/lib/angular-resource.min.js:7
u/</g[b]/</<#http://127.0.0.1/js/lib/angular-resource.min.js:8
o#http://127.0.0.1/js/lib/angular.min.js:7
u/</g[b]/<#http://127.0.0.1/js/lib/angular-resource.min.js:8
Rc/e/g.promise.then/i#http://127.0.0.1/js/lib/angular.min.js:79
Rc/e/g.promise.then/i#http://127.0.0.1/js/lib/angular.min.js:79
Rc/f/<.then/<#http://127.0.0.1/js/lib/angular.min.js:79
e.prototype.$eval#http://127.0.0.1/js/lib/angular.min.js:91
e.prototype.$digest#http://127.0.0.1/js/lib/angular.min.js:89
e.prototype.$apply#http://127.0.0.1/js/lib/angular.min.js:91
f#http://127.0.0.1/js/lib/angular.min.js:100
B#http://127.0.0.1/js/lib/angular.min.js:103
ad/</p.onreadystatechange#http://127.0.0.1/js/lib/angular.min.js:105
Here is a "plunker" example - run console - you'll see the same error I'm getting - and the JSON shows as an empty array.
http://plnkr.co/edit/QgNkvsOIVzrpUp5pP02p?p=preview
Thank you all for help
I don't think the error is in angular source, and it will handle that JSON just fine: http://plnkr.co/edit/knJQ0S?p=preview
Im able to get what problem you are facing see the below code
<html ng-app="myapp" >
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="Scripts/Angular.js"></script>
</head>
<body >
<div ng-controller="TestCtrl" >
<div ng-repeat="data in data.cols">
{{data}}
</div>
</div>
<script>
var myapp = angular.module('myapp', []);
function TestCtrl($scope, $http,$timeout) {
$scope.data = {
"cols": ["id", "name", "type"],
"rows": [
["284", "JAMES DEAN", "Employee"],
["243", "Brian J Adamms", "Employee"],
["237", "Test Account", "Brokerage Account"],
["241", "Robert Borkman", "guest"]
]
};
}
</script>
</body>
</html>