We Keep Coding

JavaScript: How to get specific value from JSON data

I have the following code in which I fetch data from the JSON file , I Store data in $scope.users variable, But I want to fetch only username value how can I do this?
LoginCtrl.js
'use strict';
angular.module('User').controller('LoginCtrl', ['$scope','$state', "SettingService","UserService", function($scope,$state, SettingService,UserService) {
$scope.users = [];
UserService.getLoginInfo().then(function(response){
$scope.users = response.data.data["username"];
}, function(error){
})
var vm = this;
vm.doLogin = function(){
var username = document.forms["loginForm"]["email"].value;
var password = document.forms["loginForm"]["password"].value;
if(username == "admin#gmail.com" )
{
if(password == "admin")
{
$state.go('app.home');
}
}
};
}]);
User.json
{
"result": "success",
"data": [
{ "id": 1, "username":"admin#gmail.com", "password":"admin"}
]
}

you can get value for that JSON value as
response.data.data[0]["username"]
If you want to get all the usernames from the array, then you can do something like this:
var arr = response.data.map(function(a, b){
return a.username;
});
arr will contain all the username details

AngularJS: Update array after submitting a new object

I need to update an array after I save an object by replacing the push method. I tried to use a function instead of the push method but it doesn't work. Any ideas on how to fix that?
app.controller("productController", function($scope, $http, createProductService, listProducstService){
$scope.addProduct = function(){
var newProduct = createProductService.createProduct($scope.product);
//$scope.products.push(newProduct);
updateArray();
};
$scope.products = listProductsService.query();
var updateArray = function(){
$scope.products = listProductsService.query();
}
}
app.factory("listProductsService", function($resource){
return $resource("getAllProducts", {}, {
listProducts: {
method: "GET",
isArray: true
}
})
})

you need to use $scope.$apply() :
var updateArray = function(){
$scope.$apply(function () {
$scope.products = listProductsService.query();
});
}
http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

How to parse many json files using AngularJS

I am trying to parse in my HTML page many JSON files:
Here is my service's code:
app.factory('myapp', ['$http', function($http) {
var tab = ['url1', 'url2', 'url3']
for(i=0; i<tab.length; i++){
return $http.get(tab[i])
.success(function(data) {
return data;
})
.error(function(err) {
return err;
}); }
}]);
In my HTML file , I only have the information of the first json file.
Here's my HTML code:
<tr>
<td>{{data.nm}}</td>
<td>{{data.cty}}</td>
<td>{{data.hse}}</td>
<td>{{data.yrs}}</td>
</tr>
Is there something to add in my HTML so I can get the information from all the json files or any other solution?

First off, you return in the first iteration in your for loop, so you only get the data for the first url. Don't return right away, assign a scope variable to your data:
Factory
app.factory('myapp', ['$http', function($http) {
function getLists() {
var tab = ['url1', 'url2', 'url3'];
var list = [];
for(i=0; i<tab.length; i++){
$http.get(tab[i])
.then(function(res) {
list.push(res.data);
});
}
return list;
}
return {
getLists: getLists
};
]);
Controller
$scope.list = myapp.getLists();
HTML
<tr ng-repeat="d in list">
<td>{{d.nm}}</td>
<td>{{d.cty}}</td>
<td>{{d.hse}}</td>
<td>{{d.yrs}}</td>
</tr>

I think what you are looking for is $q.all
I would solve the problem like this
angular.module('app').factory('myRequestsFactory',function($http, apiHost) {
var myRequestsFactory = {};
myRequestsFactory.geturl1 = function() {
return $http.get(url1);
};
myRequestsFactory.geturl2 = function() {
return $http.get(url2);
};
myRequestsFactory.geturl3 = function() {
return $http.get(url3);
};
return myRequestsFactory;
});
Then I would create an other service
angular.module('app').factory('helperService',function($q, myRequestsFactory) {
var helperService = {};
helperService.GetAll = function() {
return $q.all([
myRequestsFactory.geturl1(),
myRequestsFactory.geturl2(),
myRequestsFactory.geturl3() ]);
};
return helperService;
});
Then in my controller ..
function loadData() {
helperService.GetAll().then(
function(result) {
$scope.url1result = result[0];
$scope.url2result = result[1];
$scope.url3result = result[2];
});
},
function(error) {
}
);
}
That's how i would get access to this data

two button on two different views calling the same function, angularjs

