We Keep Coding

How to get values of child objects in an array of objects in javascript

states = [{
name: telangana,
cities: [{
id: 1,
name: foo
}, {
id: 2,
name: joo
}, {
id: 3,
name: goo
}]
},
{
name: punjab,
cities: [{
id: 4,
name: tyu
}, {
id: 5,
name: ery
}, {
id: 6,
name: doo
}]
},
{
name: mumbai,
cities: [{
id: 7,
name: eee
}, {
id: 8,
name: qqq
}, {
id: 9,
name: www
}]
},
]
I want response like [foo, joo, goo, tyu, ery,doo, eee,qqq,www]
Can someone help me ?

Just write one line:
Learn more about reduce() and map()
const states = [{ name: "telangana", cities: [{ id: 1, name: "foo" }, { id: 2, name: "joo" }, { id: 3, name: "goo" }] }, { name: "punjab", cities: [{ id: 4, name: "tyu" }, { id: 5, name: "ery" }, { id: 6, name: "doo" }] }, { name: "mumbai", cities: [{ id: 7, name: "eee" }, { id: 8, name: "qqq" }, { id: 9, name: "www" }] }, ];
const result = states.reduce((acc, { cities }) => [...acc, ...cities.map(({ name }) => name)], []);
console.log(result);

const getNames = (data) => {
const nameArr = [];
data.forEach((ele) => {
ele.cities.forEach((ele2) => {
nameArr.push(ele2.name);
})
})
return nameArr;
}
getNames(states);
Try this please!

states = [{
name: "telangana",
cities: [{
id: 1,
name: "foo"
}, {
id: 2,
name: "joo"
}, {
id: 3,
name: "goo"
}]
},
{
name: "punjab",
cities: [{
id: 4,
name: "tyu"
}, {
id: 5,
name: "ery"
}, {
id: 6,
name: "doo"
}]
},
{
name: "mumbai",
cities: [{
id: 7,
name: "eee"
}, {
id: 8,
name: "qqq"
}, {
id: 9,
name: "www"
}]
},
]
const wantedArray = []
for(i=0; i < states.length; i++){
for(j=0; j < states[i].cities.length; j++){
wantedArray.push(states[i].cities[j].name)
}
}
console.log(wantedArray)
Just give it an empty array, then you loop through the states indexes, each index in states will have a cities array, then you just need to loop it again in that array to get each name of the cities. From then, you are using the push method that Javascript provides to push it to the empty array.
Here's how I'm doing it in JSFiddle, there will have a better way to do this, too.

Assign new properties to an array of Objects

I have an array of Objects
const options = [
{ id: 1, name: "Back Pain" },
{ id: 2, name: "Body aches" },
{ id: 3, name: "Cold Sores" },
{ id: 4, name: "Cough" },
{ id: 5, name: "Constipation" },
];
I am trying to write a function that will assign new properties to the object.
The output I am looking for is:
const options = [
{ value: 1, label: "Back Pain" },
{ value: 2, label: "Body aches" },
{ value: 3, label: "Cold Sores" },
{ value: 4, label: "Cough" },
{ value: 5, label: "Constipation" },
];
I have tried to loop through the array using a for loop, but can not figure it out.
Thanks for the help:)

You can do it like this:
const data=[{ id: 1, name: "Back Pain" },
{ id: 2, name: "Body aches" },
{ id: 3, name: "Cold Sores" },
{ id: 4, name: "Cough" },
{ id: 5, name: "Constipation" },
];
var result = data.map(({id:value, name:label})=>({value, label}));
console.log(result);

Creating a JavaScript object that grabs each array item and collates it

I am trying to create a JavaScript object that grabs each services array in BusinessData, and then collates it as follows:
services: [
{
id: 1,
businessId: 1,
title: 'Brake Fluid Refresh'
},
{
id: 2,
businessId: 1,
title: 'Diagnostics'
},
{
id: 3,
businessId: 1,
title: 'Coolant Refresh'
},
{
id: 4,
businessId: 1
title: 'Oil Change'
},
{
id: 5,
businessId: 1,
title: 'MOT'
},
{
id: 6,
businessId: 1,
title: 'Summer Check'
},
{
id: 7,
businessId: 1,
title: 'Winter Check'
}
]
This is my code so far:
var businessData = [
{
id: 1,
categoryId: 1,
name: 'Japan Center Garage',
services: [
{
id: 1,
businessId: 1,
title: 'Brake Fluid Refresh'
},
{
id: 2,
businessId: 1,
title: 'Diagnostics'
}
]
},
{
id: 2,
categoryId: 1,
name: 'Rex Garage',
services: [
{
id: 3,
businessId: 1,
title: 'Coolant Refresh'
},
{
id: 4,
businessId: 1
title: 'Oil Change'
}
]
},
{
id: 3,
categoryId: 1,
name: 'Mission & Bartlett Garage',
services: [
{
id: 5,
businessId: 1,
title: 'MOT'
},
{
id: 6,
businessId: 1,
title: 'Summer Check'
},
{
id: 7,
businessId: 1,
title: 'Winter Check'
}
]
}
]
return {
getAllCategories: function () {
return categoryData;
},
getAllServices: function () {
var servicesData = {
services: []
};
for(var i = 0; i < businessData.length; i++) {
if(businessData[i].services) {
servicesData['services'].push(businessData[i].services)
}
}
return servicesData;
},
getAllBusinesses: function () {
return businessData;
},
}
}])
It doesn't work very well, and produced an array that I can't seem to access in my view after calling it from my controller:
<div class="item item-divider">
Service
</div>
<ion-list>
<ion-item ng-repeat="item in serviceList | orderBy:'title'">
<p>{{item.title}}</p>
</ion-item>
</ion-list>
<div ng-if="item !== undefined && !item.length" class="no-results">
<div class="item" style="border-top: 0px">
<p>No Results</p>
</div>
</div>
Update
serviceList is called from my the controller:
$scope.serviceList = ServicesData.getAllServices();
What is going wrong here?

