How to obliterate an array element in JavaScript

Question

How to obliterate an array element in JavaScript

Hello everyone, I am faced with an array of objects that I need to destructure. Below is a snippet from the array:

[
  {
    "Area": "Werk Produktivität [%] - Target",
    "Jan": 86.21397507374327,
    "Feb": 86.0570021973368,
    "Mrz": 88.70898346258058,
    "Apr": 85.29801908413164,
    "May": 85.07431241640211
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Jan": 84.17054711398421,
    "Feb": 83.80826026601528,
    "Mrz": 84.11553769971036,
    "Apr": 83.76460916731,
    "May": 82.69773876702813
  }
]

My goal now is to split the array into the following sections:

[
  {
    "Area": "Werk Produktivität [%] - Target",
    "Jan": 86.21397507374327

  },
  {
    "Area": "Werk Produktivität [%] - Target",
    "Feb": 86.0570021973368,
   
  },
  ...

My initial approach was to utilize the ...rest parameter in this way, but it only retrieves the last 5 items of the array. Note that 'obj' represents the object excerpt displayed above.

const fn = ({ Area, ...rest }) =>
  Object.values(rest)
    .map(Month => ({
      Area,
      Month
    }))
       


})
const result = fn(obj)

javascript arrays json object

Answer 1

Answer №1

If you want to achieve the same result, you can utilize the combination of reduce and Object.entries:

const info = [
  {
    "Area": "Productivity Area [%] - Target",
    "Jan": 86.21397507374327,
    "Feb": 86.0570021973368,
    "Mar": 88.70898346258058,
    "Apr": 85.29801908413164,
    "May": 85.07431241640211
  },
  {
    "Area": "Productivity Area [%] - Actual",
    "Jan": 84.17054711398421,
    "Feb": 83.80826026601528,
    "Mar": 84.11553769971036,
    "Apr": 83.76460916731,
    "May": 82.69773876702813
  }
]
const output  = info.reduce((result, {Area, ...remaining}) => {
  Object.entries(remaining).forEach(([key, value]) => result.push({Area, [key]: value}))
  return result
}, [])
console.log(output)

Answer 2

If you want to achieve the same result, you can utilize the combination of reduce and Object.entries:

const info = [
  {
    "Area": "Productivity Area [%] - Target",
    "Jan": 86.21397507374327,
    "Feb": 86.0570021973368,
    "Mar": 88.70898346258058,
    "Apr": 85.29801908413164,
    "May": 85.07431241640211
  },
  {
    "Area": "Productivity Area [%] - Actual",
    "Jan": 84.17054711398421,
    "Feb": 83.80826026601528,
    "Mar": 84.11553769971036,
    "Apr": 83.76460916731,
    "May": 82.69773876702813
  }
]
const output  = info.reduce((result, {Area, ...remaining}) => {
  Object.entries(remaining).forEach(([key, value]) => result.push({Area, [key]: value}))
  return result
}, [])
console.log(output)

Answer 3

Answer №2

To create the desired object, you can utilize the Array.prototype.reduce function along with the Array.prototype.map function nested inside.

