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>
Related
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
I was wondering how to print ids of items inside an array.
I have and array called localData, with a list of objects inside. Every object is a mini array of 3 strings.
In my ng-repeat when i set {{items in array}} it prints the content and not the id. How can i print only ids?
localData = {"-KRFLxEmRoS7M9gKDXVE":{"postBody":"1) remove lag 2) add animations",
"postTitle":"Top Title $$$","userName":"[Admin]"},
"-KRFM6Jm2wQemtl878Ur":"postBody":"Annanana","postTitle":"Ananaj",
"userName":"[Admin]"},"-KRFM7rcEe5K5PXkb29v":{"postBody":"Abshhsua","postTitle":"Ababjsjs","userName":"[Admin]"},
"-KRFM96LtmaXRTnUXJoV":{"postBody":"Gabshsysus","postTitle":"Bshshshshs","userName":"[Admin]"},
"-KRFMAnqecr85xUcOCuw":{"postBody":"Sbsbshshsusudu","postTitle":"Ushhshshs","userName":"[Admin]"},
"-KRFMCkO3JdhA_0MlwwM":{"postBody":"Hshshshs","postTitle":"Sjjsjsjs","userName":"[Admin]"},
"-KRFMLtDJsO0fGYA9JEO":{"postBody":"Fake",
"postTitle":"OMG EPICCCCCCOOOO","userName":"[Admin]"},
"-KRFMQBwIbK6s5lVMlbW":{"postBody":"Asdrobololo","postTitle":"Asdrubale","userName":"[Admin]"},
"-KRI7TVGM0U5emvwD0i7":{"postBody":"Htrsdvgh","postTitle":"Uutfcbuj","userName":"[Admin]"},"-KRITPhL8m-qCCO9y4vY":
{"postBody":"Iiiiiiiwwwwww","postTitle":"Jjjdhd","userName":"[Admin]"}}
angular.module('myapp', [])
.controller('PostsCtrl', function($scope) {
var object={"nm_questionario":{"isEmpty":"MSGE1 - Nome do Questionário"},"ds_questionario":{"isEmpty":"MSGE1 - Descrição do Questionário"},"dt_inicio_vigencia":{"isEmpty":"MSGE1 - Data de Vigência"}};
$scope.items = [];
angular.forEach(object, function (value, key) {
$scope.items.push(key);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="PostsCtrl">
<div ng-repeat="item in items">
{{item}}
</div>
</div>
Store the local data like below to get the id easily. Try this below.
angular.module('myapp', [])
.controller('PostsCtrl', function($scope) {
var accountservice=[{"id":"1","title":"Savings Account","services":[{"types":"ATM card request"},{"types":"loan request"}]},
{"id":"2","title":"Current Account","services":[{"types":"cheque book request"},{"types":"ATM card request"}]},
{"id":"3","title":"Demat Account","services":[{"types":"loan request"},{"types":"ATM card request"}]}];
$scope.accountservices = accountservice;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="PostsCtrl">
<div ng-repeat="(key,value) in accountservices">
<p>{{value.id}}</p>
<ul><li ng-repeat="account in value.services">{{account.types}}</li></ul>
</div>
</div>
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:
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 tring to repeat an array in the html
html:
<div class="personWrapper" ng-repeat="message in messages">
<p>{{message}}</p>
</div>
js:
var app = angular.module('matcherApp', [ "ngRoute", "ngStorage" ]);
app.config(function($routeProvider) {
$routeProvider.when('/Messages', {
templateUrl : 'menu/messages.php',
controller : 'messagesController'
})
});
app.controller('messagesController', function($scope, $localStorage) {
console.log("im in messages page!!!");
var messagesUsers = [];
$.post("db.php", {
'messagesWindow' : "messagesWindow",
'myProfileId' : JSON.parse(localStorage.getItem("myProfileDetails")).id
}, function(data) {
data = $.parseJSON(data);
angular.forEach(data, function(key, value) {
angular.forEach(key, function(key2, value2) {
messagesUsers.push(key2.Name);
});
});
console.log(messagesUsers);
$scope.messages = messagesUsers;
}).fail(function() {
alert("error bringing messages data");
});
});
the console.log show me:
im in messages page!!!
["a","b"]
that works with all different controllers in the same app.
its not showing me on the dom any loop.
what am i doing wrong? thanks.
Works for me! Look
var app = angular.module('MessagesApp', []);
app.controller('MessagesController', function($scope) {
$scope.messages = ["a", "b"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MessagesApp" ng-controller="MessagesController">
<div class="personWrapper" ng-repeat="message in messages">
<p>{{message}}</p>
</div>
</div>
JS Code looks like below:
var app = angular.module('modelapp', []);
app.controller('ctrl', function($scope) {
$scope.emplist = ["john", "marry", "jaison"];
});
HTML Code:
<div ng-app="modelapp" ng-controller="ctrl">
<div ng-repeat="data in emplist">
<p>{{data}}</p>
</div>
</div>
It will load entire list, You can add class for div as per design, Even you can track index number also by using $index directive.