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>
Related
I have the list of items
<ul>
<li><a>ItemA</a></li>
<li><a>ItemB{{vm.count}}</a></li>
</ul>
I am preparing the list in angular in Controller:
vm.listofItems =[{"textDisplay":"ItemA","Statego":""},
{"textDisplay":"ItemB{{vm.count}}","Statego":""}];
After some service call I'll get vm.count value? how to Bind now.
Ok just try this code, First of all i will suggest you to use $scope. I have assigned your listOfItems in watch of count, it will work for you, whenever you change the value of $scope.count
$scope.count;
$scope.$watch('count', function() {
$scope.listofItems =[
{"textDisplay":"ItemA","Statego":""},
{"textDisplay":"ItemB" +$scope.count,"Statego":""}
];
});
In Html
<div ng-app="app">
<div ng-controller="MainCtrl as main">
<ul>
<li ng-repeat='list in main.listofItems'>
{{list.textDisplay}}
</li>
</ul>
<input ng-model='main.count' ng-value='main.count'> {{main.count}}
</div>
</div>
In controller
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.count = 90;
vm.listofItems = [{
"textDisplay": "ItemA",
"Statego": ""
}, {
"textDisplay": "ItemB " + vm.count + "",
"Statego": ""
}];
$scope.$watch(angular.bind(this, function() {
return this.count;
}), function(newVal) {
vm.listofItems[1].textDisplay = "ItemB " + newVal;
// console.log(' change ' , newVal);
});
});
This the solution I figured out.Is this approach is correct?
jsFiddle for the same: https://jsfiddle.net/nj5/ve4xmhtj/
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.
I am new to Angular so to get to grips with it I have been working with a Dummy RESTful service. Right now I have managed to pull the image URL and then push it into an array.
I would like to output this array as an image when the "ng-click" directive is fired.
Any guidance or help would be much appreciated.
<p ng-click="outputImageData()">click me</p>
<ul>
<li ng-repeat="photo in photos">
{{ image }}
</li>
</ul>
myApp.factory('getImages', function($http) {
var imageService = {
async: function(id) {
var promise = $http.get('https://jsonplaceholder.typicode.com/photos/1').then(function(response) {
return response.data;
})
return promise;
}
};
return imageService;
});
myApp.controller("outputImages", function($scope, getImages) {
var photos = [];
$scope.outputImageData = function() {
getImages.async().then(function(data) {
var photoId = data.url;
photos.push(photoId);
console.log(photos);
})
}
});
Thanks
I've been using angularjs but generally as a developer, I'm just started so bear with me, please.
I think something like this would work:
<p ng-click="updateImageData()">click me</p>
<ul>
<li ng-repeat="photo in photos">
<img src="{{photo.url}}">
</li>
</ul>
myApp.factory('getImages', function($http) {
var imageService = {
async: function() {
var promise = $http.get('https://jsonplaceholder.typicode.com/photos/');
return promise;
}
};
return imageService;
});
myApp.controller("outputImages", function($scope, getImages) {
$scope.photos = [];
$scope.updateImageData = function() {
getImages.async(photoId).then(function(data) {
$scope.photos = data;
console.log(photos);
})
}
});
I can't figure out why the code below is not filtering just the values with unique_id of "027". I've tried it as a string as well '027'...
JSON file:
[
{
"unique_id":"027",
"title":"How Speed Relates to Energy",
"state":"NY",
"state_id":"1.S2.3a"
}
]
Here my controller:
var abApp = angular.module('abApp', []);
abApp.factory('abData', function($http, $q) {
var deffered = $q.defer();
var data = [];
var abData = {};
abData.async = function() {
$http.get('/data/ab_activities.json')
.success(function(ab) {
data = ab;
deffered.resolve();
});
return deffered.promise;
};
abData.data = function() {
return data;
};
return abData;
});
abApp.controller("abEE", function(abData, $scope) {
var abApp = this;
abData.async().then(function(ab) {
abApp.alignments = abData.data();
});
})
Here's my HTML:
<div ng-controller="abEE as ee">
<ul>
<li ng-repeat="align in ee.alignments | filter:{unique_id : 027} ">
{{align.unique_id}} - {{align.state}}, {{align.state_id}}
</li>
</ul>
</div>
you need to correct your html markup like this, as in your JSON unique_id is a string:
<div ng-controller="abEE as ee">
<ul>
<li ng-repeat="align in ee.alignments | filter:{unique_id : '027'} ">
{{align.unique_id}} - {{align.state}}, {{align.state_id}}
</li>
</ul>
I am new to Angularjs and having trouble displaying data . i.e. Json array
This is the result of my rest service call:
{
"users": [{
"id": 1,
"firstname": "Naveen",
"lastname": "Dutt",
"email": "navee23ndutt12.vyas#gmail.com",
"telephone": "7829418456445355"
}]
}
And this is my controller:
app.controller('MyCtrl2', ['$scope', 'NFactory', function ($scope, NFactory) {
alert("here??");
$scope.bla = NFactory.query;
alert("here??" + $scope.bla);
NFactory.get({}, function (nFactory) {
$scope.allposts = nFactory.firstname;
})
}]);
This is my html:
<div>
<ul >
<li ng-repeat="user in bla"> {{ user.firstname }} </li>
</ul>
</div>
but it doesnt show anything on UI. what can be the problem? please suggest.
It happens because you call async task. I would wrap result with promise.
Here is basic simulation of async call:
Demo Fiddle
var app = angular.module('myModule', ['ngResource']);
app.controller('fessCntrl', function ($scope, Data) {
Data.query()
.then(function (result) {
console.log(result);
$scope.bla = result.users;
}, function (result) {
alert("Error: No data returned");
});
});
app.$inject = ['$scope', 'Data'];
app.factory('Data', ['$resource', '$q', function ($resource, $q) {
var data = {
"users": [{
"id": 1,
"firstname": "Naveen",
"lastname": "Dutt",
"email": "navee23ndutt12.vyas#gmail.com",
"telephone": "7829418456445355"
}]
};
//Actually we can use $resource
//var data = $resource('localhost/shfofx/PHP/Rest/alertLossDetails.php',
// {},
// { query: {method:'GET', params:{}}}
// );
var factory = {
query: function (selectedSubject) {
var deferred = $q.defer();
deferred.resolve(data);
return deferred.promise;
}
}
return factory;
}]);
If $scope.bla in your case is
{"users":[{"id":1,"firstname":"Naveen","lastname":"Dutt","email":"navee23ndutt12.vyas#gmail.com","telephone":"7829418456445355"}]
then your template should look like this:
<ul >
<li ng-repeat="user in bla.users"> {{ user.firstname }} </li>
</ul>
Another way would be to change the code inside your Controller like this:
$scope.bla = NFactory.query.users;
and leave template as you have it.
If NFactory.query is string you need to parse it as JSON first.
$scope.bla=JSON.parse(NFactory.query);
and then
<ul >
<li ng-repeat="user in bla.users"> {{ user.firstname }} </li>
</ul>
Hope this will help...
Shouldn't it be a method call: NFactory.query() ?
Please show the NFactory source.
UPDATE: Try responding just array from server:
[{
"id": 1,
"firstname": "Naveen",
"lastname": "Dutt",
"email": "navee23ndutt12.vyas#gmail.com",
"telephone": "7829418456445355"
}]
and use NFactory.query()