преобразование в пары ключ значение

#javascript #reactjs

Вопрос:

Это тот объект, который у меня есть

     const upToPaidCost = [ { 'Labour Cost': '54000' }, { 'Material Cost': '24900' } ];
    let arr = [];


    for (const [key, value] of Object.entries(...upToPaidCost)) {
        arr.push({ key: key, value: value });
    }
    console.log(upToPaidCost)
    console.log(arr);
 

Ожидаемый результат :

     [
        {
          key: "Labour Cost",
          value: 54000
        },
        {
          key: "Material Cost",
          value: 24900
        }
    ]
 

Он показывает только первое значение ключа, второе отсутствует, что я здесь делаю не так?

Ответ №1:

Проблема в том, Object.entries что требуется один объект, а у вас их множество. Вот почему вам нужны две петли здесь:

 const upToPaidCost = [ { 'Labour Cost': '54000' }, { 'Material Cost': '24900' } ];
let arr = [];


for (const obj of upToPaidCost) {
    for (const [key, value] of Object.entries(obj)) {
        arr.push({key, value});
    }
}

console.log(arr); 

или два вложенных map s:

 arr = upToPaidCost.flatMap(obj =>
    Object.entries(obj).map(([key, value]) => ({key, value})))
 

Ответ №2:

Как я вижу, каждый элемент в исходном массиве является объектом. Таким образом, вы можете сделать это вместо повторения.

Кроме того, в соответствии с ожидаемым результатом значение-это число. Таким образом, вы можете выполнять приведение от строки к числу следующим образом.

 const upToPaidCost = [ { 'Labour Cost': '54000' }, { 'Material Cost': '24900' } ];

const result = upToPaidCost.map(o => {
  const [key, value] = Object.entries(o)[0];
  return {key, value:  value};
});
console.log(result); 

Ответ №3:

Для этого вы можете использовать следующий код

 const upToPaidCost = [ { 'Labour Cost': '54000' }, { 'Material Cost': '24900' } ];
let arr = [];

const updatedArr = upToPaidCost.map((item)=>{
  return {"key":Object.keys(item)[0],"value":item[Object.keys(item)[0]]}
})



console.log(updatedArr) 

Протестируйте по этой ссылке https://replit.com/join/taxflvkp-gauthamjm007

Комментарии:

1. К вашему сведению, вы можете создавать исполняемые фрагменты прямо здесь.

Ответ №4:

Мне нравится, чтобы мои коды были более читабельными. Альтернативный ответ.

 const upToPaidCost = [ { 'Labour Cost': '54000' }, { 'Material Cost': '24900' } ];
let arr = [];

const final = upToPaidCost.map((item)=>{
  const key = Object.keys(item)[0]
  return { key, value: item[key] }
})

console.log(final) 

Ответ №5:

Object.entries(...upToPaidCost) равно Object.entries({ 'Labour Cost': '54000' }) , поэтому результат неверен.

Сначала нам нужно объединить объекты с помощью метода reduce:

 const upToPaidCost = [{ "Labour Cost": "54000" }, { "Material Cost": "24900" }];
let arr = [];
const conbineObj = upToPaidCost.reduce(
  (res, item) => ({ ...res, ...item }),
  {}
);
for (const [key, value] of Object.entries(conbineObj)) {
  arr.push({ key: key, value: value });
}
console.log(upToPaidCost);
console.log(arr)
 

Ответ №6:

Почему ваш фрагмент кода работает именно так?

В этой строке

 for (const [key, value] of Object.entries(...upToPaidCost))
 

Вы распространяете upToPaidCost , а затем просите Object.entries вернуть его в виде массива.

так что технически это выглядит так :

 Object.entries({ 'Labour Cost': '54000' }, { 'Material Cost': '24900' })
 

как вы видите, вы передаете 2 объекта(аргумента) в Object.entries , которые принимают только один из них (первый)

Таким образом, эта строка будет интерпретироваться следующим образом

 for (const [key, value] of [['Labour Cost': '54000']])`
 

Как исправить фрагмент кода?

вы могли бы заменить Object.entries(...upToPaidCost) на Object.entries(upToPaidCost) так Object.entries , чтобы получить только один простой аргумент

а затем в цикле for вы можете переместить каждый объект в arr

вы можете проверить это здесь:

 const upToPaidCost = [ { 'Labour Cost': '54000' }, { 'Material Cost': '24900' } ];
    let arr = [];

    for (const [arrayindex, innerObject] of Object.entries(upToPaidCost)) {
        arr.push(innerObject);
    }
    console.log(upToPaidCost);
    console.log(arr); 

Как вы можете видеть, значения по-прежнему являются строковыми, если вы готовы превратить их в число, вы можете получить ключ и значение, создать новые объекты и подтолкнуть их к arr следующему:

 const upToPaidCost = [ { 'Labour Cost': '54000' }, { 'Material Cost': '24900' } ];
let arr = [];

        for (const [upToPaidCostIndex, innerObject] of Object.entries(upToPaidCost)) {
            const key = Object.keys(innerObject)[0];
            const value = Object.values(innerObject)[0];
            
            arr.push({[key] :  value});
        }
        console.log(upToPaidCost);
        console.log(arr); 

Лучшее решение

 const upToPaidCost = [ { 'Labour Cost': '54000' }, { 'Material Cost': '24900' } ];
const upToPaidCosts = upToPaidCost.reduce((res, item) => ({...item, ...res}), {});
const arr = Object.entries(upToPaidCosts).map(([key, value]) => ({[key]:  value}))


console.log(upToPaidCost);
console.log(arr); 

Ответ №7:

Вот Object.entries(...upToPaidCost) уберите …
Воспользуйся… когда вы хотите скопировать такой объект, как: const x = {...upToPaidCost};
Или использовать Object.entries({...upToPaidCost}) для вашего случая