JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

JavaScript

const mock = []

for (let i = 0; i < 140; i++) {
  let manufacturerName
  let name

  if (i < 20) {
    manufacturerName = 'Audi'
    name = 'A6'
  } else if (i > 19 && i < 40) {
    manufacturerName = 'BMW'
    name = '420 GC'
  } else if (i > 19 && i < 40) {
    manufacturerName = 'Mercedes'
    name = 'AMG'
  } else if (i > 39 && i < 60) {
    manufacturerName = 'Mazda'
    name = '6'
  } else if (i > 59 && i < 80) {
    manufacturerName = 'Volvo'
    name = 'V90'
  } else if (i > 79 && i < 100) {
    manufacturerName = 'Renault'
    name = 'Model'
  } else if (i > 99 && i < 120) {
    manufacturerName = 'Lamborghini'
    name = 'Aventador'
  } else if (i > 119 && i < 140) {
    manufacturerName = 'Volkswagen'
    name = 'Golf'
  }

  mock.push({
    id: i,
    name: name,
    displayName: 'display-name ' + Math.floor(Math.random() * 10),
    manufacturer: manufacturerName,
    numberOfCars: Math.floor(Math.random() * 100000),
  })
}

const dataModel = mock.reduce((accumulator, currentValue) => {
  const key = currentValue.manufacturer

  if (accumulator[key] === undefined) {
    accumulator[key] = {
      collectionName: '',
      numberOfCars: 0,
      cars: []
    }
  }

  if (accumulator[key].collectionName === '') {
    accumulator[key].collectionName = currentValue.manufacturer
  }

  if (currentValue.numberOfCars !== undefined) {
    accumulator[key].numberOfCars += currentValue.numberOfCars
  }

  if (currentValue.numberOfCars !== undefined) {
    accumulator[key].cars.push({
      name: currentValue.name,
      numberOfCars: currentValue.numberOfCars
    })
  }

  return accumulator
}, {})

console.log(dataModel);

var filtered = _.chain(dataModel)
    .keys()
    .orderBy(k=>dataModel[k].numberOfCars, 'desc')
    .take(3)
    .reduce((coll,k)=>{
        coll[k] = _.clone(dataModel[k]);
        coll[k].cars = _.chain(coll[k].cars)
            .orderBy('numberOfCars', 'desc')
            .take(3)
            .value();
        return coll;
    }, [])
  ...