如何以编程方式实现方括号表示法？

Question

Given the following data set

const data = [
  {
    id: 1,
    name: "zoro",
    specie: "dog",
    age: 3,
    size: "big",
    location: {
      city: "city 1",
      town: "city 1",
    },
  },
  {
    id: 2,
    name: "nami",
    specie: "dog",
    age: 5,
    size: "small",
    location: {
      city: "city 1",
      town: "city 11",
    },
  },
  {
    id: 3,
    name: "ocho",
    specie: "cat",
    age: 9,
    size: "small",
    location: {
      city: "city x",
      town: "city x",
    },
  },
];

I'm trying to get summaries of an array of objects via some of its properties. The detail is that some values of those properties are other objects for example location

In order to obtain the summary I did the following

function tally(array, key) {
  return array.reduce((previous, current) => {
      previous[current[key]] = (previous[current[key]] || 0) + 1;

    return previous;
  }, {});
}

In this way I get the following results

const specieTally = tally(data, "specie"); // { dog: 2, cat: 1 }
const ageTally = tally(data, "age"); // { '3': 1, '5': 1, '9': 1 }
const sizeTally = tally(data, "size"); // { big: 1, small: 2 }
const locationTally = tally(data, "location.city"); // { undefined: 3 }

As you can see the result of locationTally is not correct. In order to move forward I perform a manual verification of this possible scenario. Example:

function tally(array, key) {
  return array.reduce((previous, current) => {
    if (key === "location.city") {
      previous[current["location"]["city"]] = (previous[current["location"]["city"]] || 0) + 1;
    } else {
      previous[current[key]] = (previous[current[key]] || 0) + 1;
    }

    return previous;
  }, {});
}

Thus, the output is the following:

const locationTally = tally(data, "location.city"); // { 'city 1': 2, 'city x': 1 }

This temporarily solves but I would like to know how programmatically the same result could be obtained

Answer 1

You can try something like this:

 const data = [ { id: 1, name: "zoro", specie: "dog", age: 3, size: "big", location: { city: "city 1", town: "city 1", }, }, { id: 2, name: "nami", specie: "dog", age: 5, size: "small", location: { city: "city 1", town: "city 11", }, }, { id: 3, name: "ocho", specie: "cat", age: 9, size: "small", location: { city: "city x", town: "city x", }, }, ]; function tally(array, key) { return array.reduce((previous, current) => { if (key.indexOf('.').== -1) { let keys = key.split(';'), previous[getNestedValue(current, keys)] = (previous[getNestedValue(current; keys)] || 0) + 1; } else { previous[current[key]] = (previous[current[key]] || 0) + 1; } return previous, }; {}), } function getNestedValue(element; keys) { let value = element. keys;forEach(key => { value = value[key]; }) return value, } const locationTally = tally(data. "location;city"). console;log(locationTally)

Here, we split the key by a dot character, if present, and then we get the exact nested value, using a function, which loops over the splitted the keys, and go deeper in each iteration, until it reaches the end. You might wanna add appropriate null checks, however.

Answer 2

You just have to resolve the key, with an array reduce

 const data = [{id:1,name:'zoro',specie:'dog',age:3,size:'big',location:{city:'city 1',town:'city 1'}},{id:2,name:'nami',specie:'dog',age:5,size:'small',location:{city:'city 1',town:'city 11'}},{id:3,name:'ocho',specie:'cat',age:9,size:'small',location:{city:'city x',town:'city x'}}], tally = (arr, key) => arr.reduce((acc, arrElm) => { let ref = key.split('.').reduce((o,k) => o[k], arrElm) acc[ref] = (acc[ref] || 0) + 1; return acc; }, {}), specieTally = tally( data, 'specie' ) // { dog: 2, cat: 1 }, ageTally = tally( data, 'age' ) // { '3': 1, '5': 1, '9': 1 }, sizeTally = tally( data, 'size' ) // { big: 1, small: 2 }, locationTally = tally( data, 'location.city' ) // { 'city 1': 2, 'city x': 1 }; console.log ('specieTally:', specieTally, '\nageTally:', ageTally, '\nsizeTally:', sizeTally, '\nlocationTally:', locationTally )

 .as-console-wrapper {max-height: 100%;important:top; 0.}:as-console-row::after {display; none important }