Develop Reference

Multiple api calls using AngularJS

I am fairly new to AngularJS and I am practising below exercise with requirement
1.Using the API to get 20 posts and display them on the page along with the user’s
name who created the post and display them on the page.
For this exercise I am using https://jsonplaceholder.typicode.com/ as the data source.
I need to do 2 api calls in same controller
To get list of 20 posts which has userid in it(https://jsonplaceholder.typicode.com/posts)
Based on the above user Id I need to get username (https://jsonplaceholder.typicode.com/users/userId)
Please see my work done in plnkr, I am able to display Post but not username.
Script.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/posts").then(function(response) {
$scope.data = response.data;
var postList = [];
for (var i = 0; i < 20; i++) {
var display = {
UserName: $http.get("https://jsonplaceholder.typicode.com/users/" + $scope.data[i].userId).then(function(response) {
$scope.user = response.data;
}),
Post: $scope.data[i].title
}
postList.push(display);
}
$scope.list = postList;
});
});
Index.html
<div ng-repeat="x in list">
Post:{{ x.Post }}
UserName:{{x.UserName}}
</div>

I believe this area is wrong:
.then(function(response) {
$scope.data = response.data;
var postList = [];
for (var i = 0; i < 20; i++) {
var display = {
UserName: $http.get("https://jsonplaceholder.typicode.com/users/"+$scope.data[i].userId).then(function(response){
$scope.user = response.data;
}),
Post: $scope.data[i].title
}
postList.push(display);
}
$scope.list = postList;
});
where you stored a Promise object in your UserName property and produced unexpected result.
to correct this assign the postList after the request has finished:
.then(function(response) {
$scope.data = response.data;
var postList = [];
for (var i = 0; i < 20; i++) {
$http.get("https://jsonplaceholder.typicode.com/users/"+$scope.data[i].userId).then(function(response){
$scope.user = response.data;
var display = {
UserName: "",
Post: $scope.data[i].title
};
$scope.list.push(display);
});
}
$scope.list = postList;
});
Once you implemented this you will encounter a new problem:
since you called $http.get() in a loop and actually used the variable i inside .then() by the time .then() executes the value of i is already in its final form which is i = 20 | data.length which every .then() calls will receive.
in order to overcome this problem the best way I know is to format the entire data first before displaying it:
$http.get("https://jsonplaceholder.typicode.com/posts")
.then(function(response)
{
var data = response.data;
var postList = [];
// this will check if formatting is done.
var cleared = 0;
// create a function that checks if data mapping is done.
var allClear = function () {
if (postList.length == cleared)
{
// display the formatted data
$scope.list = postList;
}
};
for (var i = 0; i < data.length; i++)
{
// create a object that stores the necessary data;
var obj = {
// the ID will be needed to store name;
ID: data[i].userId,
Post: data[i].title,
UserName: ""
};
var url = "https://jsonplaceholder.typicode.com/users/" + obj.userId;
$http.get(url).then(function(response)
{
// find its entry in the array and add UserName;
postList.forEach(function (item)
{
if (item.ID == response.userId)
{
// just add the correct key, but I will assume it is `userName`
item.UserName = response.userName;
// break the loop
return item;
}
});
// increment cleared
cleared++;
// call allClear
allClear();
});
postList.push(obj);
}
}
);
in this way we are sure that the data is complete before displaying it in the view.
as this solution contains a loop to map the result with its original object, we can actually change postList as an object to make it a bit faster:
// var postList = [];
var postList = {};
// instead of pushing we will use the ID as key
// postList.push(obj);
postList[obj.ID] = obj;
and so in this section:
$http.get(url).then(function(response)
{
// instead of looking for the item in .forEach
postList[response.userId].userName = response.userName;
// increment cleared
cleared++;
// call allClear
allClear();
});
hope that helps.

The easy solution would be to add the username to the user object and then push it to the scope list when the promise is resolved
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/posts").then(function(response) {
$scope.data = response.data;
$scope.list = [];
for (var i = 0; i < 20; i++) {
$http.get("https://jsonplaceholder.typicode.com/users/" + $scope.data[i].userId)
.then(function(response) {
var user = {
UserName: response.data.username,
Post: $scope.data[i].title
}
$scope.list.push(user);
});
}
});
});

