JSON object return of an array of objects which contains the keys and its values

Question

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();

Answer 1

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();

Answer 2

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();

Answer 3

Follow below steps:

• Grouping input array of objects by brand and resulting with an object using Array.reduce() method.
• Structuring the output based on the reduced brand object we have.

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);