Analyzing JSON and organizing arrays with multiple values into groups

Question

Analyzing JSON and organizing arrays with multiple values into groups

In my JSON response, the structure is as follows:

{
  data: [
    {
      attributes:[
        {
          type: 'size',
          value: '10'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [
        {
          store_id: '1000',
          stock: '10'
        },
        {
          store_id: '2000',
          stock: '3'
        },
        {
          store_id: '3000',
          stock: '5'
        }
      ]
    },
    {
      attributes:[
        {
          type: 'size',
          value: '9'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [
        {
          store_id: '1000',
          stock: '10'
        },
        {
          store_id: '2000',
          stock: '3'
        },
        {
          store_id: '4000',
          stock: '5'
        }
      ]
    },
    {
      attributes:[
        {
          type: 'size',
          value: '7'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [
        {
          store_id: '1000',
          stock: '19'
        },
        {
          store_id: '2001',
          stock: '8'
        },
        {
          store_id: '4000',
          stock: '2'
        }
      ]
    }
  ]
}

With JavaScript, I am attempting to extract and sort the values based on store ID.

For example:

Considering the above data, here is what I aim to achieve:

array['2000'] = ['10 - (3)', '9 - (3)', '7 - (8)']

Here, 2000 represents the store_id and array values are in the format size - (stock).

javascript arrays json dictionary parsing

Answer 1

Answer №1

A straightforward approach involves utilizing Array#reduce to consolidate your data.

Additionally, ensure that within each inventory, all items are merged to accurately define the value with the correct structure such as

${attributes[0].value} - (${stock})

const yourJson = {data:[{attributes:[{type:'size',value:'10'},{type:'colour',value:'red'}],inventory:[{store_id:'1000',stock:'10'},{store_id:'2000',stock:'3'},{store_id:'3000',stock:'5'}]},{attributes:[{type:'size',value:'9'},{type:'colour',value:'red'}],inventory:[{store_id:'1000',stock:'10'},{store_id:'2000',stock:'3'},{store_id:'4000',stock:'5'}]},{attributes:[{type:'size',value:'7'},{type:'colour',value:'red'}],inventory:[{store_id:'1000',stock:'19'},{store_id:'2001',stock:'8'},{store_id:'4000',stock:'2'}]}]};

const result = yourJson.data.reduce((acc, {attributes, inventory}) => 
{
  for(const {store_id, stock} of inventory){
    acc[store_id] = acc[store_id] ||[];
    acc[store_id].push(`${attributes[0].value} - (${stock})`);
  }
  
  return acc;
}, {});

console.log(result);

Answer 2

A straightforward approach involves utilizing Array#reduce to consolidate your data.

Additionally, ensure that within each inventory, all items are merged to accurately define the value with the correct structure such as

${attributes[0].value} - (${stock})

const yourJson = {data:[{attributes:[{type:'size',value:'10'},{type:'colour',value:'red'}],inventory:[{store_id:'1000',stock:'10'},{store_id:'2000',stock:'3'},{store_id:'3000',stock:'5'}]},{attributes:[{type:'size',value:'9'},{type:'colour',value:'red'}],inventory:[{store_id:'1000',stock:'10'},{store_id:'2000',stock:'3'},{store_id:'4000',stock:'5'}]},{attributes:[{type:'size',value:'7'},{type:'colour',value:'red'}],inventory:[{store_id:'1000',stock:'19'},{store_id:'2001',stock:'8'},{store_id:'4000',stock:'2'}]}]};

const result = yourJson.data.reduce((acc, {attributes, inventory}) => 
{
  for(const {store_id, stock} of inventory){
    acc[store_id] = acc[store_id] ||[];
    acc[store_id].push(`${attributes[0].value} - (${stock})`);
  }
  
  return acc;
}, {});

console.log(result);

Answer 3

Answer №2

If you need to choose an item from the inventory, consider using the reduce() method.

Take a look at this example:

let response = {
  data: [
    {
      attributes:[
        {
          type: 'size',
          value: '10'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [
        {
          store_id: '1000',
          stock: '10'
        },
        {
          store_id: '2000',
          stock: '3'
        },
        {
          store_id: '3000',
          stock: '5'
        }
      ]
    },
    {
      attributes:[
        {
          type: 'size',
          value: '9'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [
        {
          store_id: '1000',
          stock: '10'
        },
        {
          store_id: '2000',
          stock: '3'
        },
        {
          store_id: '4000',
          stock: '5'
        }
      ]
    },
    {
      attributes:[
        {
          type: 'size',
          value: '7'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [
        {
          store_id: '1000',
          stock: '19‘
        },
        {
          store_id: '2001',
          stock: '8'
        },
        {
          store_id: '4000',
          stock: '2'
        }
      ]
    }
  ]
}

let selected_inventory = response.data.reduce((a, b) => a = b.inventory.find(inv => inv.store_id === '2000') || a, {})
console.log(selected_inventory) // The expected outcome is { "store_id": "2000", "stock": "3" }

Answer 4

If you need to choose an item from the inventory, consider using the reduce() method.

Take a look at this example:

let response = {
  data: [
    {
      attributes:[
        {
          type: 'size',
          value: '10'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [
        {
          store_id: '1000',
          stock: '10'
        },
        {
          store_id: '2000',
          stock: '3'
        },
        {
          store_id: '3000',
          stock: '5'
        }
      ]
    },
    {
      attributes:[
        {
          type: 'size',
          value: '9'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [
        {
          store_id: '1000',
          stock: '10'
        },
        {
          store_id: '2000',
          stock: '3'
        },
        {
          store_id: '4000',
          stock: '5'
        }
      ]
    },
    {
      attributes:[
        {
          type: 'size',
          value: '7'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [
        {
          store_id: '1000',
          stock: '19‘
        },
        {
          store_id: '2001',
          stock: '8'
        },
        {
          store_id: '4000',
          stock: '2'
        }
      ]
    }
  ]
}

let selected_inventory = response.data.reduce((a, b) => a = b.inventory.find(inv => inv.store_id === '2000') || a, {})
console.log(selected_inventory) // The expected outcome is { "store_id": "2000", "stock": "3" }

Answer 5

Answer №3

The previous response may not present the solution in the exact format you are seeking.

function convertToObjects(arr) {
  const objList = {};

  for (const { attributes, inventory } of arr) {
    // Make sure there is always a "size" attribute
    const size = attributes.find(attr => attr.type === 'size').value;

    for (const inv of inventory) {
      // Create an array if it doesn't exist
      objList[inv.store_id] = objList[inv.store_id] || [];

      // Generate and add the final strings
      objList[inv.store_id].push(size + ' - (' + inv.stock + ')');
    }
  }
  
  return objList;
}

const givenData = {
  data: [{
      attributes: [{
          type: 'size',
          value: '10'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [{
          store_id: '1000',
          stock: '10'
        },
        {
          store_id: '2000',
          stock: '3'
        },
        {
          store_id: '3000',
          stock: '5'
        }
      ]
    },
    {
      attributes: [{
          type: 'size',
          value: '9'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [{
          store_id: '1000',
          stock: '10'
        },
        {
          store_id: '2000',
          stock: '3'
        },
        {
          store_id: '4000',
          stock: '5'
        }
      ]
    },
    {
      attributes: [{
          type: 'size',
          value: '7'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [{
          store_id: '1000',
          stock: '19'
        },
        {
          store_id: '2001',
          stock: '8'
        },
        {
          store_id: '4000',
          stock: '2'
        }
      ]
    }
  ]
}

console.log(convertToObjects(givenData.data));

Answer 6

The previous response may not present the solution in the exact format you are seeking.

function convertToObjects(arr) {
  const objList = {};

  for (const { attributes, inventory } of arr) {
    // Make sure there is always a "size" attribute
    const size = attributes.find(attr => attr.type === 'size').value;

    for (const inv of inventory) {
      // Create an array if it doesn't exist
      objList[inv.store_id] = objList[inv.store_id] || [];

      // Generate and add the final strings
      objList[inv.store_id].push(size + ' - (' + inv.stock + ')');
    }
  }
  
  return objList;
}

const givenData = {
  data: [{
      attributes: [{
          type: 'size',
          value: '10'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [{
          store_id: '1000',
          stock: '10'
        },
        {
          store_id: '2000',
          stock: '3'
        },
        {
          store_id: '3000',
          stock: '5'
        }
      ]
    },
    {
      attributes: [{
          type: 'size',
          value: '9'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [{
          store_id: '1000',
          stock: '10'
        },
        {
          store_id: '2000',
          stock: '3'
        },
        {
          store_id: '4000',
          stock: '5'
        }
      ]
    },
    {
      attributes: [{
          type: 'size',
          value: '7'
        },
        {
          type: 'colour',
          value: 'red'
        }
      ],
      inventory: [{
          store_id: '1000',
          stock: '19'
        },
        {
          store_id: '2001',
          stock: '8'
        },
        {
          store_id: '4000',
          stock: '2'
        }
      ]
    }
  ]
}

console.log(convertToObjects(givenData.data));

Analyzing JSON and organizing arrays with multiple values into groups

Answer №1

Answer №2

Answer №3

Similar questions

What causes duplicate packages to appear in Bower at times?

Passing data between Vue components

Triggering a jQuery ajax request upon pressing a key on the keyboard

Encountered an error saying 'TextEncoder is not defined' when running Jest in Next.js version 14

Retrieve information according to the object ID with AngularJS UI-Router and $stateParams

Utilizing Jquery to Pass an Optional Function to Another Function

I'm facing an issue where the data I retrieved is not displaying properly in my template within nuxt 3

Creating an event listener with a dynamic name

Utilizing getIdentifier() and getStringArray() to reference a string array in Android using a different string

Top method for triggering an action on the client-side during Sign In with the help of Redux, React, and NextAuth

Discover a portion of the worth stored in the dictionary

"Integrating Laravel 5.4 Backend with Angular 5 Frontend: A Step-by-Step

Combining array elements with unique property labels

React - a search feature for array filtering

Setting up initial values for React properties

Using target="_blank" does not seem to open a popup window in React

Determine whether the current time falls within the specified time slots and check if the day is included in the provided array of days

The process of allocating memory for a 3D array and utilizing the fread function in C yields significant outcomes

Unable to access the value property of null in Angular reactive form when attempting to retrieve the value

How can I locate an element using JavaScript in Selenium with C#?