Boris has a list of all the beers available in his pub, but it's a huge mess. He would like to see the beers grouped by brands. Boris also told you that the Function should return an array of objects which contains the Brand name and an array of beer IDs of that Brand.
JSON file with data: https://challenge.codingsans.com/beers.json
Output Example:
[
{
"brand": "brandName2",
"beers": [
"beerID3",
"beerID4"
]
},
{
"brand": "brandName1",
"beers": [
"beerID2",
"beerID1"
]
}
]
//
I have done this: (So basically nothing. I just would like to get some idea how to solve it.)
request = new XMLHttpRequest;
request.open('GET', 'https://challenge.codingsans.com/beers.json', true);
var data = [];
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Date Parse
data = JSON.parse(request.responseText);
// Success!
// Arrays
var beerIDs = [];
var beerBrand = [];
// Iteration
for (var key in data) {
beerIDs.push(data[key].id);
beerBrand.push(data[key].brand);
// console.log(beerIDs);
// console.log(beerBrand);
}
console.log(beerIDs);
console.log(beerBrand);
//final list
var finalList = [];
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
Try this:
request = new XMLHttpRequest;
request.open('GET', 'https://challenge.codingsans.com/beers.json', true);
var data = [];
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Date Parse
data = JSON.parse(request.responseText);
// Success!
const organizedBeers = data.reduce((acc, beers) => {
const findIndex = acc.findIndex(beer => beer.brand === beers.brand)
if(findIndex > -1) {
acc[findIndex].beersId.push(beers.id)
} else {
acc.push({
brand: beers.brand,
beersId: [beers.id],
})
}
return acc;
}, [])
console.log(organizedBeers)
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
So basically, you can create a new array which will be final output(in our case let's say 'aBeerNBrands'). And you can push new object with required properties (like 'brand': string, ids: array) there. And then you can loop over main array(in your case :'data') element and in nested loop you can check if that brand object is present in new array('aBeerNBrands') or not, if it is present then push the id to ids array present inside aBeerNBrands's object; else create new object inside 'aBeerNBrands' with required properties. Below code works fine for your requirement.
request = new XMLHttpRequest;
request.open('GET', 'https://challenge.codingsans.com/beers.json', true);
var data = [];
request.onload = function() {
debugger;
if (request.status >= 200 && request.status < 400) {
// Date Parse
data = JSON.parse(request.responseText);
// Success!
// Arrays
var aBeerNBrands = [];
// Iteration
for (var key in data) {
if(aBeerNBrands.length > 0){
for(var key2 in aBeerNBrands){
if(aBeerNBrands[key2].brand === data[key].brand){
aBeerNBrands[key2].ids.push(data[key].id);
break;
}
if(key2 == aBeerNBrands.length - 1 && aBeerNBrands[key2].brand !== data[key].brand){
var oBrandObject = {
brand: data[key].brand,
ids: [data[key].id]
};
aBeerNBrands.push(oBrandObject);
}
}
} else{
var oBrandObject = {
brand: data[key].brand,
ids: [data[key].id]
};
aBeerNBrands.push(oBrandObject);
}
// console.log(beerIDs);
// console.log(beerBrand);
}
console.log(aBeerNBrands);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
Follow below steps :
Working Demo :
const data = [
{
"id": "ccw-1",
"name": "Coding Challenge White",
"brand": "Coding Challenge Brewery"
}, {
"id": "sw-1",
"name": "Share White",
"brand": "Share",
}, {
"id": "bspa-1",
"name": "Beer Sans Pale Ale",
"brand": "Beer Sans Brewery"
}, {
"id": "ccb-1",
"name": "Coding Challenge Brown",
"brand": "Coding Challenge Brewery"
}, {
"id": "ccw-2",
"name": "Coding Challenge Wheat",
"brand": "Coding Challenge Brewery"
}];
// result array
const resultArr = [];
// grouping by brand and resulting with an object using Array.reduce() method
const groupByBrand = data.reduce((group, item) => {
const { brand } = item;
group[brand] = group[brand] ?? [];
group[brand].push(item.id);
return group;
}, {});
// Finally structuring the output based on the brand object we have.
Object.keys(groupByBrand).forEach((item) => {
resultArr.push({
'brand': item,
'beers': groupByBrand[item]
})
})
// Result
console.log(resultArr);