I have the following JSON and I am having issues in retrieving the data and displaying it in IONIC. Can someone provide me some guidance ?
JSON
mynews_JsonCallBack({
"items":[
{"headline":"Cat",
"link":"http://www.mynews.com/1",
"description":"Yellow cat",
"pubdate":"Fri, 10 Jun 2016 06:00:19",
"image":"http://www.mynews.com/1.jpg"},
{"headline":"Dog",
"link":"http://www.mynews.com/2",
"description":"Blue dog",
"pubdate":"Fri, 10 Jun 2016 06:00:19",
"image":"http://www.mynews.com/2.jpg"}
]});
Controller
.controller('NewsCtrl', function($http, $scope) {
$scope.news = [];
$http.get('https://www.mynews.com/.json')
.success(function(response) {
$scope.news.push = response.headline;
});
})
Try this
$scope.news = [];
.controller('NewsCtrl', function($http, $scope) {
$http.get('https://www.mynews.com/.json')
.success(function(response) {
$scope.res = response.items[0];
$scope.news.push($scope.res);
})
});
})
<ion-list>
<ion-item ng-repeat="item in news">
{{item.headline}}!
</ion-item>
</ion-list>
try this
<ion list>
<ion item ng-repeat = "title in news">
{{title}}
</ion item>
</ion list>
in your controller
.controller('NewsCtrl', function($http, $scope) {
$scope.news = [];
$http.get('https://www.mynews.com/.json')
.success(function(response) {
$scope.res = response.item;
$scope.res.forEach(function(item) {
$scope.news.push(item.headline);
});
console.log($scope.news);
})
.error(function(response){
console.log(response);
});
});
Try this
$scope.news.push = response[0].headline;
instead of
$scope.news.push = response.headline;
Related
Here is my html code:
<div ng-app="myApp" ng-controller="customersCtrl">
<p id="druzyny"></p>
</div>
and then in angular script:
var app = angular.module('myApp', []);
document.getElementById("search1").onclick = app.controller('customersCtrl', function($scope, $http){
var place = document.getElementById("place").value;
var sel1 = document.getElementById("sel1").value;
var sel2 = document.getElementById("sel2").value;
var req = {
method: 'post',
url: 'findTournament',
headers: {
'Content-type': 'application/json'
},
data: {place: 'test'}
};
$http(req).then(function(response){
});
});
I`ve got button id="search1" and i want that angular execute only when i click this button, no automatically when page is reload, is it possible?
Thanks for answears
HTML:
<div ng-app="myApp" ng-controller="customersCtrl as customers">
<input data-ng-model="customers.place">
<input data-ng-model="customers.sel1">
<input data-ng-model="customers.sel2">
<button data-ng-click="customers.init()"></button>
</div>
JS:
angular.module('myApp', []);
angular
.module('myApp')
.controller('customersCtrl', function($scope, customersService){
var vm = this;
vm.init = function(){
customersService.findTournament({place: vm.place, sel1: vm.sel1, sel2: vm.sel2})
.then(function(res){});
};
});
angular
.module('myApp')
.service('customersService', function($http){
return {
findTournament: findTournament
};
function findTournament(data){
return $http.post('findTournament', data);
}
});
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 want to display ng-model value from page to input in another page
I Want display selected issue from issues page to contact page
Issue Controller
.controller('IssueCtrl', function($scope, $http) {
$http.get('api/issues').then(function(resp) {
console.log('Success', resp);
$scope.issues = resp.data;
}, function(err) {
console.error('ERR', err);
$scope.issues = err;
});
})
Contact Controller
.factory('Post', function($resource) {
return $resource('api/add_new_order',{problem: "#problem"});
})
.controller('ContactCtrl', function($scope, Post) {
// Get all posts
$scope.posts = Post.query();
// Our form data for creating a new post with ng-model
$scope.postData = {};
$scope.newPost = function() {
var post = new Post($scope.postData);
post.$save();
}
$scope.issues = {};
$scope.answer = function(){
console.log($scope.issues.name);
}
})
Issue View
<ion-list ng-repeat="item in issues">
<ion-radio ng-model="issues.name" ng-value="'{{item.issue}}'">
{{item.issue}}
</ion-radio>
</ion-list>
Contact View
<form ng-submit="newPost()">
<label class="item item-input">
<span class="input-label">Problem :</span>
<input type="text" name="problem" ng-model="postData.problem">
</label>
</form>
Your API requests should be on independent services, so they can be accessed by any controller.
As you seen to know how a factory works, I will give you an example.
.factory('IssuesService', function($http) {
var issues = [];
return {
all: function() {
return $http.get('api/issues')
.then(function(data){ // Optional callback inside service
issues = data;
});
}
}
})
.controller('ContactCtrl', function($scope, Post, IssuesService) {
...
$scope.issues = [];
IssuesService.all().then(function(data){
$scope.issues = data;
})
...
})
.controller('IssueCtrl', function($scope, $http) {
IssuesService.all()
.then(function(resp) {
console.log('Success', resp);
$scope.issues = resp.data;
}, function(err) {
console.error('ERR', err);
$scope.issues = err;
});
})
I'm somewhat new to the JS world, so I'm struggling a bit as to what I did wrong. My sample data from wordpress API is not working. Any ideas what I did wrong:
app.controller('FeedCtrl', function($http, $scope, $ionicLoading) {
console.log("Loading FeedCtrl");
$scope.stories = [];
function loadStories(params, callback) {
$http.get('http://public-api.wordpress.com/rest/v1/freshly-pressed/', {params: params})
.success(function(response) {
var stories = [];
angular.forEach(response.data.children, function(child) {
stories.push(child.data);
});
callback(stories);
});
}
$scope.loadOlderStories = function() {
var params = {};
if ($scope.stories.length > 0) {
params['after'] = $scope.stories[$scope.stories.length - 1].name;
}
loadStories(params, function(olderStories) {
$scope.stories = $scope.stories.concat(olderStories);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.loadNewerStories = function() {
var params = {'before': $scope.stories[0].name};
loadStories(params, function(newerStories) {
$scope.stories = newerStories.concat($scope.stories);
$scope.$broadcast('scroll.refreshComplete');
});
};
I've made a simplified example with your data.
Click the 'Load more' button to retrieve some posts. You should see a list with the title and the author of a post.
EDIT: There appears to be some cross-domain request issues, that's why the 'Load stories' button won't work. Just try to reflect this code inside your controller, it should work.
var app = angular.module('myApp', []);
app.controller('feedCtrl', function ($scope, $http) {
$scope.stories = [];
$scope.loadStories = function loadStories() {
console.log('loading stories');
$http.get('http://public-api.wordpress.com/rest/v1/freshly-pressed/')
.then(function onSuccess(response) {
console.log(response);
$scope.stories = response.data.posts;
}, function onFailed(error) {
console.error('Error:', error)
});
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="feedCtrl">
<button data-ng-click="loadStories()">Load stories</button>
<ul>
<li data-ng-repeat="story in stories">Title: {{ story.title }} - {{ story.author.first_name }} {{ story.author.last_name }}</li>
</ul>
</div>
</body>
</html>
Normally we wouldn't handle $http calls in our angular.controller. This needs to be done in an angular.service.