How to populate dependable values into dropdown using javascript - javascript

I am trying to make a car year, make, model dependable values form. My arrays are in the following format. For the selected year and selected make, i want to populate the corresponding model value.
I have put unique year and make into separate another array. How will i achieve the intended result?
var car_arrays = [
{
id: 1,
year: 1909,
make: "Ford",
model: "Model T",
},
{
id: 2,
year: 1926,
make: "Chrysler",
model: "Imperial",
},
{
id: 3,
year: 1948,
make: "Citroën",
model: "2CV",
},
{
id: 4,
year: 1950,
make: "Hillman",
model: "Minx Magnificent",
},
{
id: 5,
year: 1953,
make: "Chevrolet",
model: "Corvette",
},
{
id: 7,
year: 1954,
make: "Cadillac",
model: "Fleetwood",
},
{
id: 6,
year: 1954,
make: "Chevrolet",
model: "Corvette",
},
{
id: 8,
year: 1955,
make: "Chevrolet",
model: "Corvette",
},
{
id: 9,
year: 1955,
make: "Ford",
model: "Thunderbird",
},
{
id: 10,
year: 1956,
make: "Chevrolet",
model: "Corvette",
},
{
id: 12,
year: 1957,
make: "BMW",
model: "600",
},
{
id: 11,
year: 1957,
make: "Chevrolet",
model: "Corvette",
},
{
id: 14,
year: 1958,
make: "BMW",
model: "600",
},
{
id: 13,
year: 1958,
make: "Chevrolet",
model: "Corvette",
},
{
id: 15,
year: 1958,
make: "Ford",
model: "Thunderbird",
},
{
id: 16,
year: 1959,
make: "Austin",
model: "Mini",
},
{
id: 18,
year: 1959,
make: "BMW",
model: "600",
},
{
id: 17,
year: 1959,
make: "Chevrolet",
model: "Corvette",
},
{
id: 19,
year: 1960,
make: "Chevrolet",
model: "Corvair",
},
{
id: 20,
year: 1960,
make: "Chevrolet",
model: "Corvette",
},
{
id: 22,
year: 1960,
make: "Fairthorpe",
model: "Rockette",
},
{
id: 21,
year: 1960,
make: "Fillmore",
model: "Fillmore",
},
{
id: 23,
year: 1961,
make: "Austin",
model: "Mini Cooper",
},
{
id: 26,
year: 1961,
make: "Chevrolet",
model: "Corvette",
},
{
id: 25,
year: 1961,
make: "Pontiac",
model: "Tempest",
},
{
id: 24,
year: 1961,
make: "Studebaker",
model: "Avanti",
},
{
id: 30,
year: 1962,
make: "Buick",
model: "Special",
},
{
id: 28,
year: 1962,
make: "Chevrolet",
model: "Corvette",
},
{
id: 27,
year: 1962,
make: "Pontiac",
model: "Grand Prix",
},
{
id: 29,
year: 1962,
make: "Studebaker",
model: "Avanti",
},
{
id: 31,
year: 1963,
make: "Austin",
model: "Mini",
},
{
id: 32,
year: 1963,
make: "Austin",
model: "Mini Cooper S",
},
{
id: 37,
year: 1963,
make: "Chevrolet",
model: "Corvair 500",
},
{
id: 38,
year: 1963,
make: "Chevrolet",
model: "Corvette",
},
{
id: 34,
year: 1963,
make: "Ford",
model: "E-Series",
},
{
id: 36,
year: 1963,
make: "Pontiac",
model: "Grand Prix",
},
{
id: 33,
year: 1963,
make: "Rambler",
model: "Classic",
},];
function getYear() {
var makeid = document.getElementById("makeid");
var select, option;
select = document.getElementById("yearid");
for (let y in year) {
option = document.createElement("option");
option.value = option.text = year[y];
select.add(option);
}
var selectyear = document.getElementById("yearid");
makeid.removeAttribute("disabled");
}
function getMake() {
var makeid, yearid, option;
makeidselect = document.getElementById("makeid");
yearidselect = document.getElementById("yearid");
for (let y in year) {
option = document.createElement("option");
option.value = option.text = year[y];
yearidselect.add(option);
console.log(yearidselect.value);
}
for (let x in make) {
option = document.createElement("option");
option.value = option.text = make[x];
makeidselect.add(option);
console.log(makeidselect.value);
}
var year = [
1909, 1926, 1948, 1950, 1953, 1954, 1955, 1956, 1957, 1958, 1959, 1960, 1961,
1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974,
1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987,
1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000,
2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013,
2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
];
var make = [
"Ford",
"Chrysler",
"Citroën",
"Hillman",
"Chevrolet",
"Cadillac",
"BMW",
"Austin",
"Fairthorpe",
"Fillmore",
"Pontiac",
"Studebaker",
"Buick",
"Rambler",
"Plymouth",
"Volkswagen",
"Jensen",
"Oldsmobile",
"Mercury",
"Dodge",
"Shelby",
"Porsche",
"Toyota",
"Mercedes-Benz",
"MG",
"Nissan",
"Honda",
"Mazda",
"Renault",
"Audi",
"Lincoln",
"Lotus",
"Maserati",
"Mitsubishi",
"Saab",
"Subaru",
"Suzuki",
"Lamborghini",
"Merkur",
"Land Rover",
"Acura",
"Lexus",
"Eagle",
"Alfa Romeo",
"Daihatsu",
"Geo",
"GMC",
"Hyundai",
"Infiniti",
"Isuzu",
"Jaguar",
"Jeep",
"Saturn",
"Volvo",
"HUMMER",
"Kia",
"Holden",
"Corbin",
"Daewoo",
"MINI",
"Maybach",
"Scion",
"Spyker",
"Aston Martin",
"Bentley",
"Panoz",
"Rolls-Royce",
"Spyker Cars",
"Ferrari",
"Hummer",
"Morgan",
"Peugeot",
"Foose",
"Aptera",
"Smart",
"Bugatti",
"Tesla",
"Ram",
"FIAT",
"Fiat",
"McLaren",
"BYD",
"McLaren Automotive",
"Mobility Ventures LLC",
"Pagani",
"Roush Performance",
"smart",
"SRT",
"Genesis",
"Karma",
"Koenigsegg",
"RUF Automobile",
"STI",
"Polestar",
"Kandi",
];

You can do something like this to populate the models dropdown
according to the values of year and make:
var CARS = [{
id: 1,
year: 1909,
make: 'Ford',
model: 'Model T',
},
{
id: 2,
year: 1926,
make: 'Chrysler',
model: 'Imperial',
},
{
id: 3,
year: 1948,
make: 'Citroën',
model: '2CV',
},
{
id: 4,
year: 1950,
make: 'Hillman',
model: 'Minx Magnificent',
},
{
id: 5,
year: 1953,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 7,
year: 1954,
make: 'Cadillac',
model: 'Fleetwood',
},
{
id: 6,
year: 1954,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 8,
year: 1955,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 9,
year: 1955,
make: 'Ford',
model: 'Thunderbird',
},
{
id: 10,
year: 1956,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 12,
year: 1957,
make: 'BMW',
model: '600',
},
{
id: 11,
year: 1957,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 14,
year: 1958,
make: 'BMW',
model: '600',
},
{
id: 13,
year: 1958,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 15,
year: 1958,
make: 'Ford',
model: 'Thunderbird',
},
{
id: 16,
year: 1959,
make: 'Austin',
model: 'Mini',
},
{
id: 18,
year: 1959,
make: 'BMW',
model: '600',
},
{
id: 17,
year: 1959,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 19,
year: 1960,
make: 'Chevrolet',
model: 'Corvair',
},
{
id: 20,
year: 1960,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 22,
year: 1960,
make: 'Fairthorpe',
model: 'Rockette',
},
{
id: 21,
year: 1960,
make: 'Fillmore',
model: 'Fillmore',
},
{
id: 23,
year: 1961,
make: 'Austin',
model: 'Mini Cooper',
},
{
id: 26,
year: 1961,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 25,
year: 1961,
make: 'Pontiac',
model: 'Tempest',
},
{
id: 24,
year: 1961,
make: 'Studebaker',
model: 'Avanti',
},
{
id: 30,
year: 1962,
make: 'Buick',
model: 'Special',
},
{
id: 28,
year: 1962,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 27,
year: 1962,
make: 'Pontiac',
model: 'Grand Prix',
},
{
id: 29,
year: 1962,
make: 'Studebaker',
model: 'Avanti',
},
{
id: 31,
year: 1963,
make: 'Austin',
model: 'Mini',
},
{
id: 32,
year: 1963,
make: 'Austin',
model: 'Mini Cooper S',
},
{
id: 37,
year: 1963,
make: 'Chevrolet',
model: 'Corvair 500',
},
{
id: 38,
year: 1963,
make: 'Chevrolet',
model: 'Corvette',
},
{
id: 34,
year: 1963,
make: 'Ford',
model: 'E-Series',
},
{
id: 36,
year: 1963,
make: 'Pontiac',
model: 'Grand Prix',
},
{
id: 33,
year: 1963,
make: 'Rambler',
model: 'Classic',
},
]
const YEARS = [
1909, 1926, 1948, 1950, 1953, 1954, 1955, 1956, 1957, 1958, 1959, 1960, 1961,
1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974,
1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987,
1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000,
2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013,
2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
]
const MAKES = [
'Ford',
'Chrysler',
'Citroën',
'Hillman',
'Chevrolet',
'Cadillac',
'BMW',
'Austin',
'Fairthorpe',
'Fillmore',
'Pontiac',
'Studebaker',
'Buick',
'Rambler',
'Plymouth',
'Volkswagen',
'Jensen',
'Oldsmobile',
'Mercury',
'Dodge',
'Shelby',
'Porsche',
'Toyota',
'Mercedes-Benz',
'MG',
'Nissan',
'Honda',
'Mazda',
'Renault',
'Audi',
'Lincoln',
'Lotus',
'Maserati',
'Mitsubishi',
'Saab',
'Subaru',
'Suzuki',
'Lamborghini',
'Merkur',
'Land Rover',
'Acura',
'Lexus',
'Eagle',
'Alfa Romeo',
'Daihatsu',
'Geo',
'GMC',
'Hyundai',
'Infiniti',
'Isuzu',
'Jaguar',
'Jeep',
'Saturn',
'Volvo',
'HUMMER',
'Kia',
'Holden',
'Corbin',
'Daewoo',
'MINI',
'Maybach',
'Scion',
'Spyker',
'Aston Martin',
'Bentley',
'Panoz',
'Rolls-Royce',
'Spyker Cars',
'Ferrari',
'Hummer',
'Morgan',
'Peugeot',
'Foose',
'Aptera',
'Smart',
'Bugatti',
'Tesla',
'Ram',
'FIAT',
'Fiat',
'McLaren',
'BYD',
'McLaren Automotive',
'Mobility Ventures LLC',
'Pagani',
'Roush Performance',
'smart',
'SRT',
'Genesis',
'Karma',
'Koenigsegg',
'RUF Automobile',
'STI',
'Polestar',
'Kandi',
]
MAKES.sort()
const yearSelection = document.getElementById('year')
const makeSelection = document.getElementById('make')
const modelSelection = document.getElementById('model')
const displayedCars = document.getElementById('cars')
for (let year of YEARS) {
const option = document.createElement('option')
option.textContent = year
option.value = year
yearSelection.appendChild(option)
}
for (let make of MAKES) {
const option = document.createElement('option')
option.textContent = make
option.value = make
makeSelection.appendChild(option)
}
const models = []
for (let car of CARS) {
const model = car.model
if (models.findIndex(m => m == model) == -1) {
const option = document.createElement('option')
option.className = 'car-model'
models.push(model)
option.textContent = model
option.value = model
modelSelection.appendChild(option)
}
}
const modelOptions = Object.values(document.querySelectorAll('.car-model'))
function populateModels() {
const selectedYear = yearSelection.value
const selectedMake = makeSelection.value
const filtered = CARS.filter(
car => car.year == selectedYear && car.make == selectedMake
)
for (let option of modelOptions) {
if (filtered.find(v => v.model == option.value)) {
option.hidden = false
} else {
option.hidden = true
}
}
if (filtered.length > 0) {
modelSelection.value = filtered[0].model
} else {
modelSelection.value = 'none'
}
}
populateModels()
yearSelection.onchange = () => populateModels()
makeSelection.onchange = () => populateModels()
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#" type="image/x-icon" />
<meta charset="UTF-8" />
</head>
<body>
<select name="" id="year"></select>
<select name="" id="make"></select>
<select name="" id="model">
<option value="none" disabled hidden>No models found</option>
</select>
</body>
<script src="main.js"></script>
</html>

you can loop through the array:
let year = [], let make = [], ....
car_arrays.forEach(car => {
year.push(car.year)
make.push(car.make) ...
})

Related

Group array of objects by two properties

I'm trying to group array of objects by two properties so I get data on two levels. This is in JavaScript - Node server.
Here is the data I'm starting with
items = [
{month: 11, year: 2022, amount: 10},
{month: 12, year: 2022, amount: 6},
{month: 11, year: 2022, amount: 7},
{month: 12, year: 2022, amount: 12},
{month: 1, year: 2023, amount: 5},
{month: 1, year: 2023, amount: 15},
{month: 11, year: 2023, amount: 30},
{month: 11, year: 2023, amount: 20}
],
I need all items from the same month and in the same year grouped together. The final result would look like this:
result = {
"2022": {
"11": [
{month: 11, year: 2022, amount: 10},
{month: 11, year: 2022, amount: 7}
],
"12": [
{month: 12, year: 2022, amount: 6},
{month: 12, year: 2022, amount: 12}
]
},
"2023": {
"11": [
{month: 11, year: 2023, amount: 30},
{month: 11, year: 2023, amount: 20}
],
"1": [
{month: 1, year: 2023, amount: 5},
{month: 1, year: 2023, amount: 15}
]
}
}
The first step is done quite easily, either through reduce or groupBy(), I've opted for groupBy() because it is cleaner:
const itemsPerYear = items.groupBy(item => { return item.year })
This gives me intermediate result:
itemsPerYear = {
"2022": [
{month: 11, year: 2022, amount: 10},
{month: 11, year: 2022, amount: 7},
{month: 12, year: 2022, amount: 6},
{month: 12, year: 2022, amount: 12}
],
"2023": [
{month: 11, year: 2023, amount: 30},
{month: 11, year: 2023, amount: 20},
{month: 1, year: 2023, amount: 5},
{month: 1, year: 2023, amount: 15}
]
}
So if I apply similar logic and go with:
const itemsPerMonth = Object.values(itemsPerYear).groupBy(item => { return item.month })
I get:
[Object: null prototype] {
undefined: [
[ [Object], [Object], [Object], [Object] ],
[ [Object], [Object], [Object], [Object] ]
]
}
I get a step closer with ForEach:
const itemsPerMonth = Object.values(itemsPerYear).forEach(sub => { console.log(sub) })
I get:
[
{month: 11, year: 2022, amount: 10},
{month: 11, year: 2022, amount: 7},
{month: 12, year: 2022, amount: 6},
{month: 12, year: 2022, amount: 12}
],
[
{month: 11, year: 2023, amount: 30},
{month: 11, year: 2023, amount: 20},
{month: 1, year: 2023, amount: 5},
{month: 1, year: 2023, amount: 15}
]
If I want to use groupBy() inside the ForEach() I get undefined.
Thanks
Here is a quick solution using a .reduce():
const input = [ {month: 11, year: 2022, amount: 10}, {month: 12, year: 2022, amount: 6}, {month: 11, year: 2022, amount: 7}, {month: 12, year: 2022, amount: 12}, {month: 1, year: 2023, amount: 5}, {month: 1, year: 2023, amount: 15}, {month: 11, year: 2023, amount: 30}, {month: 11, year: 2023, amount: 20} ];
const result = input.reduce((acc, obj) => {
if(!acc[obj.year]) acc[obj.year] = {};
if(!acc[obj.year][obj.month]) acc[obj.year][obj.month] = [];
acc[obj.year][obj.month].push(obj);
return acc;
}, {});
console.log('result:', result);
Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

React table - format data to create subRows

I'm using react-table to create an expandible table.
In that example data are in this format:
[
{
"firstName": "wheel",
"lastName": "arch",
"age": 29,
"visits": 39,
"progress": 87,
"status": "single",
"subRows": [
{
"firstName": "singer",
"lastName": "paper",
"age": 24,
"visits": 35,
"progress": 55,
"status": "complicated",
"subRows": [
{
"firstName": "professor",
"lastName": "beam",
"age": 22,
"visits": 14,
"progress": 84,
"status": "single"
}, {...}
]
},
]
}
{
"firstName": "elevator",
"lastName": "contribution",
"age": 26,
"visits": 74,
"progress": 28,
"status": "relationship",
"subRows": [
{
"firstName": "debt",
"lastName": "honey",
"age": 3,
"visits": 31,
"progress": 31,
"status": "relationship"
}, {...}
]
},
{
"firstName": "cup",
"lastName": "media",
"age": 8,
"visits": 77,
"progress": 37,
"status": "single",
"subRows": undefined
}
]
So an array of objects and each object has a property subRows that can be undefinedd or an array of objects.
I've a flat dataset, so an array of objects and I want to recreate the above structure grouping by a property.
For example, this is my dataset:
const data = [
{animal: 'cat', name: 'mu', year: 2016},
{animal: 'cat', name: 'muji', year: 2021},
{animal: 'cat', name: 'mine', year: 2021},
{animal: 'dog', name: 'fido', year: 2000},
{animal: 'hamster', name: 'gerry', year: 2020},
{animal: 't-rex', name: 'dino', year: 2020},
{animal: 'sheep', name: 's', year: 2019},
{animal: 'sheep', name: 'sss', year: 2016},
]
and I would like that the animal column is expandible. How can I do?
I try groupBy by Lodash but obviously it's not the good method here.
const result = [
{animal: 'cat', name: 'mu', year: 2016},
{animal: 'cat', name: 'muji', year: 2021},
{animal: 'cat', name: 'mine', year: 2021},
{animal: 'dog', name: 'fido', year: 2000},
{animal: 'hamster', name: 'gerry', year: 2020},
{animal: 't-rex', name: 'dino', year: 2020},
{animal: 'sheep', name: 's', year: 2019},
{animal: 'sheep', name: 'sss', year: 2016},
].reduce(function (acc, obj) {
const x = acc.findIndex((entity)=>entity.animal===obj.animal);
if(x!== -1){
acc[x].subrows.push(obj)
}else{
const xx= {'animal':obj.animal,subrows:[obj]}
acc.push(xx)
}
return acc;
}, [])
console.log(result)

How can I join an object with arrays into a single array using javascript?

This is what I have (wealthByDistribution) and I require a solution like (expectedArray).
const wealthByDistribution = {
CheckingAccount: [
{
"year": 2016,
"month": 4,
"value": 10
},
{
"year": 2016,
"month": 5,
"value": 0
},
{
"year": 2016,
"month": 6,
"value": 0
},
{
"year": 2016,
"month": 7,
"value": 0
}
],
Company: [
{
"year": 2016,
"month": 4,
"value": 0
},
{
"year": 2016,
"month": 5,
"value": 0
},
{
"year": 2016,
"month": 6,
"value": 0
},
{
"year": 2016,
"month": 7,
"value": 110
}
],
InvestmentAccount: [
{
"year": 2016,
"month": 4,
"value": 0
},
{
"year": 2016,
"month": 5,
"value": 0
},
{
"year": 2016,
"month": 6,
"value": 0
},
{
"year": 2016,
"month": 7,
"value": 220
}
],
InvestmentInsurance: [
{
"year": 2016,
"month": 4,
"value": 0
},
{
"year": 2016,
"month": 5,
"value": 0
},
{
"year": 2016,
"month": 6,
"value": 0
},
{
"year": 2016,
"month": 7,
"value": 330
}
],
Loan: [
{
"year": 2016,
"month": 4,
"value": 0
},
{
"year": 2016,
"month": 5,
"value": 0
},
{
"year": 2016,
"month": 6,
"value": 0
},
{
"year": 2016,
"month": 7,
"value": 0
}
],
PassionAssets: [
{
"year": 2016,
"month": 4,
"value": 0
},
{
"year": 2016,
"month": 5,
"value": 0
},
{
"year": 2016,
"month": 6,
"value": 0
},
{
"year": 2016,
"month": 7,
"value": 0
}
]
}
const returnExpectedArray = (wealthByDistribution) => {
const expectedArray = []
return expectedArray
}
const expectedArray = [
{
"year": 2016,
PassionAssets: 0,
Loan: 0,
InvestmentInsurance: 0,
InvestmentAccount: 0,
CheckingAccount: 10,
Company: 0,
"month": 4,
"value": 0
},
{
"year": 2016,
PassionAssets: 0,
Loan: 0,
InvestmentInsurance: 0,
InvestmentAccount: 0,
CheckingAccount: 0,
Company: 0,
"month": 5,
"value": 0
},
{
"year": 2016,
PassionAssets: 0,
Loan: 0,
InvestmentInsurance: 0,
InvestmentAccount: 0,
CheckingAccount: 0,
Company: 0,
"month": 6,
"value": 0
},
{
"year": 2016,
PassionAssets: 0,
Loan: 0,
InvestmentInsurance: 330,
InvestmentAccount: 220,
CheckingAccount: 0,
Company: 110,
"month": 7,
"value": 0
}
]
Please if anyone can help me, I have been trying to solve it out for quite some time. I tried the following code, but it did not work as expected.
const wealthByDistributionKeys = Object.keys(wealthByDistribution);
const [ key, ...rest ] = wealthByDistributionKeys;
const firstArray = wealthByDistribution[key] || [];
const expectedArray = firstArray.map((item, i) => {
item[key] = item.value;
return Object.assign({}, item, ...rest.map(r => {
wealthByDistribution[r][i][r] = wealthByDistribution[r][i].value;
return wealthByDistribution[r][i];
}));
});
By using corresponding keys, you could collect all value with year/month and get a combined result.
const
wealthByDistribution = { CheckingAccount: [{ year: 2016, month: 4, value: 10 }, { year: 2016, month: 5, value: 0 }, { year: 2016, month: 6, value: 0 }, { year: 2016, month: 7, value: 0 }], Company: [{ year: 2016, month: 4, value: 0 }, { year: 2016, month: 5, value: 0 }, { year: 2016, month: 6, value: 0 }, { year: 2016, month: 7, value: 110 }], InvestmentAccount: [{ year: 2016, month: 4, value: 0 }, { year: 2016, month: 5, value: 0 }, { year: 2016, month: 6, value: 0 }, { year: 2016, month: 7, value: 220 }], InvestmentInsurance: [{ year: 2016, month: 4, value: 0 }, { year: 2016, month: 5, value: 0 }, { year: 2016, month: 6, value: 0 }, { year: 2016, month: 7, value: 330 }], Loan: [{ year: 2016, month: 4, value: 0 }, { year: 2016, month: 5, value: 0 }, { year: 2016, month: 6, value: 0 }, { year: 2016, month: 7, value: 0 }], PassionAssets: [{ year: 2016, month: 4, value: 0 }, { year: 2016, month: 5, value: 0 }, { year: 2016, month: 6, value: 0 }, { year: 2016, month: 7, value: 0 }] },
result = Object.values(Object
.entries(wealthByDistribution)
.reduce((r, [k, a]) => {
a.forEach(({ year, month, value }) => {
const key = [year, month].join('|');
r[key] ??= { year, month };
r[key][k] = value;
});
return r;
}, {})
);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Conversion of data in javascript

I have the following type of data assigned to var dataTransformation, which I'm taking from the user in apache superset using metric.
{country: "Afghanistan", region: "South Asia", year: 1960, value: 91.779}
{country: "Afghanistan", region: "South Asia", year: 1961, value: 91.492}
{country: "Afghanistan", region: "South Asia", year: 1962, value: 91.195}
{country: "Bangladesh", region: "South Asia", year: 1960, value: 94.865}
{country: "Bangladesh", region: "South Asia", year: 1961, value: 94.722}
{country: "Bangladesh", region: "South Asia", year: 1962, value: 94.502}
{country: "Canada", region: "North America", year: 1960, value: 30.939}
{country: "Canada", region: "North America", year: 1961, value: 30.332}
{country: "Canada", region: "North America", year: 1962, value: 29.506}
But I want to convert it into the below format. I tried it using the array map function, loops, and string concatenation but it is not efficient. Is there any way to do it in javascript?
{
"South Asia": [
["Afghanistan", 91.779, 91.492, 91.195],
["Bangladesh", 94.865, 94.722, 94.502],
],
"North America":[
["Canada", 30.939, 30.332, 29.506],
],
}
I'm expecting a guide on how to do it, not fully working code.
const data = [{
country: "Afghanistan",
region: "South Asia",
year: 1960,
value: 91.779
},{
country: "Afghanistan",
region: "South Asia",
year: 1961,
value: 91.492
},{
country: "Afghanistan",
region: "South Asia",
year: 1962,
value: 91.195
},{
country: "Bangladesh",
region: "South Asia",
year: 1960,
value: 94.865
},{
country: "Bangladesh",
region: "South Asia",
year: 1961,
value: 94.722
},{
country: "Bangladesh",
region: "South Asia",
year: 1962,
value: 94.502
},{
country: "Canada",
region: "North America",
year: 1960,
value: 30.939
},{
country: "Canada",
region: "North America",
year: 1961,
value: 30.332
},{
country: "Canada",
region: "North America",
year: 1962,
value: 29.506
}];
const res = data.reduce((acc, {country, region, year, value}) => {
acc = {
...acc,
[region]: {
...acc[region],
[country]: !acc?.[region]?.[country] ? [value] : acc[region][country].concat(value)
}
}
return acc;
}, { });
console.log(res);
const data = [
{ country: "Afghanistan", region: "South Asia", year: 1960, value: 91.779 },
{ country: "Afghanistan", region: "South Asia", year: 1961, value: 91.492 },
{ country: "Afghanistan", region: "South Asia", year: 1962, value: 91.195 },
{ country: "Bangladesh", region: "South Asia", year: 1960, value: 94.865 },
{ country: "Bangladesh", region: "South Asia", year: 1961, value: 94.722 },
{ country: "Bangladesh", region: "South Asia", year: 1962, value: 94.502 },
{ country: "Canada", region: "North America", year: 1960, value: 30.939 },
{ country: "Canada", region: "North America", year: 1961, value: 30.332 },
{ country: "Canada", region: "North America", year: 1962, value: 29.506 },
];
const transformation = data.reduce((acc, curr) => {
const { country, region, year, value } = curr;
if (!acc[region]) {
acc[region] = [];
acc[region].push([country, value]);
return acc;
}
let isCountryExist = false;
acc[region].forEach((el) => {
if (el.includes(country)) {
isCountryExist = true;
el.push(value);
}
});
if (!isCountryExist) {
acc[region].push([country, value]);
}
return acc;
}, {});
console.log(transformation);
Assuming that dataTransformation is an Array, the first step should be converting it to an object of regions containing objects with the countries as keys and arrays as values. This would keep the time complexity of this task at the minimum:
const dataTransformation = [
{country: "Afghanistan", region: "South Asia", year: 1960, value: 91.779},
{country: "Afghanistan", region: "South Asia", year: 1961, value: 91.492},
{country: "Afghanistan", region: "South Asia", year: 1962, value: 91.195},
{country: "Bangladesh", region: "South Asia", year: 1960, value: 94.865},
{country: "Bangladesh", region: "South Asia", year: 1961, value: 94.722},
{country: "Bangladesh", region: "South Asia", year: 1962, value: 94.502},
{country: "Canada", region: "North America", year: 1960, value: 30.939},
{country: "Canada", region: "North America", year: 1961, value: 30.332},
{country: "Canada", region: "North America", year: 1962, value: 29.506}
];
const dataTransformationObject = dataTransformation.reduce((o, i) => {
o[i.region] = o[i.region] || {};
o[i.region][i.country] = o[i.region][i.country] || [];
o[i.region][i.country].push(i.value);
return o;
},{});
console.log(dataTransformationObject);
The previous code will return this object:
{
"South Asia": {
"Afghanistan": [
91.779,
91.492,
91.195
],
"Bangladesh": [
94.865,
94.722,
94.502
]
},
"North America": {
"Canada": [
30.939,
30.332,
29.506
]
}
}
And I strongly recommend you to use it directly in this way. Why? because to access to data > region > country, you can do it directly: e.g, data['North America']['Canada'][0] is 30.939. Otherwise you would need to iterate in the array of regions to find a country, and that would not be optimal.
But if you still need the output that you requested in your answer, you can transform the previous object to achieve it:
const dataTransformation = [
{country: "Afghanistan", region: "South Asia", year: 1960, value: 91.779},
{country: "Afghanistan", region: "South Asia", year: 1961, value: 91.492},
{country: "Afghanistan", region: "South Asia", year: 1962, value: 91.195},
{country: "Bangladesh", region: "South Asia", year: 1960, value: 94.865},
{country: "Bangladesh", region: "South Asia", year: 1961, value: 94.722},
{country: "Bangladesh", region: "South Asia", year: 1962, value: 94.502},
{country: "Canada", region: "North America", year: 1960, value: 30.939},
{country: "Canada", region: "North America", year: 1961, value: 30.332},
{country: "Canada", region: "North America", year: 1962, value: 29.506}
];
const dataTransformationObject = dataTransformation.reduce((o, i) => {
o[i.region] = o[i.region] || {};
o[i.region][i.country] = o[i.region][i.country] || [];
o[i.region][i.country].push(i.value);
return o;
},{});
const final = Object.entries(dataTransformationObject).reduce((o, e) => {
o[e[0]] = Object.keys(e[1]).map((c) => [c, ...e[1][c]]);
return o;
}, {});
console.log(final);
Which will give you the desired output:
{
"South Asia": [
[
"Afghanistan",
91.779,
91.492,
91.195
],
[
"Bangladesh",
94.865,
94.722,
94.502
]
],
"North America": [
[
"Canada",
30.939,
30.332,
29.506
]
]
}

Trimming a date in an object from an array and sorting the array by most recent date

I have an array of objects and I need to trim the created_at value and return the full array of objects descending by most recent created_at value.
I can perform the sort as desired but my code only returns the create_at value, not the entire object in that sorted order
How do I alter the map function so that I don't isolate the created_at value?
var notes = [
{
country: "Angola",
denomination: 50,
currency: "Kwanzas",
issue_date: 2012,
created_at: "2017-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Rwanda",
denomination: 5000,
currency: "Francs",
issue_date: 2009,
created_at: "2008-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Serbia",
denomination: 50,
currency: "Dinara",
issue_date: 2011,
created_at: "2015-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Moldova",
denomination: 20,
currency: "Lei",
issue_date: 2013,
created_at: "2009-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Liberia",
denomination: 10,
currency: "Dollars",
issue_date: 2010,
created_at: "1998-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Kazakhstan",
denomination: 500,
currency: "Tenge",
issue_date: 2019,
created_at: "2001-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
}
]
var dateMap = notes.map(note => note.created_at.substring(0,10)).sort().reverse()
The correct result would be:
dateMap = [
{
country: "Angola",
denomination: 50,
currency: "Kwanzas",
issue_date: 2012,
created_at: "2017-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Serbia",
denomination: 50,
currency: "Dinara",
issue_date: 2011,
created_at: "2015-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Moldova",
denomination: 20,
currency: "Lei",
issue_date: 2013,
created_at: "2009-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Rwanda",
denomination: 5000,
currency: "Francs",
issue_date: 2009,
created_at: "2008-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Kazakhstan",
denomination: 500,
currency: "Tenge",
issue_date: 2019,
created_at: "2001-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Liberia",
denomination: 10,
currency: "Dollars",
issue_date: 2010,
created_at: "1998-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
]
Provide your own comparator:
const byDate = note => note.created_at.substring(0,10);
notes.sort((a, b) => byDate(b).localeCompare(byDate(a)));
Seems all you are needing is a sort which you can do by comparing the property values in sort function
notes.sort((a, b) => b.created_at.localeCompare(a.created_at))
console.log(notes)
<script>
var notes = [{
country: "Angola",
denomination: 50,
currency: "Kwanzas",
issue_date: 2012,
created_at: "2017-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Rwanda",
denomination: 5000,
currency: "Francs",
issue_date: 2009,
created_at: "2008-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Serbia",
denomination: 50,
currency: "Dinara",
issue_date: 2011,
created_at: "2015-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Moldova",
denomination: 20,
currency: "Lei",
issue_date: 2013,
created_at: "2009-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Liberia",
denomination: 10,
currency: "Dollars",
issue_date: 2010,
created_at: "1998-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
},
{
country: "Kazakhstan",
denomination: 500,
currency: "Tenge",
issue_date: 2019,
created_at: "2001-07-20T18:41:15.000Z",
updated_at: "2019-07-20T18:41:15.000Z"
}
]
</script>

Categories

Resources