Navigate through an array using just one index, each element of which holds multiple objects

Question

Navigate through an array using just one index, each element of which holds multiple objects

Here is a dataset that needs reformatting

let data = [
  {
    apple:1,
    banana:2,
    cherry:3
  },
  {
    apple:4,
    banana:5,
    cherry:6
  },
  {
    apple:7,
    banana:8,
    cherry:9
  }
]

The desired format for the data is as follows:

{
   apple: [1,4,7],
   banana: [2,5,8],
   cherry: [3,6,9]
}

Below is a proposed solution:

let data = [
  {
    apple:1,
    banana:2,
    cherry:3
  },
  {
    apple:4,
    banana:5,
    cherry:6
  },
  {
    apple:7,
    banana:8,
    cherry:9
  }
]

function reformatData (data) {
  console.log(typeof data) // WHY IS THIS RETURNING AN OBJECT???
  let keys = Object.keys(data[0])
  const resultObj = {}
  for (let key of keys) {
    resultObj[key] = []
  }
  data.forEach((x,idx)=> {
    for (let key in x) {
      resultObj[key].push(x[key])
    }
  })
  return resultObj
}

reformatData(data)

Although this code works, it may not be the most efficient. I am struggling with understanding the following concepts:

Initially, data appears to me as an array with one index containing three objects. For instance, data[0] = {obj1},{obj2},{obj3}, but when I check its type using typeof, it shows as an object.
When I log data at a specific index like data[1], it displays {apple:4,banana:5,cherry:6} resembling an array.
I am confused about what kind of data structure this is and what is happening here?

Please provide a more efficient solution and clarify these concepts for me.

javascript arrays json object

Answer 1

Answer №1

Experiment

function testFunction (data) {
  let finalObject = {};

  data.forEach((item) => {
    for (let property in item) {
      if (finalObject.hasOwnProperty(property)) {
        finalObject[property].push(item[property]);
      } else {
        finalObject[property] = [item[property]];
      }
    }
  });

  return finalObject;
}

Answer 2

Experiment

function testFunction (data) {
  let finalObject = {};

  data.forEach((item) => {
    for (let property in item) {
      if (finalObject.hasOwnProperty(property)) {
        finalObject[property].push(item[property]);
      } else {
        finalObject[property] = [item[property]];
      }
    }
  });

  return finalObject;
}

Answer 3

Answer №2

If you want to verify if a variable is an array, you can utilize the Array.isArray() method. The typeof operator will return 'object' for arrays since they are objects in JavaScript that are created using the Object constructor.

To achieve the desired result, you just need to iterate over the array and store the values in an object.

let arr = [
  {
    a:1,
    b:2,
    c:3
  },
  {
    a:4,
    b:5,
    c:6
  },
  {
    a:7,
    b:8,
    c:9
  }
]

var res = {};
arr.forEach((obj) => {
   Object.entries(obj).forEach(([key, val]) => {
      if(res[key]) {
         res[key].push(val);
      } else {
         res[key] = [val];
      }
   })
});

console.log(res);

Answer 4

If you want to verify if a variable is an array, you can utilize the Array.isArray() method. The typeof operator will return 'object' for arrays since they are objects in JavaScript that are created using the Object constructor.

To achieve the desired result, you just need to iterate over the array and store the values in an object.

let arr = [
  {
    a:1,
    b:2,
    c:3
  },
  {
    a:4,
    b:5,
    c:6
  },
  {
    a:7,
    b:8,
    c:9
  }
]

var res = {};
arr.forEach((obj) => {
   Object.entries(obj).forEach(([key, val]) => {
      if(res[key]) {
         res[key].push(val);
      } else {
         res[key] = [val];
      }
   })
});

console.log(res);

Answer 5

Answer №3

If you want to achieve this functionality, you can utilize the array method reduce().

To start, iterate through all the keys of each object in the array by using Object.keys(o) within the reduce() method.
Inside the iteration, initialize the accumulator with the same key as currently being iterated and set the initial value of that key to an empty array [].
By utilizing r[k].push(o[k]), you will add the corresponding key values into this array.
Finally, return the resulting object r from the .reduce() method.

