Switch up the format of a JSON data structure using JavaScript

Question

Switch up the format of a JSON data structure using JavaScript

I am facing an issue with converting a JSON structure into another format. I would appreciate any help or suggestions on this matter. I have tried different methods and alternatives for conversion, but I am still searching for the most efficient way to accomplish it.

// ORIGINAL
{
  Monday: {
    Transactions: [
      {Amount: 100, Status: "Cleared"},
      {Amount: 200, Status: "Pending"},
      {Amount: 300, Status: "Failed"}
    ]
  },
  Tuesday: {
    Transactions: [
      {Amount: 700, Status: "Cleared"},
      {Amount: 800, Status: "Pending"},
      {Amount: 900, Status: "Failed"}
    ]
  },
  Wednesday: {
    Transactions: [
      {Amount: 400, Status: "Cleared"},
      {Amount: 500, Status: "Pending"},
      {Amount: 600, Status: "Failed"}
    ]
  }
}

// EXPECTED OUTPUT
{
  Cleared: {
    Transactions: [
      {Amount: 100, Day: "Monday"},
      {Amount: 700, Day: "Tuesday"},
      {Amount: 400, Day: "Wednesday"}
    ]
  },
  Pending: {
    Transactions: [
      {Amount: 200, Day: "Monday"},
      {Amount: 800, Day: "Tuesday"},
      {Amount: 500, Day: "Wednesday"}
    ]
  },
  Failed: {
    Transactions: [
      {Amount: 300, Day: "Monday"},
      {Amount: 900, Day: "Tuesday"},
      {Amount: 600, Day: "Wednesday"}
    ]
  }
}

javascript json

Answer 1

Answer №1

Here is a sample code snippet for processing transactions based on their status:

const input = {
    Monday: {
        Transactions: 
        [{Amount: 100, Status: "Cleared"},
        {Amount: 200, Status: "Pending"},
        {Amount: 300, Status: "Failed"}]
  },
  Tuesday: {
        Transactions: 
        [{Amount: 700, Status: "Cleared"},
        {Amount: 800, Status: "Pending"},
        {Amount: 900, Status: "Failed"}]
  },
  Wednesday: {
        Transactions: 
        [{Amount: 400, Status: "Cleared"},
        {Amount: 500, Status: "Pending"},
        {Amount: 600, Status: "Failed"}]
  }
}

const output = {
    Cleared: {
        Transactions: []
    },
    Pending: {
        Transactions: []
    },
    Failed: {
        Transactions: []
    }
}

for (const day in input) {
    for (const transaction of input[day].Transactions) {
        const status = transaction.Status;
        output[status].Transactions.push({
            Amount: transaction.Amount,
            Day: day
        });
    }
}

Answer 2

Here is a sample code snippet for processing transactions based on their status:

const input = {
    Monday: {
        Transactions: 
        [{Amount: 100, Status: "Cleared"},
        {Amount: 200, Status: "Pending"},
        {Amount: 300, Status: "Failed"}]
  },
  Tuesday: {
        Transactions: 
        [{Amount: 700, Status: "Cleared"},
        {Amount: 800, Status: "Pending"},
        {Amount: 900, Status: "Failed"}]
  },
  Wednesday: {
        Transactions: 
        [{Amount: 400, Status: "Cleared"},
        {Amount: 500, Status: "Pending"},
        {Amount: 600, Status: "Failed"}]
  }
}

const output = {
    Cleared: {
        Transactions: []
    },
    Pending: {
        Transactions: []
    },
    Failed: {
        Transactions: []
    }
}

for (const day in input) {
    for (const transaction of input[day].Transactions) {
        const status = transaction.Status;
        output[status].Transactions.push({
            Amount: transaction.Amount,
            Day: day
        });
    }
}

Answer 3

Answer №2

If you want to effectively group data, the best method to use is the reduce function.

const givenData = { Monday: { Sales: [{Amount: 100, Status: "Completed"}, {Amount: 200, Status: "Pending"}, {Amount: 300, Status: "Failed"}] }, Tuesday: { Sales: [{Amount: 700, Status: "Completed"}, {Amount: 800, Status: "Pending"}, {Amount: 900, Status: "Failed"}] }, Wednesday: { Sales: [{Amount: 400, Status: "Completed"}, {Amount: 500, Status: "Pending"}, {Amount: 600, Status: "Failed"}] }};

