Iterating through an array of objects to generate a new array for each item that shares a common value at a specific index

Question

Iterating through an array of objects to generate a new array for each item that shares a common value at a specific index

I'm trying to figure out how to create an array that stores all the visits values for each unique date without duplicating the date arrays.

const MOCK = {
        data: [
          {date: "Aug.03", name: "Nihal Pandit", visits: 3 },
          {date: "Aug.03", name: "Anthony Elias", visits: 3 },
          {date: "Aug.04", name: "Alex P.", visits: 2 },
          {date: "Aug.05", name: "Alex P.", visits: 3 },
          {date: "Aug.05", name: "Anthony Elias", visits: 3 },
        ]
     }

While looping over an array, I need a method to compare values between iterations. I think Array.reduce() might be helpful, but I'm not entirely sure how to implement it correctly just yet.

The desired output should resemble:

[["Aug.03", 3, 3], ["Aug.04", 2], ["Aug.05", 2, 3]]

Essentially, I want an array for each unique date containing all the visit values from objects with that specific date.

let newArray = [];
let visitCountValues = MOCK?.data?.map((item, idx)=> {
        let value = Object.values(item);
      if(value[0] === value[0]){
        newArray.push([value[0], value[1])
      }
        
      })

javascript arrays loops

Answer 1

Answer №1

To easily group the elements of an array into a single object with dates as properties, you can utilize the `reduce` method along with `Object.values` to retrieve the mapped arrays.

const MOCK = {
        data: [
          {date: "Aug.03", name: "Nihal Pandit", visits: 3 },
          {date: "Aug.03", name: "Anthony Elias", visits: 3 },
          {date: "Aug.04", name: "Alex P.", visits: 2 },
          {date: "Aug.05", name: "Alex P.", visits: 3 },
          {date: "Aug.05", name: "Anthony Elias", visits: 3 },
        ]
     }
     
const dateGroups = Object.values(MOCK.data.reduce((acc, { date, visits }) => ({
  ...acc,
  [date]: [...(acc[date] || [date]), visits]
}), {}))

console.log(dateGroups)

Answer 2

To easily group the elements of an array into a single object with dates as properties, you can utilize the `reduce` method along with `Object.values` to retrieve the mapped arrays.

const MOCK = {
        data: [
          {date: "Aug.03", name: "Nihal Pandit", visits: 3 },
          {date: "Aug.03", name: "Anthony Elias", visits: 3 },
          {date: "Aug.04", name: "Alex P.", visits: 2 },
          {date: "Aug.05", name: "Alex P.", visits: 3 },
          {date: "Aug.05", name: "Anthony Elias", visits: 3 },
        ]
     }
     
const dateGroups = Object.values(MOCK.data.reduce((acc, { date, visits }) => ({
  ...acc,
  [date]: [...(acc[date] || [date]), visits]
}), {}))

console.log(dateGroups)

Answer 3

Answer №2

Upon reviewing your updated question, I now have a better understanding of what you are looking to achieve. Here is an example of how you can accomplish this:

const userVisits = [
      {date: "Aug.03", name: "Nihal Pandit", visits: 3 },
      {date: "Aug.03", name: "Anthony Elias", visits: 3 },
      {date: "Aug.04", name: "Alex P.", visits: 2 },
      {date: "Aug.05", name: "Alex P.", visits: 3 },
      {date: "Aug.05", name: "Anthony Elias", visits: 3 },
    ]
    
const result = Object.values(userVisits.reduce((res, {date, visits}) =>{
   const existing = res[date] || [date]
   res[date] = [...existing, visits]
   return res
}, {}))

console.log(result)

Answer 4

Upon reviewing your updated question, I now have a better understanding of what you are looking to achieve. Here is an example of how you can accomplish this:

const userVisits = [
      {date: "Aug.03", name: "Nihal Pandit", visits: 3 },
      {date: "Aug.03", name: "Anthony Elias", visits: 3 },
      {date: "Aug.04", name: "Alex P.", visits: 2 },
      {date: "Aug.05", name: "Alex P.", visits: 3 },
      {date: "Aug.05", name: "Anthony Elias", visits: 3 },
    ]
    
const result = Object.values(userVisits.reduce((res, {date, visits}) =>{
   const existing = res[date] || [date]
   res[date] = [...existing, visits]
   return res
}, {}))

console.log(result)

Iterating through an array of objects to generate a new array for each item that shares a common value at a specific index

Answer №1

Answer №2

Similar questions

The art of defining PropTypes for the style attribute in Reactjs

Angular component with optional one-way binding for version 1.5 and above

Retrieve the Element from the Shadow DOM or leverage the main site's styles

Focusing on a text field after reloading a different div with AJAX

Maintaining duplicate values in a JSON stringify operation: Tips for retention

Having difficulties accessing information from the HTML document

Troubleshooting Issues with Ajax using Jquery and ASP.NET

Dabeng Organizational Structure: Implementing PHP, MySQL, and AJAX

Steps to insert an image object into a table

Can Authorization be Combined with Filtering in a Node.js RESTful API?

Combining package.json commands for launching both an Express server and a Vue app

Executing JavaScript functions from an ASP.NET Razor view is achieved by using the

Error message encountered: Missing property status in TypeScript code

Creating Stunning Light Effects in Three.js using Volumetric Shading and Additive Blending

Finding distinct values in a multidimensional array using JavaScript

What could be the reason for the onclick event not being rendered in Bootstrap-Vue

Creating divs dynamically in a loop and displaying them upon clicking a button in Angular

Implementing interactive elements such as buttons and controls on an HTML5 canvas

Form validation is an essential feature of the Angular2 template-driven sub form component

html inserting line break using label