Convert JSON array into normal json in JavaScript

Sometimes you receive data in a complex JSON array format with key-value pairs, but need to convert it to a simple flat object structure for easier access and manipulation.

Problem Structure

Consider this complex JSON array with nested key-value objects:

const arr = [{
    "key": "name",
    "value": "john"
},
{
    "key": "number", 
    "value": "1234"
},
{
    "key": "price",
    "value": [{
        "item": [{
            "item": [{
                "key": "quantity",
                "value": "20"
            },
            {
                "key": "price", 
                "value": "200"
            }]
        }]
    }]
}];

console.log("Original complex structure:");
console.log(JSON.stringify(arr, null, 2));

Original complex structure:
[
  {
    "key": "name",
    "value": "john"
  },
  {
    "key": "number",
    "value": "1234"
  },
  {
    "key": "price",
    "value": [
      {
        "item": [
          {
            "item": [
              {
                "key": "quantity",
                "value": "20"
              },
              {
                "key": "price",
                "value": "200"
              }
            ]
          }
        ]
      }
    ]
  }
]

Expected Output

We want to transform this into a clean, flat JSON object:

{
    "name": "john",
    "number": "1234", 
    "price": {
        "quantity": "20",
        "price": "200"
    }
}

Solution with Recursive Function

Here's a complete solution that handles nested structures recursively:

const arr = [{
    "key": "name",
    "value": "john"
},
{
    "key": "number",
    "value": "1234"
},
{
    "key": "price",
    "value": [{
        "item": [{
            "item": [{
                "key": "quantity",
                "value": "20"
            },
            {
                "key": "price",
                "value": "200"
            }]
        }]
    }]
}];

const simplify = (arr = []) => {
    const res = {};
    const recursiveEmbed = function(el) {
        if ('item' in el) {
            el.item.forEach(recursiveEmbed, this);
            return;
        }
        if (Array.isArray(el.value)) {
            this[el.key] = {};
            el.value.forEach(recursiveEmbed, this[el.key]);
            return;
        }
        this[el.key] = el.value;
    };
    arr.forEach(recursiveEmbed, res);
    return res;
};

console.log("Simplified structure:");
console.log(simplify(arr));

Simplified structure:
{
  name: 'john',
  number: '1234',
  price: { quantity: '20', price: '200' }
}

How It Works

The solution uses a recursive approach with three main conditions:

• Item property: If an element has an 'item' property, recursively process its contents
• Array value: If the value is an array, create a nested object and process recursively
• Simple value: Directly assign the key-value pair to the result object

Alternative Simpler Approach

For less complex nested structures, you can use this simplified version:

const simpleArr = [
    { "key": "firstName", "value": "Alice" },
    { "key": "lastName", "value": "Smith" },
    { "key": "age", "value": "25" }
];

const convertToObject = (arr) => {
    return arr.reduce((acc, item) => {
        acc[item.key] = item.value;
        return acc;
    }, {});
};

console.log("Simple conversion:");
console.log(convertToObject(simpleArr));

Simple conversion:
{ firstName: 'Alice', lastName: 'Smith', age: '25' }

Conclusion

Converting complex JSON arrays to flat objects makes data easier to work with. Use recursive approaches for deeply nested structures, or simple reduce() methods for basic key-value transformations.