Ionic/Angular: Read and Write Array in Local Storage

I'm working with Ionic framework as part of an online course I'm taking to learn AngularJS and a great many other tools useful to a web developer. And, being the sort of advanced beginner type, I'm stuck. In this unit, we've learned to leverage local storage to persist data locally so we can get our favourite items even after the app is shut down. However, I have trouble getting that to work.
So here's what I've done:
The Failed Attempt
I can get data into local storage. And I can append data. I do this using this function:
$scope.favoriteData = $localStorage.getObject('favorites', '[]');
$scope.addFavorite = function (index) {
console.log('Current Favorites', $scope.favoriteData);
$scope.favoriteData = Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
console.log ($scope.favoriteData);
$scope.storeVar = $scope.favoriteData.push("'{id':" + index + '},');
console.log ($scope.favoriteData);
$localStorage.storeObject('favorites', $scope.favoriteData);
console.log('Added Favorite', $scope.favoriteData)
};
In local storage, this produces the following entry:
favorites: ["'{id':0},","'{id':1},"]
So far so good. However, this is useless. Because I need this object to have the following format:
favorites: [{'id':0}, {'id':1}]
and so on. Also, I should not be able to add duplicates. I have a kind of function for that elsewhere, but I am stuck on how to combine the two functions.
The function I have is this:
function (index) {
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index)
return;
}
favorites.push({
id: index
});
};
The problem with this is, I don't understand how it does what it does.
So please, help?
EDIT #1:
The Second Attempt
With the help of #Muli and #It-Z I'm working with the following code right now:
$scope.favoriteData = $localStorage.getObject('favorites', '[]');
$scope.addFavorite = function (index) {
console.log('Current Favorites', $scope.favoriteData);
$scope.favoriteData = Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
console.log ($scope.favoriteData);
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index) {
console.log ("Found duplicate id " + favorites[i].id);
return;
}
}
$scope.storeVar = $scope.favoriteData.push({id: index});
console.log ($scope.favoriteData);
$localStorage.storeObject('favorites', $scope.favoriteData);
console.log('Added Favorite', $scope.favoriteData)
};
However, this doesn't work because with a nonexistant key favorites, it doesn't work and gives me an error. So I need to implement a check if the key exists and if it doesn't, then it should create one. I've looked at this question, but it didn't work, mainly because I must use the following factory in services.jsto access local storage:
.factory('$localStorage', ['$window', function ($window) {
return {
store: function (key, value) {
$window.localStorage[key] = value;
},
get: function (key, defaultValue) {
return $window.localStorage[key] || defaultValue;
},
storeObject: function (key, value) {
$window.localStorage[key] = JSON.stringify(value);
},
getObject: function (key, defaultValue) {
return JSON.parse($window.localStorage[key] || defaultValue);
}
}
}])
So this is where I'm at right now. And I'm still stuck. Or again stuck. I don't know.

$localStorage handles serialization and deserialization for you so there's no need for $scope.favoriteData = $localStorage.getObject('favorites', '[]');
You can just call:
$scope.favoriteData = $localStorage.favoriteData || {/*Defaults object*/};
Same goes for saving data. use the dot notation.
Check the demo.
As for the duplicates: just handle them yourself like you would normally. when you're done call $localStorage.mySet = modifiedSet (modified set is standard JS object).
Note: this assumes you use ngStorage.

First of all, this line:
$scope.storeVar = $scope.favoriteData.push("'{id':" + index + '},');
Should be:
$scope.storeVar = $scope.favoriteData.push({id: index});
This is because in the original line you are pushing string into favoriteData while you wanted objects.
And if you want to check first for duplicates your can go with somthing like this:
$scope.favoriteData = $localStorage.getObject('favorites', []);
$scope.addFavorite = function (index) {
console.log('Current Favorites', $scope.favoriteData);
$scope.favoriteData = Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
console.log ($scope.favoriteData);
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index) {
console.log ("Found duplicate id " + favorites[i].id);
return;
}
}
$scope.storeVar = $scope.favoriteData.push({id: index});
console.log ($scope.favoriteData);
$localStorage.storeObject('favorites', $scope.favoriteData);
console.log('Added Favorite', $scope.favoriteData)
};

How can i get all index on elastic search using elastic.js?

