I have a json file "imgae A" which feeds the controller inside-which a console.dir(data) outputs "image D".
The bindiing in the code below is failing to produce the item.name and just outputs blank line in its place "image B".
However, if I change {{item.name}} to just {{item}}, I get "image C"
Is my json wrong or the binding expression is wrong? Thanks
<section>
<ul>
<li ng-repeat="item in menuItems">
<br/>
<p>dummy</p>
{{item.name}}
</li>
</ul>
</section>
Here is the controller as requested in the comments:
var appControllers = angular.module('appControllers', []);
appControllers.controller ('MainMenuCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('js/mainMenu.json').then (function (data){
$scope.menuItems = data;
console.dir(data);
},
function(error){
alert("http error");
});
}]);
menuItems is not the data returned in the http response. It is the http response itself, and you're iterating on its fields (data, status, statusText, etc.)
You probably have something like
$http.get(...).then(function(response) {
$scope.menuItems = response;
});
instead of
$http.get(...).then(function(response) {
$scope.menuItems = response.data;
});
Related
Problem: I have a list of data that has an ID in each record which I use to make an API call to get more info about this particular item. Problem is - ng-repeat already is looping through my data. How do I pass a different API call's response for each ng-repeat action?
Code:
View:
<div ng-repeat="activity in userActivity">
<div class="row">
<div class="col-md-10 col-md-offset-2">
{[ user.fullname ]} has {[ activity.action ]} to: <a href="#"> {[ post.post ]}<br>
</div>
</div>
Angular Controller:
profileApp.controller('mainController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams){
$scope.user = [];
$scope.userActivity = [];
$scope.post = [];
$http.get('/api/user', {params: { id: $routeParams.id }})
.success(function(res){
$scope.user = res.user;
$scope.userActivity = res.user.activity;
$http.get('/api/post', {params: { postID: $scope.userActivity[0].post }})
.success(function(res){
$scope.post = res.post;
})
.error(function(data, status){
console.log(data);
});
})
.error(function(data, status){
console.log(data);
});
}]);
The /api/user's activity from the response looks like this:
"activity": [
{
"post": "123456781",
"action": "agreed"
},
{
"post": "123456782",
"action": "disagreed"
}
]
So can someone please help and point me to the right direction as to how to get the data populated together with the ng-view? Currently, it is just showing the post.post for 123456781 which makes sense but how do I pass the variables to the ng-repeat for such a case?
Thanks in advance
res.user.activity is an array,
so first loop through the $scope.userActivity array an then make an api call for each value in array and then, update the $scope.userActivity array with a new key as post_obj which is the response you will be using in the view.
Then, your controller should be changed to,
profileApp.controller('mainController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams){
$scope.user = [];
$scope.userActivity = [];
$scope.post = [];
$http.get('/api/user', {params: { id: $routeParams.id }})
.success(function(res){
$scope.user = res.user;
$scope.userActivity = res.user.activity;
for(var i=0 ; i < $scope.userActivity.length ; i++)
{
$http.get('/api/post', {params: { postID: $scope.userActivity[i].post }})
.success(function(res){
$scope.userActivity[i].post_obj = res.post;
})
.error(function(data, status){
console.log(data);
});
}
})
.error(function(data, status){
console.log(data);
});
}]);
Then, your view should change to,
<div ng-repeat="activity in userActivity">
<div class="row">
<div class="col-md-10 col-md-offset-2">
{{ user.fullname }} has {{ activity.action }} to: <a href="#"> {{ activity.post_obj }}<br>
</div>
</div
</div>
This userActivity array now contain the post_obj which we got in response corresponding to each post
ng-repeat="activity in userActivity" ng-click="myFunction(activity)"
Create myFunction in controller, which gets only clicked activity.
Iam newbie in angularjs.How to display the json in html using angularjs.Below is the code
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope, $http) {
$http.get("http://localhost:8080/xyz").then(function (response) {
});
});
Reponse is :
[
{
"city": "animal"
},
{
"city": "bird"
}
]
In your controller you should assign your json to a scope:
app.controller('myctrl', function($scope, $http) {
$scope.myArray = [];
$http.get("http://localhost:8080/xyz").then(function (response) {
$scope.myArray = response;
});
});
Then in your view, you can do something like:
<div ng-controller="myctrl">
<ul ng-repeat="obj in myArray">
<li>{{obj.city}}</li>
</ul>
</div>
use ng-repeat like this.
<div ng-repeat="t in test">
<span>{{t.city}}</span>
</div>
plunker here
Use the following code this might help you.
myArray = JSON.parse(response);
for ( var index in myArray ) {
var singleObject = myArray[index];
var keys = Object.keys[singleObject];
for ( var j in keys ) {
console.log("Value of key"+j+"is"+keys[j]+"in Object"+index);
}
}
Here response is a string value.
Try this
Where Records is like this..
{"records":[{"ID":"235","user_id":"2","project_id":"186","project_cid":"2900669120142632939","imagePath":"media/pano/sv_02a29.jpg","ImageName":"1.jpg"},{"ID":"236","user_id":"2","project_id":"186","project_cid":"2900669120142632939","imagePath":"media/pano/sv_f0f59.jpg","ImageName":"253.jpg"},{"ID":"239","user_id":"2","project_id":"186","project_cid":"1997319193267363957","imagePath":"media/pano/sv_6536f.jpg","ImageName":"PANOCLOUD_meta.jpg"},{"ID":"240","user_id":"2","project_id":"186","project_cid":"6736594884768838469","imagePath":"media/pano/sv_898ca.jpg","ImageName":"Boscolo Hotel Budapest.jpg"}]}
$http.get("moderatorData.php").then(function (response) {
$scope.panoramas = response.data.records;
});
Then print using like this
<li class="align" ng-repeat="pano in panoramas>
<img ng-src="{{pano.imagePath}}" style="height: 90px;" />
</li>
I'm programming for a college assignment and I've got no idea what I did wrong, so looking for pointers here.
So I'm trying to access events from a database and display them as thumbnails. Where am I going wrong?
HTML Code:
<div class="col-sm-6 col-md-3" ng-repeat="event in EventCtrl.events" ng-controller="EventController as EventCtrl">
<div class="thumbnail tile tile-medium">
<a href="#" data-toggle="modal" data-target="#view-event-modal">
<img id = "eventImg" src="/img/sports.png" alt="Sports">
</a>
</div>
Angular Controller:
angular.module('EventCtrl', []).controller('EventController', function($http) {
$http.get("/events")
.then(function(response) {
this.events = {}
this.events = response.data;
});
});
Node function:
app.get('/events', function(req, res){
eventData = Event.find({}).toArray();
res.render('events', eventData);
});
Your controller should manipulate the $scope, and your view should interact with the scope.
Why don't try something like that
angular.module('EventCtrl', []).controller('EventController', function($scope, $http) {
$http.get("/events").then(function(response) {
$scope.events = response.data;
});
});
I am working with Ionic and the api of The Movie Database. I wrote a service to make my http request which comes back all good. I get all my outputs in the console.log but for some reason I am still not able to show the data in the view. So I was wondering if I am doing it wrong when it comes to 2 way databinding
Code of my service:
angular.module('starter.services', [])
.service('HotMoviesService', function($http, $q){
var final_url = "https://api.themoviedb.org/3/movie/popular?api_key=XXXX";
var self = {
'hotMovies' : [],
'loadHotMovies' : function() {
var d = $q.defer();
$http.get(final_url)
.success(function success (data){
console.log(data);
self.hotMovies = data.results;
d.resolve('The promise has been fulfilled');
})
.error(function error (msg){
console.error("There was an error retrieving the data " , msg);
d.reject("The promise was not fulfilled");
});
return d.promise;
}
};
return self;
});
My controller.js code:
angular.module('starter.controllers', ['ionic.contrib.ui.hscrollcards', 'starter.services'])
.controller('StartCtrl', function($scope, $http, HotMoviesService) {
$scope.hotmovies = [];
HotMoviesService.loadHotMovies().then(function success (data){
console.log(data);
$scope.hotmovies = HotMoviesService.hotmovies;
},
function error (data){
console.log(data)
});
})
My html code:
<ion-view view-title="The Movie Bank">
<ion-content class="background">
<h1 class="padding titleStart">Welcome to The Movie Bank</h1>
<div class="logo"></div>
<!-- HOT -->
<a class="customHref" href="#/app/hot">
<h1 class="padding customH1">Hot</h1>
</a>
<hscroller>
<ion-scroll direction="x" scrollbar-x="false">
<hcard ng-repeat="hotmovie in hotmovies">
<a href="#/app/hot/{{hotmovie.id}}">
<img ng-src="http://image.tmdb.org/t/p/w92/{{hotmovie.poster_path}}" >
</a>
</hcard>
</ion-scroll>
</hscroller>
</ion-content>
</ion-view>
Here is a screenshot of my console, as you can see everything works fine:
You need hotMovies, note the "m" case:
$scope.hotmovies = HotMoviesService.hotMovies;
I'm getting some problem getting the results from my api server with angularjs.
This is my code:
home.html (view)
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
Orders!
</div>
<ul>
<li ng-repeat="order in orders">{{order}}</li>
</ul>
main.js (controller)
app.controller('mainController', function($scope, $http) {
$scope.message = 'Everyone come and see how good I look!';
$scope.orders = [];
$scope.getOrders = function(){
$http.get('http://apidemo.dev/api/orders').success(function(response){
console.log("My data: " + response);
$scope.orders = response;
});
}
});
When I click the button, I can see the results in the console, but not in the list.
If use this code in the controller, it works when it loads, and when I click the button:
app.controller('mainController', function($scope, $http) {
$scope.message = 'Everyone come and see how good I look!';
$http.get('http://apidemo.dev/api/orders').success(function(response){
console.log("My data: " + response);
$scope.orders = response;
});
$scope.getOrders = function(){
$http.get('http://apidemo.dev/api/orders').success(function(response){
console.log("My data: " + response);
$scope.orders = response;
});
}
});
What is the problem ?
Thanks!
Seems like you were using ngRoute and you have href="#" in your anchor, which leads you redirection to blank page, Keep href="" will help you in css to show pointer: cursor; on hover of it
Button
Orders!
Thanks everybody for your help.
The problem was the link in the view...
Orders!
would be:
<a ng-click="getOrders()">Orders!</a>