Develop Reference

Create a 2 level json Array using Angular Js

I need to contruct a Json with 2 parts first of all I need to obtain a name of companies from an ApiRest it returns a Json with the name of the companies and a parameter that contains an address for each company that have de members of the company. The Json that I need to construct is something like this:`
[
{name: Company1,
members:
{ member1:
{
name: albert,
age: 16
},
member2:
{
name:joan,
age:18
}
}
},
{name: Company2,
members:
{ member1:
{
name: albert,
age: 16
},
member2:
{
name:joan,
age:18
}
}
}
]
The firts api rest is http://api1.getcompanyies and return :
[{
"_links": {
"url": {
"href": "http://api.company.members/1"
}
},
"name": "Company1",
},
{
"_links": {
"url": {
"href": "http://api.company.members/2"
}
},
"name": "Company2",
}, {
"_links": {
"url": {
"href": "http://api.company.members/3"
}
},
"name": "Company3"}
The second api Rest Response is:
{"employes": [
{
"name": "Mickael Ciani",
"age": "16"
},
{
"name": "Albert dd",
"age": "18"
}
]}
first I tried to do with nested $http but don't works:
$http(firstApi)
.then(function(res) {
$scope.ob = {};
angular.forEach(res.data.teams, function(value, key) {
var companyName = value.name;
$scope.ob[companyName] = {};
$scope.ob[companyName].memberUrl = alue._links.url.href;
$scope.teams2.push(value.name);
$http(paramsPlayers)
.then(function(res2) {
// construct the array
},
function() {}
);
});
return $scope;
},
function() {}
);
Then i tried to do without nested http but still don't work because the contruction of first object is incorrect , i think
$http(firstApi)
.then(function(res) {
$scope.ob = {};
angular.forEach(res.data.teams, function(value, key) {
var companyName = value.name;
$scope.ob[companyName] = {};
$scope.ob[companyName].memberUrl = alue._links.url.href;
$scope.teams2.push(value.name);
});
return $scope;
},
function() {}
);
$http(2apiparams)
.then(function(res2) {
//construct final json
},
function() {}
);
Thank You For all

You have to use $q.all for this scenario. I have written a angular service named CompanyService and a test implementation for the same. Hope this helps. You can use this service in your application. Take a look at promise chaining to get more idea on the implementation
var testData = {
companies: [{
"_links": {
"url": {
"href": "http://api.company.members/1"
}
},
"name": "Company1"
}, {
"_links": {
"url": {
"href": "http://api.company.members/2"
}
},
"name": "Company2"
}, {
"_links": {
"url": {
"href": "http://api.company.members/3"
}
},
"name": "Company3"
}],
memebers: {
"employes": [{
"name": "Mickael Ciani",
"age": "16"
},
{
"name": "Albert dd",
"age": "18"
}
]
}
};
angular.module('app', [])
.factory('CompanyService', function($http, $q) {
var COMPANY_API = 'your company api url';
var service = {};
service.getCompanies = function() {
//comment this for real implementation
return $q.when(testData.companies);
//uncomment this for real api
//return $http.get(COMPANY_API);
};
service.getMemebers = function(url) {
//comment this for real implementation
return $q.when(testData.memebers);
//uncomment this for real api
//return $http.get(url);
};
service.getAll = function() {
return service.getCompanies()
.then(function(companies) {
var promises = companies.map(function(company) {
return service.getMemebers(company._links.url.href);
});
return $q.all(promises)
.then(function(members) {
return companies.map(function(c, i) {
return {
name: c.name,
members: members[i].employes
};
});
});
});
};
return service;
})
.controller('SampleCtrl', function($scope, CompanyService) {
$scope.companies = [];
CompanyService.getAll()
.then(function(companies) {
$scope.companies = companies;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="SampleCtrl">
<pre>{{ companies | json }}</pre>
</div>

How to hide object property to display using angular ng-model?

I want to hide _id to display on UI using ng-model , I see alot of examples of filtering data using ng-repeat but i did not find angular solution to achieve this task using ng-model.How can hide _id property to display ?
main.html
<div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" ></div>
Ctrl.js
$scope.obj.data = {
"_id": "58a3322bac70c63254ba2a9c",
"name": "MailClass",
"id": "MailTask_1",
"createdBy": "tyuru",
"__v": 0,
"properties": [{
"label": "Java Package Name",
"type": "String",
"editable": true,
"binding": {
"type": "property",
"name": "camunda:class"
},
"$$hashKey": "object:29"
}],
"appliesTo": [
"bpmn:ServiceTask"
]
}
var json = {};
function loadCurrentUserAndTemplate() {
AuthService.getCurrentUser()
.then(function(resp) {
$scope.currentUser = resp.data.id;
// console.log($scope.currentUser);
userTemplate($scope.currentUser);
});
}
loadCurrentUserAndTemplate();
$scope.obj = {
data: json,
options: {
mode: 'tree'
}
};
var privateFields = removePrivateFields($scope.obj.data, ['_id', '__v']);
// add private fields back to $scope.obj.data before POST
var modifiedData = Object.assign({}, $scope.obj.data, privateFields);
function removePrivateFields(obj, props) {
var output = {};
props.forEach(function(prop) {
if (obj.hasOwnProperty(prop)) {
output[prop] = obj[prop];
delete obj[prop];
}
});
return output;
}
function userTemplate(user) {
// console.log('inside template',$scope.currentUser);
templateService.getUserTemplates(user)
.then(function(response) {
// console.log('userTemplate',response.data);
// console.log(response.data.length);
$scope.displayedTemplates = response.data;
if (response.data.length !== 0 && response.data !== null) {
$scope.obj.data = response.data[0];
}
}

you can create a function like removePrivateFields to strip the private fields from original object and attach them back to the modified object before submitting to server
// for testing
var $scope = { obj: {} };
var jsonData = {
"_id": "58a3322bac70c63254ba2a9c",
"name": "MailClass",
"id": "MailTask_1",
"createdBy": "tyuru",
"__v": 0,
"properties": [{
"label": "Java Package Name",
"type": "String",
"editable": true,
"binding": {
"type": "property",
"name": "camunda:class"
},
"$$hashKey": "object:29"
}],
"appliesTo": [
"bpmn:ServiceTask"
]
};
var privateFields = removePrivateFields(jsonData, ['_id', '__v']);
// private fields got removed form actual jsonData
$scope.obj.data = jsonData;
console.log($scope.obj.data);
// once edit
// add private fields back to $scope.obj.data before POST
var modifiedData = Object.assign({}, $scope.obj.data, privateFields);
console.log(modifiedData);
function removePrivateFields(obj, props) {
var output = {};
props.forEach(function(prop) {
if (obj.hasOwnProperty(prop)) {
output[prop] = obj[prop];
delete obj[prop];
}
});
return output;
}

It would be both more performant and along Angular best practices to instead delegate this functionality into your controller or the service fetching the object.
Ideally, you want to perform any object manipulation or formatting within an Angular service, but you could also do it within your controller (probably fine if you're just instantiating your JSON editor with mock data).

Covert object to array of combinations/objects

Using lodash or underscore. I'm trying to convert this object:
{
"variations": {
"versions": ["sport", "generic"],
"devices": ["mobile", "tablet"]
}
}
to this:
var variations = [{
"version": "sport",
"device": "mobile"
}, {
"version": "sport",
"device": "tablet"
}, {
"version": "generic",
"device": "mobile"
}, {
"version": "generic",
"device": "tablet"
}];
What's the best/shortest method to do this?

Not sure with lodash or undesrcore. But with simple jquery i have done this. take a look.
var object={
"variations": {
"versions": ["sport", "generic"],
"devices": ["mobile", "tablet"]
}
};
var variations=[];
$.each(object.variations.versions, function(i, j) {
$.each(object.variations.devices, function(k, l) {
variations.push({version:j,device:l});
});
});

I think you wanna set object key to new variable name and do combinations of inside object values.
<script type="text/javascript">
//here I created two object keys for more clear
var json ={
"variations": {
"versions": ["sport", "generic"],
"devices": ["mobile", "tablet"]
},
"another_variations": {
"versions": ["sport", "generic"],
"devices": ["mobile", "tablet"]
}
};
for(var i in json){
window[i] = []; //here window[variable] will make global variable
ver = Object.keys(json[i])[0];//Object.keys(json[i]) get object keys ~["versions","devices"]
dev = Object.keys(json[i])[1];
window[i].push(
{
[ver]:json[i].versions[0],
[dev]:json[i].devices[0]
},
{
[ver]:json[i].versions[0],
[dev]:json[i].devices[1]
},
{
[ver]:json[i].versions[1],
[dev]:json[i].devices[0]
},
{
[ver]:json[i].versions[1],
[dev]:json[i].devices[1]
});
}
console.log(variations); //here can call object key as a variable name if you
console.log(another_variations);//don't use `window[variable]` in above, this will print undefined error
</script>

Found a solution using: https://gist.github.com/wassname/a882ac3981c8e18d2556
_.mixin({
cartesianProductOf: function(args) {
if (arguments.length > 1) args = _.toArray(arguments);
// strings to arrays of letters
args = _.map(args, opt => typeof opt === 'string' ? _.toArray(opt) : opt)
return _.reduce(args, function(a, b) {
return _.flatten(_.map(a, function(x) {
return _.map(b, function(y) {
return _.concat(x, [y]);
});
}), true);
}, [
[]
]);
},
cartesianProductObj: function(optObj) {
var keys = _.keys(optObj);
var opts = _.values(optObj);
var combs = _.cartesianProductOf(opts);
return _.map(combs, function(comb) {
return _.zipObject(keys, comb);
});
}
});
See working:
https://jsfiddle.net/rickysullivan/5ryf9jsa/

Sorting data in MemoryStore (or any arbitrary data array)

Does Dojo hat any utilities for sotring the data within MemoryStore, or optionally, within any data collection?
I'd need all data from the MemoryStore, but sorted by single evt. more columns. Something like Collections.sort in Java...
I'd expect Store to have sort function, but I couldn't find anything in the documentation.

The dojo/store API allows sorting data at query time only, as far as I know. For example:
var store = new Memory({
data: [{
"firstName": "Bird",
"name": "Schultz"
}, {
"firstName": "Brittany",
"name": "Berg"
}, {
"firstName": "Haley",
"name": "Good"
}, {
"firstName": "Randolph",
"name": "Phillips"
}, {
"firstName": "Bernard",
"name": "Small"
}, {
"firstName": "Leslie",
"name": "Wynn"
}, {
"firstName": "Mercado",
"name": "Singleton"
}, {
"firstName": "Esmeralda",
"name": "Huber"
}, {
"firstName": "Juanita",
"name": "Saunders"
}, {
"firstName": "Beverly",
"name": "Clemons"
}]
});
console.log("Alphabetically by first name:");
store.query({}, {
sort: [{
attribute: "firstName",
descending: false
}]
}).forEach(function(person) {
console.log(person.firstName + " " + person.name);
});
You can provide multiple sort attributes as well.
Full example can be found on JSFiddle: http://jsfiddle.net/9HtT3/

When we sort our Data, we do this actual before the Items are stored. We take the filtered Values that are saved in an array and use array.sort()and called inside a function SortByName or SortByNumbers
looks like this:
function streetsToCombobox(results){
var adress;
var values = [];
var testVals={};
var features = results.features;
require(["dojo/_base/array","dojo/store/Memory","dijit/registry","dojo/domReady!"], function(array,Memory,registry){
if (!features[0]) {
alert(noDataFound);
}
else {
array.forEach(features, function(feature, i){
adress = feature.attributes.STRASSE;
if (!testVals[adress]) {
testVals[adress] = true;
values.push({
name: adress
});
}
});
values.sort(SortByName);
var dataItems = {
identifier: 'name',
label: 'name',
items: values
};
storeStreet = new Memory({
data: dataItems
});
//fill existing Combobox ID,NAME,VALUE,SEARCHATTR,ONCHANGE,STORENAME,COMBOBOX
fillExistingCombobox(
"adrSearchSelectCB",
"adrSearchSelectCBName",
"",
"name",
getAdresses,
storeStreet,
registry.byId("adrSearchSelectCBId")
);
}
});
}
function SortByName(x,y) {
return ((x.name == y.name) ? 0 : ((x.name > y.name) ? 1 : -1 ));
}
Maybe this brings some Ideas to you how to solve your Question.
Regards, Miriam

How to return and array inside a JSON object in Angular.js

Imagine the following JSON API:
[
{
"id": "1",
"name": "Super Cateogry",
"products": [
{
"id": "20",
"name": "Teste Product 1"
},
{
"id": "21",
"name": "Teste Product 2"
},
{
"id": "22",
"name": "Teste Product 3"
}
]
}
]
Is there anyway for me to only return the products array with Angularjs?
I have a simple service calling the JSON:
services.factory("ProductService", function($http) {
return {
"getProducts": function() {
return $http.get("/product/index");
}
};
});
That is being called in the controller like so:
components.success(function(data) {
$scope.products = data;
});
But it returns the whole JSON as expected, I need it to return only the "products" array so I can iterate through it.
PS: This is merely a simple example to illustrate the problem, I realize that I could change the API to fit my needs in this case, but that's not the point.

You would just assign the products array to your scope property...
components.success(function(data) {
$scope.products = data[0].products;
});

You could customize it via a promise, and do it yourself.
"getProducts": function() {
var promise = $q.defer();
$http.get("/product/index").success(function(data){
promise.resolve(data && data.products);
}).error(function(msg){
promise.reject(msg);
})
return promise.promise;
}
How to use:
getProducts().then(
function(data) {
$scope.products = data;
},
function(msg){
alert('error')
}
);