let arr = [{a:1,b:2,c:3},{a:4,b:5,c:6},{a:7,b:8,c:9}];
const res = arr.reduce((r, o) => {
  Object.keys(o).forEach((k) => {
    r[k] = r[k] || [];
    r[k].push(o[k])
  });
  return r;
}, {})

console.log(res)

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

Answer 6

If you want to achieve this functionality, you can utilize the array method reduce().

To start, iterate through all the keys of each object in the array by using Object.keys(o) within the reduce() method.
Inside the iteration, initialize the accumulator with the same key as currently being iterated and set the initial value of that key to an empty array [].
By utilizing r[k].push(o[k]), you will add the corresponding key values into this array.
Finally, return the resulting object r from the .reduce() method.

let arr = [{a:1,b:2,c:3},{a:4,b:5,c:6},{a:7,b:8,c:9}];
const res = arr.reduce((r, o) => {
  Object.keys(o).forEach((k) => {
    r[k] = r[k] || [];
    r[k].push(o[k])
  });
  return r;
}, {})

console.log(res)

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

Answer 7

Answer №4

Here is a solution you can experiment with:

let data = [
  {
    a:1,
    b:2,
    c:3
  },
  {
    a:4,
    b:5,
    c:6
  },
  {
    a:7,
    b:8,
    c:9
  }
];

let result = {};

Object.values(data).forEach(obj => {
  Object.keys(obj).forEach(prop => {
   if (typeof result[prop] === 'undefined') {
     result[prop] = [];
   }
   result[prop].push(obj[prop])
  })
})

console.log(result);

Answer 8

Here is a solution you can experiment with:

let data = [
  {
    a:1,
    b:2,
    c:3
  },
  {
    a:4,
    b:5,
    c:6
  },
  {
    a:7,
    b:8,
    c:9
  }
];

let result = {};

Object.values(data).forEach(obj => {
  Object.keys(obj).forEach(prop => {
   if (typeof result[prop] === 'undefined') {
     result[prop] = [];
   }
   result[prop].push(obj[prop])
  })
})

console.log(result);

Answer 9

Answer №5

Combine values of the same keys in an object using multiple forEach loops.

let data = [
  {
    x: 1,
    y: 2,
    z: 3
  },
  {
    x: 4,
    y: 5,
    z: 6
  },
  {
    x: 7,
    y: 8,
    z: 9
  }
];

const resultObj = {};
data.forEach(item => {
  Object.keys(item).forEach(
    key => (resultObj[key] = key in resultObj ? [...resultObj[key], item[key]] : [item[key]])
  );
});

console.log(resultObj);

Answer 10

Combine values of the same keys in an object using multiple forEach loops.

let data = [
  {
    x: 1,
    y: 2,
    z: 3
  },
  {
    x: 4,
    y: 5,
    z: 6
  },
  {
    x: 7,
    y: 8,
    z: 9
  }
];

const resultObj = {};
data.forEach(item => {
  Object.keys(item).forEach(
    key => (resultObj[key] = key in resultObj ? [...resultObj[key], item[key]] : [item[key]])
  );
});

console.log(resultObj);

Navigate through an array using just one index, each element of which holds multiple objects

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Refreshing/Redrawing/Resizing a panel in jQuery Layout when toggling the visibility of a header or footer

Using the underscore template to dynamically assign images

Generate several different elements

What could be causing my toString method to return null when used in an array of elements in Java?

Enhancing the Efficiency of Android Programming

Repeating audio playback in HTML5 with a pause option

Utilizing the power of JQuery's each() function alongside UI.sortable() for enhanced

Implementing jQuery and JavaScript validation for email addresses and usernames

Error: the keyword "module" has not been properly defined

Retrieve just a single item of an array

Separate the selected option in the TEXTAREA by commas to make it easier to

Script unable to retrieve PHP data with AJAX success function

Allowing input fields to accept decimal numbers

Xap or js Silverlight media player

Fade effect on vectorial HTML map with Javascript (mouseover)

Display larger images dynamically by hovering over thumbnails using PHP

Loading game resources in advance for future or immediate utilization

Retrieve data from a JSON file URL using a GET request and save the response to be accessed globally when the Vue.js application is initialized

What is the best way to set up a JSON attribute with properly formatted JSON data?

Form submission is not functioning as expected