Получить значения из объектов в массив

Question

У меня есть следующий объект:

export const data = {
  tasks: {
    "Cleaning": {
        personA: 1,
        personB: 0.5,
        personC: 0.1,
        personD: 0,
    },
    "Washing": {
        personA: 1,
        personB: 0.5,
        personC: 0.1,
        personD: 0,
    },
    "Something else": {
        personA: 1,
        personB: 0.3,
        personC: 0.2,
        personD: 0.3,
    },
  }
}

Теперь я хочу получить четыре массива, которые содержат все значения для каждого человека:

person A = [1, 1, 1]
person B = [0.5, 0.5, 0.3]
person C = [0.1, 0.2, 0.3]
person D = [0, 0, 0.3]

Я уже пробовал некоторые подходы сObject.values() но я полностью застрял на данный момент.Как мне этого добиться?

Answer 1

const data = {
  tasks: {
    'Cleaning': {
      personA: 1,
      personB: 0.5,
      personC: 0.1,
      personD: 0,
    },
    'Washing': {
      personA: 1,
      personB: 0.5,
      personC: 0.1,
      personD: 0,
    },
    'Something else': {
      personA: 1,
      personB: 0.3,
      personC: 0.2,
      personD: 0.3,
    },
  }
}

const getValues = (person, dataBlob) => {
  return Object.entries(dataBlob.tasks).map(
    task => {
      return task[1][`${person}`]
    }
  )
}
const personA = getValues('personA', data)
const personB = getValues('personB', data)
const personC = getValues('personC', data)
const personD = getValues('personD', data)

console.log('personA: \n', personA)
console.log('personB: \n', personB)
console.log('personC: \n', personC)
console.log('personD: \n', personD)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

Существует множество способов добиться этого, используя старый добрый JavaScript. Ниже я добиваюсь этого, используя метод Array.prototype.reduce и циклическую конструкцию for...in для сортировки данных в структуру типа карты (которая на самом деле является просто объектом с ключом ID человека).

После сортировки данных я использую деструктуризацию ES6, чтобы разделить мои map на отдельные переменные, а затем записываю литерал массива с этими значениями. Есть и другие способы сделать это.

const data = {
  tasks: {
    "Cleaning": {
      personA: 1,
      personB: 0.5,
      personC: 0.1,
      personD: 0,
    },
    "Washing": {
      personA: 1,
      personB: 0.5,
      personC: 0.1,
      personD: 0,
    },
    "Something else": {
      personA: 1,
      personB: 0.3,
      personC: 0.2,
      personD: 0.3,
    },
  }
}

//iterate over the values and sort them by key
var map = Object.values(data.tasks).reduce((accum, element) => {
  for (key in element) {
    if (!accum[key]) {
      accum[key] = [element[key]]
    } else {
      accum[key].push(element[key])
    }
  }
  return accum;
}, {});

//destructure the map into variables
var {
  personA,
  personB,
  personC,
  personD
} = map;

//put them into an array
console.log([personA, personB, personC, personD]);

Answer 3

Вот что я буду рекомендовать.

tasks= {
    "Cleaning": {
        personA: 1,
        personB: 0.5,
        personC: 0.1,
        personD: 0,
    },
    "Washing": {
        personA: 1,
        personB: 0.5,
        personC: 0.1,
        personD: 0,
    },
    "Something else": {
        personA: 1,
        personB: 0.3,
        personC: 0.2,
        personD: 0.3,
    },
  }
  var personA =[];
  var personB =[];
  var personC =[];
  var personD =[];

  Object.keys(tasks).map(function(item, index){      
    personA.push(tasks[item].personA)
    personB.push(tasks[item].personB)
    personC.push(tasks[item].personC)
    personD.push(tasks[item].personD)   
  })
 
    console.log(personA)
    console.log(personB)
    console.log(personC)
    console.log(personD)

Answer 4

Вы можете использовать Array.reduce() и Array.forEach() для создания объекта данных по человеку, а затем деструктурировать его:

const data = {"tasks":{"Cleaning":{"personA":1,"personB":0.5,"personC":0.1,"personD":0},"Washing":{"personA":1,"personB":0.5,"personC":0.1,"personD":0},"Something else":{"personA":1,"personB":0.3,"personC":0.2,"personD":0.3}}};

const result = Object.values(data.tasks).reduce((r, o) => {
  Object.entries(o).forEach(([k, v]) => {
    const target = r[k] || (r[k] = []);
    target.push(v);
  });
  
  return r;
}, {});

const { personA, personB, personC, personD } = result;

console.log(personA);
console.log(personB);
console.log(personC);
console.log(personD);

Answer 5

Вы можете сделать карту, используя Object.keys(). Он используется для отображения объектов, как массив.

const data = {
  tasks: {
    "Cleaning": {
      personA: 1,
      personB: 0.5,
      personC: 0.1,
      personD: 0,
    },
    "Washing": {
      personA: 1,
      personB: 0.5,
      personC: 0.1,
      personD: 0,
    },
    "Something else": {
      personA: 1,
      personB: 0.3,
      personC: 0.2,
      personD: 0.3,
    },
  }
}

const personA = [];
const personB = [];
const personC = [];
const personD = [];

Object.keys(data.tasks).map(function(key, index) {
  personA.push(data.tasks[key]["personA"]);
  personB.push(data.tasks[key]["personB"]);
  personC.push(data.tasks[key]["personC"]);
  personD.push(data.tasks[key]["personD"]);
});

console.log(personA)
console.log(personB)
console.log(personC)
console.log(personD)

Answer 6

Принимая равное количество людей на задачу:

const data = {
  tasks: {
    "Cleaning": {
        personA: 1,
        personB: 0.5,
        personC: 0.1,
        personD: 0,
    },
    "Washing": {
        personA: 1,
        personB: 0.5,
        personC: 0.1,
        personD: 0,
    },
    "Something else": {
        personA: 1,
        personB: 0.3,
        personC: 0.2,
        personD: 0.3,
    },
  }
}

const tasks = Object.keys(data.tasks);

const result = Object.keys(data.tasks[tasks[0]]).reduce((acc, curr) => ({
  ...acc,
  [curr]: tasks.map(key => data.tasks[key][curr]),
}), {});

console.log(result);