I have a feeling that this should be very simple thing to do but I can't figure it out at the moment.
I am learning AngularJS by building a simple podcast app. So far I've managed to convert an XML file from url to JSON object.
Now I would like to loop thru each object of the "story" and display data such as title and image url. (see img below)
starter.controller('fox', function($scope, $http){
$http.get('http://api.npr.org/query?id=57&apiKey=i've removed the key)
.success(function(data, status, headers, config){
var x2js = new X2JS();
var jsonOutput = x2js.xml_str2json(data);
console.log(jsonOutput);
$scope.title = jsonOutput.nprml.list.story[0]['title'];
})
.error(function(data, status, headers, config){
alert('There is a problem');
})
});
<div class="list" ng-repeat=" ? ">
{{title}}
</div>
The code below only renders the first object as I've set that manually - story[0]['title'] and I am unsure hot to loop thru the list.
In jQuery I would usually do for each loop and append the result in a div.
it should be something like this.
starter.controller('fox', function($scope, $http){
$http.get('http://api.npr.org/query?id=57&apiKey=i've removed the key)
.success(function(data, status, headers, config){
var x2js = new X2JS();
var jsonOutput = x2js.xml_str2json(data);
console.log(jsonOutput);
$scope.stories = jsonOutput.nprml.list.story;
})
.error(function(data, status, headers, config){
alert('There is a problem');
})
});
<div class="list" ng-repeat="story in stories">
{{story.title}}
{{story.link}}
</div>
Related
I am new to angularJs. I am trying to get dJango rest api data from angularJs. Using jsonp method, data is fetching from api (showing in chrome browser sources tab). But it is not showing in html page. Please check below code.
var myApp = angular.module('myApp',[]);
var dataController = function ($scope, $http, $window, $sce) {
var url = 'http://myIpWithPort/ids/?callback=JSON_CALLBACK';
$sce.trustAsResourceUrl(url);
$http.jsonp(url,{ jsonpCallbackParam: 'callback' }).then(function (data) {
$scope.emps = JSON.parse(data.data);
})
}
myApp.controller('dataController', dataController);
<div ng-controller="dataController">
<div>{{ emps }}</div>
</div>
Any one please help me.
since you are using jsonp method you do not need to parse the data to json again.just assign the values
$scope.emps =data.data
I am newbie to angularjs. I succeeded in making the fileuploader work and displaying the files uploaded. Now I want to remove the files which I do not want.
Here is how my upload and display works.
html file
<div class="container-fluid">
<error-display error-display-api="errorDisplayApi"></error-display>
<div ng-controller="complianceItemDocumentcontroller">
<div class="form-inline">
<span class="btn btn-default">
Add Photo
<input ng-model="file"
onchange="angular.element(this).scope().file_changed(this)"
type="file" accept="image/*">
</span>
<button ng-click="removeFile()">Delete Photo</button>
</div>
<div ng-repeat="images in document">
<label name ="desscription" ng-bind ="images.Description"></label><br>
</div>
</div>
</div>
javascript file
app.controller('complianceItemDocumentcontroller', ['$scope', '$http', function ($scope, $http)
{
var url = "http://localhost:/....";
$http.get(url)
.success(function (data, status, headers, config)
{
$scope.document = data;
})
.error(function (data, status, headers, config)
{
$scope.document = undefined;
});
$scope.removeFile = function()
{
alert("delete");
};
$scope.file_changed = function(element)
{
$scope.$apply(function (scope)
{
var fd = new FormData();
fd.append('file', element.files[0]);
var urlpost = "http/.....";
var req = { method: 'POST', url: urlpost, headers: { 'Content- Type': undefined }, data: fd}
$http(req)
.success(function (data, status, headers, config)
{
alert("uploaded");
})
.error(function (data, status, headers, config)
{
alert("fail");
});
});
}
}]);
I should be able to select the images in the list and based on the selection of the file I should be able to call the related API to remove the document using the document ID.
I am unable to figure out how to select a file and upon selected get the document ID. Then I will call the method through httppost and that will be deleting the file in the database. Also I should be able to display the images available as thumbnails. Currently it is just a plain list of names of files.
Thank you for your time and suggestions.
My app has more than 10 screens and i want for programming order to keep each screen to different html file. In the index file I have the log in screen and in the angular controller I make the connection to the MySQL DB and it returns the response from DB. Now how can I call the main profile page (profile.html)?
my JS code:
var myApp = angular.module('Appname', ['onsen.directives']);
myApp.controller("LogInController", function ($scope, $http) {
$scope.errors = [];
$scope.msgs = [];
$scope.login = function () {
$scope.errors.splice(0, $scope.errors.length);
$scope.msgs.splice(0, $scope.msgs.length);
$http.post('http://192.168.1.2/login.php', {'u':"Username", 'p':"Password"}).
success(function (data, status, headers, config) {
$scope.posts = data;
console.log(data);
alert(data[0].msg);
//here I want to put main page profile.html
}).
error(function (data, status, headers, config) {
alert(data);
});
}});
If I don't use the right approach, can you suggest me another example??
Hope this clue would help.
Can you try out something like this.
$scope.ons.navigator.pushPage('profile.html');
I wanna use angular sortable on my app. But my model is dynamically populated from several json files with $http.get() function. All that ngSortable see from the model is just an empty array. And it won't get the new data from the JSON file. Is there any workaround for this?
$scope.jsons = ["data1.json", "data2.json"];
$scope.abc = [];
angular.forEach($scope.jsons, function(value, key){
$http.get(value).success (function(data){
$scope.abc.push(data);
});
});
$scope.sortableOptions = {
accept: function (sourceItemHandleScope, destSortableScope) {return true}
};
<div ng-model="abc" as-sortable="sortableOptions">
<div ng-repeat="x in abc" as-sortable-item>
<div as-sortable-item-handle>{{x.name}}</div>
</div>
</div>
I had the same problem with ng-sortable: everything worked fine with static data but not with JSON data that come asynchronous from $http.get().
There are two solutions:
Leave the controller as it and, in the html part, replace both occurrences of "abc" with "$parent.abc"
Instead of directly access the 'abc' array, use an intermediate object, like this:
$scope.tmpObject = {};
$scope.tmpObject.abc=[];
...
$http.get(value).success (function(data){
$scope.tmpObject.abc.push(data);
});
...
<div ng-model="tmpObject.abc" as-sortable="sortableOptions">
<div ng-repeat="x in tmpObject.abc" as-sortable-item>
<div as-sortable-item-handle>{{x.name}}</div>
</div>
</div>
use service $q
like
//first make a factory using $q
yourappname.factory("factoryname",function($http, $q){
var _getDetails=function(value){
var deferred = $q.defer();
$http.get(value).then(function(modal){
deferred.resolve(modal);
});
return deferred.promise;
};
return {
_getDetails:_getDetails
};
});
// then in your controller use this factory
$scope.jsons = ["data1.json", "data2.json"];
$scope.abc = [];
/**angular.forEach($scope.jsons, function(value, key){
$http.get(value).success (function(data){
$scope.abc.push(data);
});
});
***/
angular.forEach($scope.jsons, function(value, key){
var promiseData= factoryname._getDetails(value);
promiseData.then(function(result){
if(result.data)
{
$scope.abc.push(result.data);
}
});
});
$scope.sortableOptions = {
accept: function (sourceItemHandleScope, destSortableScope) {return true}
};
<div ng-model="abc" as-sortable="sortableOptions">
<div ng-repeat="x in abc" as-sortable-item>
<div as-sortable-item-handle>{{x.name}}</div>
</div>
</div>
I am trying to learn how to load JSON with Angular. I'm a beginner with both topics, and am stuck on some really beginner topics.
I have a JSON file called food.json. It has structure like this:
[
{"uid":"55","title":"Nussbrot","code":"U VP 0000030","unit":[{"title":""}],"unitgram":"0","unitgram_second":"0","sorting":"0"},
{"uid":"58","title":"Walnu\u00dfbrot","code":"X 39 2000002","unit":[{"title":"Scheiben"}],"unitgram":"45","unitgram_second":"0","sorting":"0"}
]
Following instructions from http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/, I have a controller like this:
myApp.controller('EmailsCtrl', ['$scope', function ($scope) {
$scope.foodlist = {};
$scope.foodlist.foodtitle = '';
$http({
method: 'GET',
url: 'food.json'
})
.success(function (data, status, headers, config) {
$scope.foodlist = data.; //I don't know what to call here as my data elements have no names?
})
.error(function (data, status, headers, config) {
//error
});
}]);
The first point I am stuck in is, how do I assign data to my ´$scope.foodlist´ if the JSON objects have no names?
I've built a Plunkr of my not-working attempts so far, and would appreciate any guidance in a) reading in the JSON and b) assigning the JSON data to values in controller.
ng-repeat in your case will iterate the array of objects in your data
You just need to use :
<li ng-repeat="food in foodlist">
Then on each pass of the loop, angular will reference the current object in array to produce output like {{ food.title }}
I updated your demo here
Edit Strongly suggest you go through the tutorial on angular docs site step by step
The first problem is in the controller definition: You are trying to reference $http but you are not passing it in.
myApp.controller('EmailsCtrl', ['$scope', '$http', function ($scope, $http) {
Then on success your data parameter is your foodlist:
.success(function (data, status, headers, config) { $scope.foodlist = data; })
Finally, in your html, ng-repeat should be like this:
ng-repeat="food in foodlist"