I have a SPA with two different views one for subjects and one for student,
in subject view I have a save button in app/views/subject/subject.html:
<button type="button" class="btn btn-warning" ng-click="saveInfo()">
Save
</button>
I want to add the same function in the student views , saveInfo() pass the data into a service in the app factory which save the data in DB through fill_table.php.
the app factory in app/javascript/services.js:
var app = angular.module('myApp');
app.factory("services", ['$http', function($http) {
var serviceBase = 'http://localhost/php/';
var obj = {};
document.title = "myApp on " + serviceBase;
obj.postData = function (user, data) {
return $http.post(serviceBase + 'fill_table.php', { "data": data, "user": {'username': user.name, 'password': user.password }).then(function (results) {
return results.data;
});
};
saveInfo() is in app/views/subject/subject.js:
$scope.saveInfo = function() {
console.log("saveInfo");
$scope.loadingInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'modalLoading.html',
size: "l",
});
return getChanges( $indexedDB, $q).then( function(responsesArray) {
var jsonData = {};
$scope.errorInstance = undefined;
for (var i=0; i < DB_TABLES.length; i++) {
var table = DB_TABLES[i];
var items = responsesArray[i]
if (items.length > 0){
jsonData[table] = items;
}
}
console.log(JSON.stringify(jsonData));
return services.postData($scope.selectedUser, jsonData);
})
}
I want to add the mentioned button into app/views/student/student.html. i tried and copied the code from the subject.js into Student but for some reason it does not work eventhough i checked everything was correct so is there a way to only that function from subject.js into Student.html
note 1 getChanges() is another function get the inserted info and pass it into saveinfo().
note 2 right now I can save the info inserted student view by pressing save button in subject view

If I understand you correctly, you have two html files and two controller (student and subject). To share data/functions between these, you could use a service or factory to handle all your http request. This is reusable and accessible from all your controllers.
app.factory("services", ['$http', function($http) {
var postStudent = function (student) {
return $http.post("api/Student/Post", student);
};
var getChanges = function (){
return $http.get("api/Student/Changes", student);
};
return {
postStudent : postStudent,
getChanges : getChanges
};
}])
Now you can use can call the services from your controller as you see fit.
app.controller('StudentController', ['service', function(service){
service.postStudent(student).then(function successCallback(response) {
console.log('success');
}, function errorCallback(response) {
console.log('error ' + response);
});
service.getChanges().then(function successCallback(response) {
console.log('success');
}, function errorCallback(response) {
console.log('error ' + response);
});
}]);
app.controller('SubjectController', ['service', function(service){
service.postStudent(student).then(functionsuccessCallback(response){
},
function errorCallback(response) {
});
service.getChanges().then(function successCallback(response) {
},
function errorCallback(response) {
});
}]);
Note that the above has not been implemented, but should provide you with an outline.

Parse xml tag in a AngularJS feed

I need parse the enclosure tag in order to get the url image. It's assumed I should get the MIXED OUTPUT with the json+xml code but I get a undefined value from the enclousure tag when I try parse it. I'm doing this like I saw at this post > Google Feed Loader API ignoring XML attributes < .In addition I tried to get the MIXED format writing the url manually but It doesn't work. There is my whole code. How could I know that Im getting the mixed json output?
var feeds = [];
var entryImageUrl = [];
angular.module('starter.controllers', ['ngResource','ngLocale'])
.factory('FeedLoader', function ($resource) {
return $resource('http://ajax.googleapis.com/ajax/services/feed/load', {}, {
fetch: { method: 'JSONP', params: {v: '1.0', callback: 'JSON_CALLBACK', output: 'json_xml'} }
});
})
.service('FeedList', function ($rootScope, FeedLoader) {
this.get = function() {
var feedSources = [
{title: 'Heraldo De Barbate', url: 'http://www.heraldodebarbate.es/rss/last'},
];
if (feeds.length === 0) {
for (var i=0; i<feedSources.length; i++) {
FeedLoader.fetch({q: feedSources[i].url, num: 10}, {}, function (data) {
var feed = data.responseData.feed;
**var entryImageUrl = feed.xmlNode.getElementsByTagName("enclosure")[i].getAttribute("url");**
feeds.push(feed);
});
}
}
return feeds;
};
})
.controller('FeedCtrl', function ($scope, FeedList,$timeout) {
$scope.update = function(){
$scope.feeds = FeedList.get();
$scope.$on('FeedList', function (event, data) {
$scope.feeds = data;
// $scope.entryImageUrl
console.log(feeds);
});
$timeout(function() {
$scope.$broadcast('scroll.refreshComplete');
}, 500);
}
})

How could I know that Im getting the mixed json output?
Use a test for tags within JSON:
function testMe(node)
{
return /</.test(JSON.stringify(node) )
}
then run it on the feed:
var mixed_format = testMe(feed);
and call another function which parses the data:
if (mixed_format)
{
mixed_parser(feed)
}
else
{
json_parser(feed)
}