Develop Reference

Comparing 2 arrays of nested objects while ignoring some properties in Javascript

I'm looking to check an API response for against a set of values but the API response contains some additional info that I'm not interested in checking against
Data to check:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
}
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "45 Headrow",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 287
},
"detail": {
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.87"
}
}
]
API response:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
So I'm not interested in what values are returned for dbIdentifier, designAndCondition and developmentCompletionDate as they are not in my data to check against but I would like to compare the values for the rest of the properties. In practice these arrays will have more than 2 items
I was initially thinking I would remove the unwanted properties from the objects using the function below
const newArray = responseBody.map(({ dbIdentifierIdentifier, detail: { designAndCondition, developmentCompletionDate }, ...rest }) => rest)
Then ordering by address.uniqueIdentifier, converting to JSON strings and comparing the strings but the function above doesn't work with the nested properties as newArray doesn't contain the detail object at all
newArray:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
IS it possible to do it the above way by passing a destructured nested object a map function?

One way to remove the unwanted properties from the API response would be to first copy the response into a new array (to preserve the original response), then delete the properties:
const apiResponse = [{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
let apiResponseCopy = JSON.parse(JSON.stringify(apiResponse))
var newArray = apiResponseCopy.map(i => {
delete i.dbIdentifier
delete i.detail.designAndCondition
delete i.detail.developmentCompletionDate
return i
})
console.log(newArray)
Then, you should be able to compare the newArray against your data.

Create parent child structure from array of objects and list of dimension in javascript

I got sales data from mysql table group by state,city and product.
I used bellow query to get the data from MySql table
select state,city,product,sales from salesTable group by state,city,product;
And got bellow output from query,
[
{
"state": "S1",
"city": "CITY1",
"product": "P1",
"sales": 1000
},
{
"state": "S1",
"city": "CITY2",
"product": "P1",
"sales": 2000
},
{
"state": "S1",
"city": "CITY1",
"product": "P2",
"sales": 2000
},
{
"state": "S2",
"city": "CITY1",
"product": "P1",
"sales": 1000
},
{
"state": "S2",
"city": "CITY2",
"product": "P1",
"sales": 2000
},
{
"state": "S2",
"city": "CITY2",
"product": "P2",
"sales": 2000
},
{
"state": "S3",
"city": "CITY1",
"product": "P2",
"sales": 1000
},
{
"state": "S3",
"city": "CITY2",
"product": "P2",
"sales": 2000
}
]
Now I want to create parent child structure from dimensions=["state","city","product"]
where state is grand parent, city is parent(child of state) and product is child.
Where dimensions array should be dynamic, it might increase or decrease in length.
I need bellow output,
[
{
"sales": 5000,
"state": "S1",
"children": [
{
"sales": 3000,
"state": "S1",
"city": "CITY1",
"children": [
{
"sales": 1000,
"state": "S1",
"city": "CITY1",
"product": "P1"
},
{
"sales": 2000,
"state": "S1",
"city": "CITY1",
"product": "P2"
}
]
},
{
"sales": 2000,
"state": "S1",
"city": "CITY2",
"children": [
{
"sales": 2000,
"state": "S1",
"city": "CITY2",
"children": [
{
"sales": 2000,
"state": "S1",
"city": "CITY2",
"product": "P1"
}
]
}
]
}
]
},
{
"sales": 5000,
"state": "S2",
"children": [
{
"sales": 1000,
"state": "S2",
"city": "CITY1",
"children": [
{
"sales": 1000,
"state": "S2",
"city": "CITY1",
"product": "P1"
}
]
},
{
"sales": 4000,
"state": "S2",
"city": "CITY2",
"children": [
{
"sales": 4000,
"state": "S2",
"city": "CITY2",
"children": [
{
"sales": 2000,
"state": "S2",
"city": "CITY2",
"product": "P1"
},
{
"sales": 2000,
"state": "S2",
"city": "CITY2",
"product": "P2"
}
]
}
]
}
]
},
{
"sales": 3000,
"state": "S3",
"children": [
{
"sales": 1000,
"state": "S3",
"city": "CITY1",
"children": [
{
"sales": 1000,
"state": "S3",
"city": "CITY1",
"product": "P2"
}
]
},
{
"sales": 2000,
"state": "S3",
"city": "CITY2",
"children": [
{
"sales": 2000,
"state": "S3",
"city": "CITY2",
"children": [
{
"sales": 2000,
"state": "S3",
"city": "CITY2",
"product": "P2"
}
]
}
]
}
]
}
]

Maybe something like this. On the first iteration, we build the tree with temporal objects instead of arrays for easier distribution. On the second recursive iteration, we make arrays from temporal objects and calculate sales.
For unification, the topmost level also uses .children key and its .sales overall sum. This can be ignored by using result.children instead of result at the end.
const data = [
{ state: 'S1', city: 'CITY1', product: 'P1', sales: 1000 },
{ state: 'S1', city: 'CITY2', product: 'P1', sales: 2000 },
{ state: 'S1', city: 'CITY1', product: 'P2', sales: 2000 },
{ state: 'S2', city: 'CITY1', product: 'P1', sales: 1000 },
{ state: 'S2', city: 'CITY2', product: 'P1', sales: 2000 },
{ state: 'S2', city: 'CITY2', product: 'P2', sales: 2000 },
{ state: 'S3', city: 'CITY1', product: 'P2', sales: 1000 },
{ state: 'S3', city: 'CITY2', product: 'P2', sales: 2000 },
];
const dimensions = ['state', 'city', 'product'];
const childKey = dimensions[dimensions.length - 1];
const result = { children: Object.create(null) };
for (const entry of data) {
let parrent = null;
let current = result.children;
for (const dimension of dimensions) {
let slot = current[entry[dimension]];
if (!slot) {
slot = current[entry[dimension]] = Object.create(null);
slot.sales = dimension === childKey ? entry.sales : 0;
if (parrent) {
for (const [k, v] of Object.entries(parrent)) {
if (k !== 'children' && k !== 'sales') slot[k] = v;
}
}
slot[dimension] = entry[dimension];
if (dimension !== childKey) {
slot.children = Object.create(null);
}
}
parrent = slot;
current = slot.children;
}
}
normalizeAndSum(result, null);
console.log(JSON.stringify(result, null, ' '));
function normalizeAndSum(object, parent) {
if (object.children) {
object.children = Object.values(object.children);
for (const child of object.children) normalizeAndSum(child, object);
}
if (parent) {
parent.sales = parent.children.reduce((acc, { sales }) => acc + sales, 0);
}
}

Javascript grouping [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I'm receiving data from an Angular service as follow:
{
"data": [
{
"country": "Germany",
"iso": "de",
"city": "Berlin",
"zone": "2",
},
{
"country": "Germany",
"iso": "de",
"city": "Frankfurt",
"zone": "5",
},
{
"country": "USA",
"iso": "us",
"city": "Chicago",
"zone": "18",
},
{
"country": "USA",
"iso": "us",
"city": "New York",
"zone": "16",
},
{
"country": "USA",
"iso": "us",
"city": "San Francisco",
"zone": "54",
}
}
I would like to transform these data so I can use the AutoComplete PrimeNG widget which require the following data format as input:
groupedByCountry = [
{
label: 'Germany', value: 'de',
items: [
{label: 'Berlin', value: '2'},
{label: 'Frankfurt', value: '5'}
]
},
{
label: 'USA', value: 'us',
items: [
{label: 'Chicago', value: '18'},
{label: 'New York', value: '16'},
{label: 'San Francisco', value: '54'}
]
}
];
I'm not doing JavaScript on a daily basis and haven't be able to do this transformation so far. If someone could assist it would be appreciated

this should work:
let input = JSON.parse(`[
{
"country": "Germany",
"iso": "de",
"city": "Berlin",
"zone": "2"
},
{
"country": "Germany",
"iso": "de",
"city": "Frankfurt",
"zone": "5"
},
{
"country": "USA",
"iso": "us",
"city": "Chicago",
"zone": "18"
},
{
"country": "USA",
"iso": "us",
"city": "New York",
"zone": "16"
},
{
"country": "USA",
"iso": "us",
"city": "San Francisco",
"zone": "54"
}
]`)
const res = Object.values(input.reduce((acc, el)=>{
if(!acc[el.country]){
acc[el.country] = {
label: el.country,
value: el.iso,
items: [
{
label: el.city,
value: el.zone
}
]
}
} else {
acc[el.country].items.push({
label: el.city,
value: el.zone
})
}
return acc;
}, {}))
console.log(res)
in few words:
create a Map like country -> object
for each element of the array, if in the map that country already exists, then just push the new element, otherwise create it

How to convert the objects inside an array into a specific format

I have an API which is formatted like:
[
{
"id": 4,
"code": "IN",
"name": "India",
"recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80",
"updatedBy": "Sini "
},
{
"id": 59,
"code": "UK",
"name": "United Kingdom",
"recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D",
"updatedBy": "sinju "
}
]
I need to convert it into this format:
localizedData = [
{
text: "India",
value: 4
},
{
text: "United Kingdom",
value: 59
}
];
How can I do that?

Assuming you want to map name property to text, and id property to value.
const source = [
{
"id": 4,
"code": "IN",
"name": "India",
"recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80",
"updatedBy": "Sini "
},
{
"id": 59,
"code": "UK",
"name": "United Kingdom",
"recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D",
"updatedBy": "sinju "
}
];
const localizedData = source.map(item => ({text: item.name, value: item.id}));
console.log(localizedData )
Learning about the Array.prototype.map() will help you next time.

It will help you-----
var results = data;
var arr = [], item;
for (var i = 0, len = results.length; i < len; i++) {
item = results[i];
arr.push({username: item.username, description: item.description,
name:
item.name});
}

Say your result array is:
const res = { "id": 4, "code": "IN", "name": "India", "recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80", "updatedBy": "Sini " }, { "id": 59, "code": "UK", "name": "United Kingdom", "recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D", "updatedBy": "sinju " } }
All you need to do is:
const res2 = res.map(a => ({text: a.name, value: a.id}));
That should work

You can try this.
const data = [
{
"id": 4,
"code": "IN",
"name": "India",
"recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80",
"updatedBy": "Sini "
},
{
"id": 59,
"code": "UK",
"name": "United Kingdom",
"recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D",
"updatedBy": "sinju "
}
];
const localizedData = [];
for(i=0;i< data.length;i++){
localizedData.push({text : data[i].name, value : data[i].id})
}
console.log(localizedData)

Try this :
Solution 1 :
var jsonObj = [
{
"id": 4,
"code": "IN",
"name": "India",
"recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80",
"updatedBy": "Sini "
},
{
"id": 59,
"code": "UK",
"name": "United Kingdom",
"recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D",
"updatedBy": "sinju "
}
];
jsonObj.map((obj) => {
obj["value"] = obj["id"];
obj["text"] = obj["name"];
delete obj.id;
delete obj.code;
delete obj.name;
delete obj.recordVersion;
delete obj.updatedBy;
});
console.log(jsonObj);
Solution 2 :
const jsonObj = [
{
"id": 4,
"code": "IN",
"name": "India",
"recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80",
"updatedBy": "Sini "
},
{
"id": 59,
"code": "UK",
"name": "United Kingdom",
"recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D",
"updatedBy": "sinju "
}
];
const res = [];
for (var i of jsonObj) {
res.push({value : i.id, text : i.name});
}
console.log(res);

Tooltip in highmaps is not working .Unable to show the data from the json onto the highmap

I am displaying US map with categorized areas . The map is coming fine but I am unable to display the values from Json file using tooltip in Highmap.
This is my code:
$.getJSON('../production/UsMapData/UsaMapData.json', function (data) {
$.each(data, function () {
this.code = this.code.toUpperCase();
});
Highcharts.mapChart('geoMap', {
chart: {
type: 'map'
},
title: {
text: 'US'
},
legend: {
enabled: true
},
/* plotOptions: {
map: {
allAreas: false,
joinBy: ['hc-a2', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['iso-a2'];
}
},
format: null,
style: {
fontWeight: 'bold'
}
},
mapNavigation: {
enabled: true,
enableButtons: false
},
mapData: Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},*/
plotOptions: {
map: {
allAreas: false,
animation: true,
joinBy: ['postal-code','code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
formatter: function () {
// if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
console.log(this.point.code);
// return this.point.properties['hc-a2'];
return this.point.code;
// }
},
format: '{point.code}',
style: {
fontWeight: 'bold'
}
},
data:data,
mapData:Highcharts.maps['countries/us/us-all'],
tooltip: {
headerFormat: '',
pointFormat: '{point.state}: <b>{point.views}</b>'
}
}
},
mapNavigation: {
enabled: true,
enableButtons: false
},
cursor: 'pointer',
series: [{
name: 'NorthEast',
data: $.map(['AL', 'AK', 'AR', 'AZ','CA','CO','CT'], function (code) {
return { code:code };
}),
},{
name: 'MidWest',
enabled: false,
data: $.map(['DE', 'DC', 'FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD'], function (code) {
return { code: code };
})
}, {
name: 'SouthWest',
enabled: false,
data: $.map(['MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY'], function (code) {
return { code: code };
})
}, {
name: 'SouthEast',
enabled: false,
data: $.map(['NC','ND','OH','OK','OR','PA'], function (code) {
return { code: code };
})
}, {
name: 'West',
enabled: false,
data: $.map(['RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY'], function (code) {
return { code: code };
})
}]
});
});
This is the Json file :
[
{
"code": "al",
"state": "Alabama",
"views": -22.19
},
{
"code": "ak",
"state": "Alaska",
"views": -22.19
},
{
"code": "az",
"state": "Arizona",
"views": -9.06
},
{
"code": "ar",
"state": "Arkansas",
"views": -23.69
},
{
"code": "ca",
"state": "California",
"views": 23.12
},
{
"code": "co",
"state": "Colorado",
"views": 5.37
},
{
"code": "ct",
"state": "Connecticut",
"views": 17.33
},
{
"code": "de",
"state": "Delaware",
"views": 18.63
},
{
"code": "dc",
"state": "District of",
"views": 83.63
},
{
"code": "",
"state": "ColumbiaDistrict of Columbia",
"views": ""
},
{
"code": "fl",
"state": "Florida",
"views": 0.88
},
{
"code": "ga",
"state": "Georgia",
"views": -7.82
},
{
"code": "hi",
"state": "Hawaii",
"views": 42.71
},
{
"code": "id",
"state": "Idaho",
"views": -31.91
},
{
"code": "il",
"state": "Illinois",
"views": 16.87
},
{
"code": "in",
"state": "Indiana",
"views": -10.2
},
{
"code": "ia",
"state": "Iowa",
"views": 5.81
},
{
"code": "ks",
"state": "Kansas",
"views": -21.72
},
{
"code": "ky",
"state": "Kentucky",
"views": -22.69
},
{
"code": "la",
"state": "Louisiana",
"views": -17.21
},
{
"code": "me",
"state": "Maine (at-large)",
"views": 15.29
},
{
"code": "md",
"state": "Maryland",
"views": 26.08
},
{
"code": "ma",
"state": "Massachusetts",
"views": 23.14
},
{
"code": "mi",
"state": "Michigan",
"views": 9.5
},
{
"code": "mn",
"state": "Minnesota",
"views": 7.69
},
{
"code": "ms",
"state": "Mississippi",
"views": -11.5
},
{
"code": "mo",
"state": "Missouri",
"views": -9.38
},
{
"code": "mt",
"state": "Montana",
"views": -13.65
},
{
"code": "ne",
"state": "Nebraska",
"views": -21.78
},
{
"code": "nv",
"state": "Nevada",
"views": 6.68
},
{
"code": "nh",
"state": "New Hampshire",
"views": 5.58
},
{
"code": "nj",
"state": "New Jersey",
"views": 17.81
},
{
"code": "nm",
"state": "New Mexico",
"views": 10.15
},
{
"code": "ny",
"state": "New York",
"views": 28.18
},
{
"code": "nc",
"state": "North Carolina",
"views": -2.04
},
{
"code": "nd",
"state": "North Dakota",
"views": -19.63
},
{
"code": "oh",
"state": "Ohio",
"views": 2.98
},
{
"code": "ok",
"state": "Oklahoma",
"views": -33.54
},
{
"code": "or",
"state": "Oregon",
"views": 12.09
},
{
"code": "pa",
"state": "Pennsylvania",
"views": 5.39
},
{
"code": "ri",
"state": "Rhode Island",
"views": 27.46
},
{
"code": "sc",
"state": "South Carolina",
"views": -10.47
},
{
"code": "sd",
"state": "South Dakota",
"views": -18.02
},
{
"code": "tn",
"state": "Tennessee",
"views": -20.4
},
{
"code": "tx",
"state": "Texas",
"views": -15.78
},
{
"code": "ut",
"state": "Utah",
"views": -48.04
},
{
"code": "vt",
"state": "Vermont",
"views": 35.6
},
{
"code": "va",
"state": "Virginia",
"views": 3.87
},
{
"code": "wa",
"state": "Washington",
"views": 14.87
},
{
"code": "wv",
"state": "West Virginia",
"views": -26.76
},
{
"code": "wi",
"state": "Wisconsin",
"views": 6.94
},
{
"code": "wy",
"state": "Wyoming",
"views": -40.82
}
]
The map is working as expected with the categorized areas but the main thing is I am unable to display the json data.

Currently your series data is set as:
data: $.map(['NC','ND','OH','OK','OR','PA'], function (code) {
return { code: code };
})
Which means the data is just an array of objects containing only the code variable. The views (from the json object) is never put into your series data, and thus never contained in the resulting Point after the joinBy.
Essentially you have to also include the views, for example by greping instead of maping. For example using a helper function:
function getAreasByCode(arrayOfData, arrayOfCodes) {
return $.grep(arrayOfData, function(entry) {
return arrayOfCodes.indexOf(entry.code) >= 0;
});
}
And the the new series data specification:
data: getAreasByCode(data, ['AL', 'AK', 'AR', 'AZ','CA','CO','CT'])
See this JSFiddle example of it in action.