const results = Object.entries(givenData).reduce((accumulator,[Day, values])=>{
    values.Sales.forEach(({Amount, Status})=>{
        accumulator[Status] ??= {Sales:[]};
        accumulator[Status].Sales.push({Day, Amount});
    });
    return accumulator;
},{});

console.log(results);

Answer 4

If you want to effectively group data, the best method to use is the reduce function.

const givenData = { Monday: { Sales: [{Amount: 100, Status: "Completed"}, {Amount: 200, Status: "Pending"}, {Amount: 300, Status: "Failed"}] }, Tuesday: { Sales: [{Amount: 700, Status: "Completed"}, {Amount: 800, Status: "Pending"}, {Amount: 900, Status: "Failed"}] }, Wednesday: { Sales: [{Amount: 400, Status: "Completed"}, {Amount: 500, Status: "Pending"}, {Amount: 600, Status: "Failed"}] }};

const results = Object.entries(givenData).reduce((accumulator,[Day, values])=>{
    values.Sales.forEach(({Amount, Status})=>{
        accumulator[Status] ??= {Sales:[]};
        accumulator[Status].Sales.push({Day, Amount});
    });
    return accumulator;
},{});

console.log(results);

Answer 5

Answer №3

To achieve this, you can implement a nested forEach loop:

const data = {Monday: {Transactions: [{Amount: 100,Status: "Cleared"},{Amount: 200,Status: "Pending"},{Amount: 300,Status: "Failed"}]},Tuesday: {Transactions: [{Amount: 700,Status: "Cleared"},{Amount: 800,Status: "Pending"},{Amount: 900,Status: "Failed"}]},Wednesday: {Transactions: [{Amount: 400,Status: "Cleared"},{Amount: 500,Status: "Pending"},{Amount: 600,Status: "Failed"}]}}

const result = {
    Cleared: {Transactions: []},
    Pending: {Transactions: []},
    Failed: {Transactions: []}
}

Object.keys(data).forEach((day) => {
    data[day].Transactions.forEach((transaction) => {
        result[transaction.Status].Transactions.push(transaction)
    })
})

console.log(result)

Answer 6

To achieve this, you can implement a nested forEach loop:

const data = {Monday: {Transactions: [{Amount: 100,Status: "Cleared"},{Amount: 200,Status: "Pending"},{Amount: 300,Status: "Failed"}]},Tuesday: {Transactions: [{Amount: 700,Status: "Cleared"},{Amount: 800,Status: "Pending"},{Amount: 900,Status: "Failed"}]},Wednesday: {Transactions: [{Amount: 400,Status: "Cleared"},{Amount: 500,Status: "Pending"},{Amount: 600,Status: "Failed"}]}}

const result = {
    Cleared: {Transactions: []},
    Pending: {Transactions: []},
    Failed: {Transactions: []}
}

Object.keys(data).forEach((day) => {
    data[day].Transactions.forEach((transaction) => {
        result[transaction.Status].Transactions.push(transaction)
    })
})

console.log(result)

Switch up the format of a JSON data structure using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to tell when a mouse is no longer hovering over an element?

Customize the font color in Material UI to make it uniquely yours

Upon clicking the collapse button, the collapsed element briefly appears before its height value is reset to empty in the element's style

Can you provide an alternative code to access an element with the id of 'something' using vanilla JavaScript instead of jQuery's $('#something') syntax

Converting JSON to an unnamed object using JSON.NET

When will the javascript file fire if it has this implementation?

The .keypress() function isn't behaving as expected

Unable to render properly after saving to Firebase

Verify if function is returning sessionStorage using jest

How can I place an icon on a specific location in a Highcharts map?

Exploring the depths of asynchronous calls in AngularJS with nested functions

Unraveling encoded characters in URLs using Node.js

Error in vue.js: Unable to call this.$emit as it is not a function

What is the method for invoking Gruntfile tasks programmatically using code?

Integrate MongoDB with my JSON data

Attempting to convert PHP tables into PDF format by utilizing jsPDF-auto-table to generate a beautifully structured PDF file containing the results of a PHP query with multiple records

Struggling to modify CSS properties for :before and :after pseudo-elements?

Guide on utilizing the h function in Vue3 for seamless binding and passing of properties and events from parent to child components

The function is not executing within the window.plugins context in the Angular/Ionic platform

State in Vuex is not kept intact after redirection to another page