This is a simple test to fetch json file from third party server, but no success. I did test with this json (https://jsonplaceholder.typicode.com/posts) and is working. Any body can help me? Thanks in advance.
var app = angular.module("viewJSON",[]);
app.controller("viewCtrl",function Hello($scope, $http) {
$http.get('http://media.astropublications.com.my/api/drebar_landing.json').
success(function(data) {
$scope.testJer = data;
$scope.keys = Object.keys($scope.testJer[0]);
});
});
section {height:180px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="viewJSON" ng-controller="viewCtrl">
<div ng-repeat="item in testJer | filter:search">
<section class="col-md-3">
<h4>{{item.Title}}</h4>
<p>{{item.Description}}</p>
</section>
</div>
</div>
You need to access the ArticleObject array from the response ,
app.controller("viewCtrl", function Hello($scope, $http) {
$http.get('http://media.astropublications.com.my/api/drebar_landing.json').
success(function(data) {
$scope.testJer = data.ArticleObject;
});
});
PLUNKER DEMO
Related
I have simple Scala Play Framework and Angular application. I tried to render JSON data on play's "xxx.scala.html" template but don't know what is the problem it is not rendering as expeted.
#main("Welcome to Play") {
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script>
<script>
app.controller('NamesCtrl', function($scope) {
// get names using AngularJS AJAX API
$http.get('/getNames').success(function(data){
$scope.names = data;
});
});
</script>
<div ng-app="app" ng-contoller="NamesCtrl">
<ul>
<li ng-repeat=" name in names">{{name}}</li>
</ul>
</div>
}
My route entry
GET /getNames controllers.HomeController.getNames
Scala Controller:
def getNames = Action {
val names = List("Bob","Mike","John")
Ok(Json.toJson(names)).as(JSON)
}
When I am calling my page using url
http://localhost:9000/getNames
I was getting response on page as below,
["Bob","Mike","John"]
Please can you explain what am I doing wrong here?
Thanks !!
There are some problems in the code. The correct one is this:
#main("Welcome to Play") {
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.19/angular.min.js"></script>
<div ng-app="myApp" ng-controller="NamesCtrl">
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('NamesCtrl', function($scope, $http) {
$http.get('/getNames').success(function(data){
console.log(data);
$scope.names = data;
});
});
</script>
}
What has changed:
AngularJS 1.3.19 instead of 1.2.10
AngularJS module - which is referenced in the div
injected the $http service in the controller
your ng was wrong - it should be ng-controller instead of ng-contoller (a typo I guess)
The result is what you would expect:
The ng-repeat is only showing the first 2 elements of the array (there are 25). What is wrong?
I'm a newbie with Angular. I am lost with the cause of it, no errors in console. Any suggestions?
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts" track by $index>
<p>{{posts.data.children[$index].data.ups}}</p>
<p>{{posts.data.children[$index].data.title}}</p>
</li>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
var vm = this;
vm.mydata = [];
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
vm.mydata = response.data;
$scope.posts = vm.mydata;
//console.log(vm.mydata);
//console.table(vm.mydata);
}, function(response) {
$scope.posts = "Something went wrong";
});
});
</script>
Final code corrected. This is a very basic script to manage the extraction of posts in the Reddit's front page and displayed it in descending order by upvotes. Thank you all for your help! See code below:
<!DOCTYPE html>
<html>
<!-- _________________________________________________________-->
<!-- Framework: AngularJs -->
<!-- Author: Vanessa Torres -->
<!-- Date: March 30, 2016 -->
<!-- Description: Reddit's Front page posts extraction -->
<!-- _________________________________________________________-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts.data.children | orderBy:'-data.ups'" track by $index>
<p>{{post.data.ups}}</p>
<p>{{post.data.title}}</p>
<p>{{post.data.url}}</p>
</li>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.posts = [];
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
$scope.posts = response.data;
console.table(vm.mydata);
//
}, function(response) {
$scope.posts = "Something went wrong";
});
});
</script>
</body>
</html>
Because you are iterating over posts which have basically two properties only ups and title
Use:
<li ng-repeat="post in posts.data.children" track by $index>
<p>{{post.data.ups}}</p>
<p>{{post.title}}</p>
</li>
The HTML should be as given below:
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts track by $index">
<p>{{post.data.children.data.ups}}</p>
<p>{{post.data.children.data.title}}</p>
</li>
</div>
This iterates inside the posts array and the value of each post keys (ups and title) is displayed. Please check the documentation for ng-repeat (https://docs.angularjs.org/api/ng/directive/ngRepeat) for the correct format of using track by $index.
As a basic coding standard, you need not use var vm = this; along with $scope. If you are using the vm variable, then inside routes (or inside directives), where you associate each route (or directive) with a controller, you can add an extra field controllerAs for aliasing the controller. Use this alias name in the HTML code to access the vm variable. In your example, you can change it as given below:
<div ng-app="myApp" id="posts" ng-controller="myCtrl as postsCtrl">
<li ng-repeat="post in postsCtrl.posts track by $index">
<p>{{post.data.children.data.ups}}</p>
<p>{{post.data.children.data.title}}</p>
</li>
</div>
And in the scripts tag:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($http) {
var vm = this;
vm.posts = '';
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
vm.posts = response.data;
}, function(response) {
vm.posts = 'Something went wrong';
});
});
</script>
I use $http.get php data in ng-repeat is correct,but I have a problem when ng-click to add push php second page data in ng-repeat ,but it not work .
Any suggestions ? thanks.
I did not write very clear , i mean when click button , i want get ats01.php?page=2 data, add ats01.php?page=1 data in li ng-repeat, i don't want get page2 data replace page1 data,just like jquery $('#ul01').append (html) method; thank your answer it .
script.js
var scotchApp = angular.module('scotchApp');
var myurl="http://192.168.5.9/"
scotchApp.controller('mainController', function($scope, $http) {
$http.get(myurl+"php/ats01.php?page=1")
.success(function (response) {$scope.names = response.records;});
$scope.myur=myurl;
$scope.add = function() {
$http.get(myurl+"php/ats01.php?page=2")
.success(function (response) {
$scope.names.push(response.records);
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html >
<head >
<script src="anjs/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="scotchApp" >
<div ng-controller="mainController">
<ul >
<li ng-repeat="x in names track by $index">
<p > <small>{{x.TA002}} {{x.TA003}} {{x.TA004}} {{x.TA012}}</small> </p>
</li>
</ul>
<p> <button ng-click="add()">Add</button> </p>
</div>
</body>
</html>
For first time you are assigning record in the list
$scope.names = response.records;
But in click you are pushing same data instead of assigning
$scope.names.push(response.records);
If you push instead of assign it'll create a index and push whole data into that index.
Convert this
$scope.names.push(response.records);
to this
$scope.names=$scope.names.concat(response.records);
I'm implementing AngularJS with Laravel and having some issues. My codes:
Route:
Route::get('/', function () {
return view('angular');
});
Route::get('/test', function () {
return User::all();
});
HTML/JS (test.blade.php):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="userCtrl">
<ul>
<li ng-repeat="x in user">
#{{ x.email + ', ' + x.name }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('userCtrl', function($scope, $http) {
$http.get("/test")
.success(function(response) {
$scope.user = response.data;
console.log(response);
});
});
</script>
Whenever I run this I get a blank page but in my console:
Am I missing something here? Thank you.
check in console if it is returned valid in success: console.log(data);.
If yes try: $scope.user = angular.fromJson(data);
I have a REST Service written in Java which returns an array of data in JSON like this:
[{"key":"London","value":"51.30"}]
Now I'm trying code an AngularJS REST clients using the AJS documentation. So far I've been able to invoke the REST service (I can see from the server logs) yet nothing is printed in the HTML page.
Here is my code:
<!doctype html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
<script language="javascript">
angular.module('myApp',['ngResource']);
function Ctrl($scope,$resource) {
var Geonames = $resource(
'http://localhost:8080/rest-application/rest/json', {
}, {
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
}
);
$scope.objs = Geonames.query();
};
Ctrl.$inject = ['$scope','$resource'];
</script>
</head>
<body >
<div ng-app="myApp">
<div ng-controller="Ctrl">
{{objs.key}} - {{objs.value}}
</div>
</div>
</body>
</html>
I have tried this example with several small variants taken from tutorials yet it is still not working. Any help ?
Thanks!
What you get back from query() is an array so you should loop over it with ng-repeat
<div ng-app="myApp">
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="obj in objs">{{obj.key}} - {{obj.value}}</li>
</ul>
</div>
</div>
First of all, let's organize your code a bit:
var app = angular.module('myApp',['ngResource']);
// Controllers get their dependencies injected, as long as you don't minify your code and lose variable names.
app.controller('Ctrl', function($scope, $resource) {
$scope.objs = []; // We initialize the variable for the view not to break.
// For the query example, you don't need to define the method explicitly, it is already defined for you.
var Geonames = $resource('http://localhost:8080/rest-application/rest/json');
// Resource methods use promises, read more about them here: http://docs.angularjs.org/api/ng/service/$q
Geonames.query({}, function(arrayResult) {
$scope.objs = arrayResult;
});
});
You have to adjust your html code with an ng-repeat directive to handle each item of your array:
<body>
<div ng-app="myApp">
<div ng-controller="Ctrl">
<!-- object is a reference for each item in the $scope.objs array-->
<span ng-repeat="object in objs">
{{object.key}} - {{object.value}}
</span>
</div>
</div>
</body>