const arr = [  {    "Area": "Werk Produktivität [%] - Target",    "Jan": 86.21397507374327,    "Feb": 86.0570021973368,    "Mrz": 88.70898346258058,    "Apr": 85.29801908413164,    "May": 85.07431241640211  },  {    "Area": "Werk Produktivität [%] - Actual",    "Jan": 84.17054711398421,    "Feb": 83.80826026601528,    "Mrz": 84.11553769971036,    "Apr": 83.76460916731,    "May": 82.69773876702813  }];
const result = arr.reduce((a, {Area, ...months}) => {
  return [...a, ...Object.entries(months).map(([month, value]) => ({Area, [month]: value}))];
}, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

To create the desired object, you can utilize the Array.prototype.reduce function along with the Array.prototype.map function nested inside.

const arr = [  {    "Area": "Werk Produktivität [%] - Target",    "Jan": 86.21397507374327,    "Feb": 86.0570021973368,    "Mrz": 88.70898346258058,    "Apr": 85.29801908413164,    "May": 85.07431241640211  },  {    "Area": "Werk Produktivität [%] - Actual",    "Jan": 84.17054711398421,    "Feb": 83.80826026601528,    "Mrz": 84.11553769971036,    "Apr": 83.76460916731,    "May": 82.69773876702813  }];
const result = arr.reduce((a, {Area, ...months}) => {
  return [...a, ...Object.entries(months).map(([month, value]) => ({Area, [month]: value}))];
}, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 5

Answer №3

Uncertain about the role of obj in the expression result = fn(obj) here. It seems like you are applying map to the array and extracting the first item from the resulting 2D array. Simply utilize flatMap on the array with fn as the callback function.

const output = inputArray.flatMap(fn)

or

const output = inputArray.map(fn).flat()

In addition, the function fn requires some adjustments. You should access the entries of the rest object as both the key and value are necessary.

Object.entries(rest)
      .map(([key, value]) => ({ Area, [key]: value }))

const input = [
  {
    "Area": "Werk Produktivität [%] - Target",
    "Jan": 86.21397507374327,
    "Feb": 86.0570021973368,
    "Mrz": 88.70898346258058,
    "Apr": 85.29801908413164,
    "May": 85.07431241640211
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Jan": 84.17054711398421,
    "Feb": 83.80826026601528,
    "Mrz": 84.11553769971036,
    "Apr": 83.76460916731,
    "May": 82.69773876702813
  }
]

const fn = ({ Area, ...rest }) =>
  Object.entries(rest)
    .map(([key,value]) => ({
      Area,
      [key]: value
    }))

const output = input.flatMap(fn)

console.log(output)

Answer 6

Uncertain about the role of obj in the expression result = fn(obj) here. It seems like you are applying map to the array and extracting the first item from the resulting 2D array. Simply utilize flatMap on the array with fn as the callback function.

const output = inputArray.flatMap(fn)

or

const output = inputArray.map(fn).flat()

In addition, the function fn requires some adjustments. You should access the entries of the rest object as both the key and value are necessary.

Object.entries(rest)
      .map(([key, value]) => ({ Area, [key]: value }))

const input = [
  {
    "Area": "Werk Produktivität [%] - Target",
    "Jan": 86.21397507374327,
    "Feb": 86.0570021973368,
    "Mrz": 88.70898346258058,
    "Apr": 85.29801908413164,
    "May": 85.07431241640211
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
    "Jan": 84.17054711398421,
    "Feb": 83.80826026601528,
    "Mrz": 84.11553769971036,
    "Apr": 83.76460916731,
    "May": 82.69773876702813
  }
]

const fn = ({ Area, ...rest }) =>
  Object.entries(rest)
    .map(([key,value]) => ({
      Area,
      [key]: value
    }))

const output = input.flatMap(fn)

console.log(output)

Answer 7

Answer №4

let data = [
  {
    "Area": "Sales Performance - Target",
    "Jan": 97.21465478124512,
    "Feb": 96.74215467984561,
    "Mar": 98.31245781321595,
    "Apr": 95.65985475125405,
    "May": 94.75814568754125
  },
  {
    "Area": "Sales Performance - Actual",
    "Jan": 95.25354874587412,
    "Feb": 93.58275478547821,
    "Mar": 95.97457845258715,
    "Apr": 92.78459854584578,
    "May": 91.48548745874154
  }
];

let newData = [];

for(entry of data){
  const {
    Area,
    ...monthlyData
  }=entry;
  for([month,value] of Object.entries(monthlyData)){
    newData.push({Area,[month]:value});
    
  }
}
console.log(newData);

I trust this information is beneficial to you!

Answer 8

let data = [
  {
    "Area": "Sales Performance - Target",
    "Jan": 97.21465478124512,
    "Feb": 96.74215467984561,
    "Mar": 98.31245781321595,
    "Apr": 95.65985475125405,
    "May": 94.75814568754125
  },
  {
    "Area": "Sales Performance - Actual",
    "Jan": 95.25354874587412,
    "Feb": 93.58275478547821,
    "Mar": 95.97457845258715,
    "Apr": 92.78459854584578,
    "May": 91.48548745874154
  }
];

let newData = [];

for(entry of data){
  const {
    Area,
    ...monthlyData
  }=entry;
  for([month,value] of Object.entries(monthlyData)){
    newData.push({Area,[month]:value});
    
  }
}
console.log(newData);

I trust this information is beneficial to you!

Answer 9

Answer №5

If you want to achieve this task, you can utilize the concept of Destructuring assignment.

Here is a simple demonstration:

const data = [
  {
    "Area": "Werk Produktivität [%] - Target",
      "Jan": 86.21397507374327,
      "Feb": 86.0570021973368,
      "Mar": 88.70898346258058,
      "Apr": 85.29801908413164,
      "May": 85.07431241640211
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
      "Jan": 84.17054711398421,
      "Feb": 83.80826026601528,
      "Mar": 84.11553769971036,
      "Apr": 83.76460916731,
      "May": 82.69773876702813
  }
];

const result = [];

data.forEach(item => {
    const { Area, ...restData } = item;
    Object.keys(restData).forEach(month => {
        result.push({ Area, [month]: restData[month] });
    });
});

console.log(result);

Answer 10

If you want to achieve this task, you can utilize the concept of Destructuring assignment.

Here is a simple demonstration:

const data = [
  {
    "Area": "Werk Produktivität [%] - Target",
      "Jan": 86.21397507374327,
      "Feb": 86.0570021973368,
      "Mar": 88.70898346258058,
      "Apr": 85.29801908413164,
      "May": 85.07431241640211
  },
  {
    "Area": "Werk Produktivität [%] - Actual",
      "Jan": 84.17054711398421,
      "Feb": 83.80826026601528,
      "Mar": 84.11553769971036,
      "Apr": 83.76460916731,
      "May": 82.69773876702813
  }
];

const result = [];

data.forEach(item => {
    const { Area, ...restData } = item;
    Object.keys(restData).forEach(month => {
        result.push({ Area, [month]: restData[month] });
    });
});

console.log(result);

How to obliterate an array element in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Substitution of "with" operator in strict mode

Adding data into a JSONB column by fetching information from a separate table in PostgreSQL

Master the art of navigating the Windows Sound Recorder with the power of JavaScript

Converting XML to JSON in a Node.js application

Node.js allows you to seamlessly upload multiple images from various form fields or input types simultaneously

Showing information in Angular without using $scope

Error: stripe.redirectToCheckout does not exist and cannot be executed

Teach me the steps in a promise chain to send a response and conclude the flow of the promise

Manipulate Browser Navigation Behavior using JavaScript or AngularJS

Tips for parsing data arrays in HTML templates

Incorporate a string column from a JSON object array using T-SQL

Exploring the functionality of jQuery by incorporating a variable into the selector

Using a child prop in React's map function

What is the process for obtaining intersection set data from an array?

Shuffling the Highest Element with C++ Bubble Sorting

How to retrieve the current key from an array in PHP?

A solution for accessing computed properties within a v-for loop

When using React and React Router v6, make sure to implement a 404 status code response for unmatched routes

What is the outcome of XmlHttpRequest.responseText?

Is there a way to retrieve the number of notifications that have not been seen or read from the API?