With my angular application i need to display all indexes on elastic search. I am able to query a particular index using the documentation, not able to get all the indexes on the elastic search.
Here is the Documentation
Here is my code:
$scope.getallIndex = function(){
$scope.Indexes = ejs.Request().query(ejs.MatchAllQuery()
.doSearch().then(function (body) {
$scope.Indexes = body.hits.hits;
console.log($scope.Indexes);
}

const indices = await client.cat.indices({format: 'json'})

I am using elasticsearch.js which is the Browser build for Elastic Search that can be used in the browser . Refer link . I have maintained a factory :
.factory('ElasticService', [ 'esFactory', function (elasticsearch) {
var client = elasticsearch({
host: ip + ':' + port,
});
client.cat.indices("b",function(r,q){
console.log(r,q);
}) }]);
That will return all the indices .Refer link for full configuration.
Edited :
Below is the full factory for retrieving data from a specific index .
.factory('ElasticService', ['$q', 'esFactory', '$location', function ($q, elasticsearch, $location) {
var client = elasticsearch({
host: ip + ':' + port
});
var search = function (index, body) {
var deferred = $q.defer();
client.search({
index: index,
type: type,
body: body
}).then(function (result) {
var took = result.took;
var size = result.hits.total;
var ii = 0, hits_in, hits_out = [],aggs = [], highlight = [];
hits_in = (result.hits || {}).hits || [];
/* For the timebeing i have maintained this variable to save the aggregations */
aggs = result.aggregations;
for (; ii < hits_in.length; ii++) {
hits_in[ii].fields.id = hits_in[ii]._id;
hits_out.push(hits_in[ii].fields);
// hits_out[hits_in[ii]._id]=hits_in[ii].fields: use this method if you wanna keep _id as the index
// if there is a highlight coming along with the data we add a field highlight and push it to built an array
if (hits_in[ii].highlight) {
highlight.push(hits_in[ii].highlight);
}
}
if (highlight.length) {
deferred.resolve({hits: hits_out, highlight: highlight,aggs:aggs, size: size, took: took});
}
else {
deferred.resolve({hits: hits_out, size: size,aggs:aggs, took: took});
}
}, deferred.reject);
return deferred.promise;
};
return {search: search}; }]);
And so the controller you can use this factory for fetching data from a particular index
ElasticService.search('<index>', <query>).then(function (resp) {
// resp has the content
});

I did query like below in javascript and it returned me index list
client.cat.indices({
h: ['index']
}).then(function (body) {
console.log(body);
});

The elasticsearch JS API has a method to query all the indices on the instance: https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/api-reference.html#api-cat-indices
Only thing is that it doesn't really return to you in a readable JSON format. So what I end up doing is something like the following
client.cat.indices({
h: ['index', 'docs.count']
}).then(function (body) {
let lines = body.split('\n');
let indices = lines.map(function (line) {
let row = line.split(' ');
return {name: row[0], count: row[1]};
});
indices.pop(); //the last line is empty by default
});

Promises not running in order

I have a function in my controller that adds users to a group, Once a user has been assigned to a group, the list of groups available should decrease. I tried using promises in my function to control the flow but based on the console log, all my groupServices are running first, then the userServices are running after, preventing the list of Available groups to update correction.
Controller Function:
$scope.addUserToGroup = function (){
var defer = $q.defer();
defer.promise.then(function (){
userService.addUserToGroup(
$scope.selectedUser,
$scope.selectedAvailableGroups,
$scope.assignedGroups,
$scope.availableGroups,
$scope.groups
);
}).then(compare());
defer.resolve();
};
function compare(){
console.log('comparing assigned with all ');
$scope.compareGroups = groupService.compareGroups();
}
I'm using promises trying to make sure things run in order but based on my console output it doesn't seem to be the case.
User Service function
var addUserToGroup = function (selectedUser, selectedAvailableGroups, assignedGroups, availableGroups, groups){
console.dir(selectedUser);
console.dir(selectedAvailableGroups);
console.dir(assignedGroups);
console.dir(availableGroups);
console.dir(groups);
var deferred = $q.defer();
var addPromise = [];
var selectLength = selectedAvailableGroups.length;
//Add user to selected groups on server
deferred.promise
.then(function (){
for (var i = 0; i < selectLength; i++){
addPromise[i] = $().SPServices({
operation: "AddUserToGroup",
groupName: selectedAvailableGroups[i].name,
userLoginName: selectedUser.domain
});
};
})
.then(function (){
//when promise finished, push changes to availableGroups
for (var i = 0; i < selectLength; i++){
assignedGroups.push(selectedAvailableGroups[i]);
console.log(selectedUser.name + " added to: " + selectedAvailableGroups[i].name);
};
});
//Run
deferred.resolve();
}
Group Service function:
var compareGroups = function () {
//Comparing assigned groups with allGroups to return available groups
var assignedGroupsIds = {};
var groupsIds = {};
var result = []
availableGroups = [];
console.log('assigned');
console.dir(assignedGroups);
console.log('avail');
assignedGroups.forEach(function (el, i) {
assignedGroupsIds[el.id] = assignedGroups[i];
});
allGroups.forEach(function (el, i) {
groupsIds[el.id] = allGroups[i];
});
for (var i in groupsIds) {
if (!assignedGroupsIds.hasOwnProperty(i)) {
result.push(groupsIds[i]);
availableGroups.push(groupsIds[i]);
}
};
console.dir(result);
console.dir(availableGroups);
}
Console Log:
comparing assigned with all userCtrl.js:47
assigned groups groupServices.js:63
Array[8] groupServices.js:64
available gruops groupServices.js:65
Array[3] groupServices.js:82
Array[3] groupServices.js:83
Object userServices.js:38
Array[1] userServices.js:39
Array[8] userServices.js:40
Array[4] userServices.js:41
Array[11] userServices.js:42
User added to: Test Group 4 userServices.js:64

You are using promises in wrong way.
The first problem is here:
}).then(compare());
You are trying to register result of execution of compare function as a callback, instead of registering just compare function like this:
}).then(compare);
That's why it executes first, then calls groupService.compareGroups() and only after it completes, you are calling defer.resolve() and your first registered callback executes. That's why you see your current console output.
You need to modify User Service and Controller in following way to get it work (Using $q service to work with promises):
Controller function:
function compare(){
console.log('comparing assigned with all ');
$scope.compareGroups = groupService.compareGroups();
}
$scope.addUserToGroup = function (){
userService.addUserToGroup(
$scope.selectedUser,
$scope.selectedAvailableGroups,
$scope.assignedGroups,
$scope.availableGroups,
$scope.groups
).then(compare);
};
User Service function:
(Assuming, that $().SPServices returns Promise)
var addUserToGroup = function (selectedUser, selectedAvailableGroups, assignedGroups, availableGroups, groups){
console.dir(selectedUser);
console.dir(selectedAvailableGroups);
console.dir(assignedGroups);
console.dir(availableGroups);
console.dir(groups);
var deferred = $q.defer();
var addPromise = [];
var selectLength = selectedAvailableGroups.length;
//Add user to selected groups on server
for (var i = 0; i < selectLength; i++){
addPromise[i] = $().SPServices({
operation: "AddUserToGroup",
groupName: selectedAvailableGroups[i].name,
userLoginName: selectedUser.domain
});
}
$q.all(addPromise).then(function (){
//when promise finished, push changes to availableGroups
for (var i = 0; i < selectLength; i++){
assignedGroups.push(selectedAvailableGroups[i]);
console.log(selectedUser.name + " added to: " + selectedAvailableGroups[i].name);
};
//Finish function
deferred.resolve();
});
return deferred.promise;
}

Get json object with specific condition from an array of json objects using restangular

If I am getting data from a json api (playlists.json), and the playlist object has a user_id data field, how can I get a specific playlist with user_id == 1?
I tried doing:
var playlists = Restangular.all('playlists');
playlists.getList().then(function(data) {
for(var i = 0; i < data.length; i++) {
var obj = data[i];
if(obj.user_id == 1) {
$scope.playlist = obj;
}
}
});
But I would rather not retrieve all the playlists and loop through all of them as it seems very inefficient.
Thanks in advance!

If json api represents collection of playlist you can use:
Restangular.one('user_id', 1).then(function(data) {
$scope.playlist = data;
});
But if you want preloaded list, I think there is no way but use loop

you could try something like this:
playlists.getList().then(function(data) {
angular.forEach(data, function(value, key) {
if(value.user_id == 1) {
scope.playlist = value;
return;
}
});
});