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>
Related
I am trying to fetch data in AngularJS using Http Get request. I have created a separate controller.js file where I have implemented Http get service.
I have created a database.json file within the app.When I am trying to run my app on http-server, I am unable to fetch data from the data file created.
I am getting the following error in my console.
index.html:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>AngularJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!--Route Guard -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Controller.js -->
<script src="controller.js"></script>
<body ng-app="myApp">
<div ng-controller="datactrl">
<ul>
<h4>Name And Age Of The persons</h4>
<li ng-repeat="person in persons">
{{ person.Name+ ':' + person.Age }}
</li>
</ul>
</div>
</body>
</html>
controller.js:
var app = angular.module("myApp", [ ]);
app.controller('datactrl', function($scope, $http) {
$http.get('http://127.0.0.1/AngularJS/HttpGet/database.json')
.then(function(response) {
$scope.persons = response.records;
});
});
database.json:
{
"records": [
{
"Name" : "asd",
"Age" : "20"
},
{
"Name" : "asd",
"Age" : "20"
},
{
"Name" : "asd",
"Age" : "20"
}
]
}
Can anybody please help me to resolve this issue..?
I’ve been having a problem with a scope property in my controller – a simple test title and an array of strings used with ng repeat. They are not being displayed on the screen when served up from our rather complex server. Note that with ng repeat it seems to know the size of the array, just doesn’t display it, see first example below.
They are being displayed correctly when served up from apps like codepen or plunker. It also works when I run it on localhost using a simple server. See working version in 2nd example below.
I know responders will protest that they cannot help without more specific information about our server - but I'm guess I'm asking specifically:
Have you seen a case where ng repeat seems to know the size of the array, but just doesn’t display the items in the array - if so what caused it?
What types of issues with our server do you think could cause this? What should I be looking for..
Non working example from our server
Working example from codepen or simple server on localhost
var app = angular.module('testApp', []);
angular.module('testApp').controller('AuthorizePageCtrl', ['$scope', function ($scope) {
'use strict';
$scope.mytesttitle = "this is a test";
$scope.myitems = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro_comercial Moctezuma"
];
}]);
<!DOCTYPE html>
<html data-ng-app="testApp">
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="/js/controllers/AuthorizePageCtrl.js"></script>
</head>
<body>
<div id="consent" ng-app="testApp">
<div ng-controller="AuthorizePageCtrl">
<h3>My test title should appear->{{mytesttitle}}</h3>
<div>
<ul>
<li ng-repeat="myitem in myitems">"myitem in myitems should appear->"{{myitem}}</li>
</ul>
</div>
<div ng-repeat="myitem in myitems">
<h2>"myitem in myitems should appear->"{{myitem}}</h2>
</div>
</div>
</div>
</body>
</html>
so first data-ng-app and ng-app they are the same. and you only need one. and for the JS i may this changes and it works for me.
Angular part:
var app = angular.module('app', []);
app.controller('AuthorizePageCtrl', ['$scope', function ($scope) {
$scope.mytesttitle = "this is a test";
$scope.myitems = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro_comercial Moctezuma"
];
}]);
HTML part:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="//code.angularjs.org/1.6.6/angular.js" ></script>
<script src="app.js" ></script>
</head>
<body>
<div id="consent" >
<div ng-controller="AuthorizePageCtrl">
<h3>My test title should appear->{{mytesttitle}}</h3>
<div>
<ul>
<li ng-repeat="myitem in myitems">"myitem in myitems
should appear->"{{myitem}}</li>
</ul>
</div>
<div ng-repeat="myitem in myitems">
<h2>"myitem in myitems should appear->"{{myitem}}</h2>
</div>
</div>
</div>
</body>
</html>`enter code here`
So it turns out web site uses swig which conflicts with angularjs.
It uses swig for template var which was conflicting with angularjs' use of {{}}, preventing this very simple example from working. Thanks for responses ....
See this other fix for swig/angular conflict if you don't want to use ng-bind
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">
can anyone please tell me what is wrong in this code? I am getting {{author.name}} as output on my browser. Browser error says angular is not defined and failed to instantiate the module AuthorApp
<!DOCTYPE html>
<html ng-app="AuthorApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Authors.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
</head>
<body >
<div ng-controller="MyController">
<ul>
<li ng-repeat="author in authors">
{{author.name}}
</li>
</ul>
</div>
</body>
</html>
Author.js code
var AuthorApp = angular.module('AuthorApp', []);
AuthorApp.controller("MyController", function ($scope) {
$scope.authors = [
{ 'name': 'Xyz' },
{ 'name': 'abc' }
];
});
authors.js will be executed first and then angular will be loaded. Change the order of your scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js">
<script src="Authors.js"></script>
</head>
The previous answer was correct, but I can't comment yet. I put your code in a plunk with the script order corrected and it works fine:
http://plnkr.co/edit/kIb0y2?p=preview
Do you have the path to the Author.js file correct? It needs to be in the same directory for referencing it without any other path info to work. Test to see if it is loading by putting an alert at the top of the file. If you don't get the alert, tinker with the path in the src attribute for the script until you get it.
//Author.js code
alert("Author.js file loaded!");
var AuthorApp = angular.module('AuthorApp', []);
AuthorApp.controller("MyController", function ($scope) {
$scope.authors = [
{ 'name': 'Xyz' },
{ 'name': 'abc' }
];
});
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