var services = [];
businessData.forEach(function (business) {
Array.prototype.push.apply(services, business.services);
});
You are almost there, but you are pushing array of services to an array. By using Array.prototype.push.apply, we are instead pushing services to an array. Which eventually gives you the result you want :)

You can use lodash for that, and you better add it to your toolkit in general.
Here is how it will look with lodash:
_.flatMap(businessObject, (d) => d.services)
Or even
_.flatMap(businessObject, "services")
To make it little bit more verbose, you are doing map and then flatten:
var mapped = _.map(businessObject, "service")
var services = _.flatten(mapped)

load view using ng-inlude

I have to load partial view according click on list view options
i have used syncfusion listview control
also i dont have to change url in address bar...........
<div ng-controller="SidebarController">
<a id="treeView" ej-treeview e-fields-datasource="dataList" e-fields-id="id" e-fields-parentid="pid" e-fields-text="name" e-datasource="localdata" e-fields-haschild="hasChild" e-fields-expanded="expanded" e-fields-imageurl="imageUrl" e-nodeselect="selected" />
<div ng-include="viewurl"/>
here is controller code
SyncfusionDemoApp.controller('SidebarController', function ($scope, $location, $filter, CommonService) {
// alert("Sidebarcontroller");
$scope.dataList = ListViewData;
$scope.selected = function (args) {
for (var i = 0; i < UrlData.length; i += 1) {
var jsonobject = UrlData[i];
if (jsonobject.id == args.id) {
$scope.viewurl = jsonobject.url;
//$scope.show = true;
CommonService.Url = UrlData.url;
}
}
alert($scope.viewurl);
console.log($scope.viewurl);
}
});
and here is the JSON:::
var ListViewData = [
{ id: 1, name: "Fiction Book Lists", hasChild: true, expanded: true },
{ id: 2, pid: 1, name: "Fiction Book1", },
{ id: 3, pid: 1, name: "Fiction Book2" },
{ id: 4, name: "Mystery Book Lists", hasChild: true, expanded: true },
{ id: 5, pid: 4, name: "Mystery Book1" },
{ id: 6, pid: 4, name: "Mystery Book2" },
{ id: 7, name: "Horror Novels", hasChild: true },
{ id: 8, pid: 7, name: "Horror Book1" },
{ id: 9, name: "Novel Lists", hasChild: true },
{ id: 10, pid: 9, name: "Novel Book1" }];
var UrlData = [{ id: 2, pid: 1, url: '../view/fictionbooks/FictionBook1.html' },
{ id: 3, pid: 1, url: '../view/fictionbooks/FictionBook2.html' },
{ id: 5, pid: 4, url: '../view/mysterybooks/MysteryBook1.html' },
{ id: 6, pid: 4, url: "../view/mysterybooks/MysteryBook2.html" },
{ id: 8, pid: 7, url: "../view/horrorbooks/HorrorBook1.html" },
{ id: 10, pid: 9, url: "../view/novelbooks/NovelBook1.html" }];

get some parameters to selected item in typeahead bootstrap

I'm using Twitter bootstrap and I use its typeahead
I used this code :
$('#demo1').typeahead({
source:[
{ id: 1, name: 'Toronto' ,country: 'usa'},
{ id: 2, name: 'Montreal',country: 'china' },
{ id: 3, name: 'New York',country: 'usa' },
{ id: 4, name: 'Buffalo' ,country: 'china'},
{ id: 5, name: 'Boston' ,country: 'usa'},
{ id: 6, name: 'Columbus',country: 'china' },
{ id: 7, name: 'Dallas' ,country: 'italy'},
{ id: 8, name: 'Vancouver' ,country: 'turky'},
{ id: 9, name: 'Seattle' ,country: 'france'},
{ id: 10, name: 'Los Angeles' ,country: 'usa'}
],
itemSelected: displayRes
});
and this is displayRes function
function displayRes(item, val,text) {
console.log(val);
console.log(text);
$('#demo1').val('');
}
when I get in the console val : is the id of selected item & text: is the name of selected item
but how can I get the country in the function displayRes ?