Tips for converting a flat JavaScript array into a multidimensional one

Question

Tips for converting a flat JavaScript array into a multidimensional one

I'm working on an example where I need to change some values. Here is the link to access it: http://jsfiddle.net/k83hj1jb/

The current output is a flat array:

[
    {"name":"options[11][140]","value":"140"},
    {"name":"options[8][99]","value":"99"},
    {"name":"options[8][103]","value":"103"}
]

What I want instead is something like this:

[
    {
        "options":
        {
            "11":{"140":"140"},
            "8":
            {
                "99":"99",
                "103":"103"
            }
        }
    }
]

Is there an easy way to achieve this?

javascript arrays multidimensional-array

Answer 1

Answer №1

Let's refer to the array you currently have as flatArr and the desired one as nestArr.

Below is a method for calculating nestArr from flatArr:

var getNestArr = function (flatArr) {
    var nestObj = {'options': {}}, obj, opts, parts;
    for (i = 0; i < flatArr.length; i += 1) {
        obj = flatArr[i];
        opts = obj.name;
        parts = opts.replace('options[', '').slice(0, -1).split('][');
        if (!nestObj.options.hasOwnProperty(parts[0])) {
            nestObj.options[parts[0]] = {};
        }
        nestObj.options[parts[0]][parts[1]] = obj.value;
    }
    return [nestObj]; // returns an array instead of object.
};

Testing it out:

var flatArr = [
    {"name":"options[11][140]","value":"140"},
    {"name":"options[8][99]","value":"99"},
    {"name":"options[8][103]","value":"103"}
];
var nestArr = getNestArr(flatArr);
console.log(JSON.stringify(nestArr));

The above code produces this output:

[{"options":{"8":{"99":"99","103":"103"},"11":{"140":"140"}}}]

This outcome aligns with your requirement. However, you may consider returning nestObj instead of [nestObj].

I hope this solution proves useful.

Answer 2

Let's refer to the array you currently have as flatArr and the desired one as nestArr.

Below is a method for calculating nestArr from flatArr:

var getNestArr = function (flatArr) {
    var nestObj = {'options': {}}, obj, opts, parts;
    for (i = 0; i < flatArr.length; i += 1) {
        obj = flatArr[i];
        opts = obj.name;
        parts = opts.replace('options[', '').slice(0, -1).split('][');
        if (!nestObj.options.hasOwnProperty(parts[0])) {
            nestObj.options[parts[0]] = {};
        }
        nestObj.options[parts[0]][parts[1]] = obj.value;
    }
    return [nestObj]; // returns an array instead of object.
};

Testing it out:

var flatArr = [
    {"name":"options[11][140]","value":"140"},
    {"name":"options[8][99]","value":"99"},
    {"name":"options[8][103]","value":"103"}
];
var nestArr = getNestArr(flatArr);
console.log(JSON.stringify(nestArr));

The above code produces this output:

[{"options":{"8":{"99":"99","103":"103"},"11":{"140":"140"}}}]

This outcome aligns with your requirement. However, you may consider returning nestObj instead of [nestObj].

I hope this solution proves useful.

Answer 3

Answer №2

A simple alternative to using JavaScript is PHP, here's an example:

// starting JSON data
$jsonData = '[{"name":"options[11][140]","value":"140"},
          {"name":"options[8][99]","value":"99"},
          {"name":"options[8][103]","value":"103"}]';

// decoding JSON into a PHP array
$arrayData = json_decode($jsonData, true);

// looping through the array values
foreach ($arrayData as $val) {

    // creating a new array
    $optionValue = array();

    // accessing the value of 'name'
    $optionName = $val["name"];

    // splitting the string by square brackets
    $optionValues = explode("[", $optionName);

    // extracting two values within the option brackets
    $optionValue[] = rtrim($optionValues[1], "]");
    $optionValue[] = rtrim($optionValues[2], "]");

    // adding a new element based on the first value in the option brackets
    $newArray["options"][$optionValue[0]][] = array($optionValue[1], $val["value"]);

}

// encoding the modified array back to JSON format
$jsonData = json_encode($newArray);

// displaying the result
var_dump($jsonData);

If you have any questions or need further clarification, feel free to ask and I'll be happy to revise my answer.

Answer 4

A simple alternative to using JavaScript is PHP, here's an example:

// starting JSON data
$jsonData = '[{"name":"options[11][140]","value":"140"},
          {"name":"options[8][99]","value":"99"},
          {"name":"options[8][103]","value":"103"}]';

// decoding JSON into a PHP array
$arrayData = json_decode($jsonData, true);

// looping through the array values
foreach ($arrayData as $val) {

    // creating a new array
    $optionValue = array();

    // accessing the value of 'name'
    $optionName = $val["name"];

    // splitting the string by square brackets
    $optionValues = explode("[", $optionName);

    // extracting two values within the option brackets
    $optionValue[] = rtrim($optionValues[1], "]");
    $optionValue[] = rtrim($optionValues[2], "]");

    // adding a new element based on the first value in the option brackets
    $newArray["options"][$optionValue[0]][] = array($optionValue[1], $val["value"]);

}

// encoding the modified array back to JSON format
$jsonData = json_encode($newArray);

// displaying the result
var_dump($jsonData);

If you have any questions or need further clarification, feel free to ask and I'll be happy to revise my answer.

Tips for converting a flat JavaScript array into a multidimensional one

Answer №1

Answer №2

Similar questions

Server-side script for communicating with client-side JavaScript applications

Jade connecting MongoDB via Express

Hiding icons in a jquery datatable's table

Acquiring the markers, however the latitude and longitude are both null - vue.js

Effortless script to make a URL request and display the response status | using JavaScript with jQuery

Upon registration, the user's information is successfully stored in the mongoDB database, even if the selected "username" is already in

The light slider feature is experiencing technical difficulties within the Bootstrap model

A more efficient method for tallying values within an object (JavaScript, React)

Issues encountered during the installation of Electron JS

What is the best way to set up an on-change listener for material-ui's <CustomInput...>?

How can I maintain the toggle state when a PHP file is reloaded inside a div?

Move Ext.MessageBox.alert() to a new position in the code without altering its current functionality

Javascript functions fail to execute as intended

Why are my styles not working when referenced from the .module.scss file?

What seems to be causing the malfunction in this ranking function?

Transform all the characters within p tags using the JavaScript replace method

"Unraveling the Mysteries of Basic WebGL Sh

Issue with Argument Validation in Internet Explorer 11 while using Vue.js

Discovering the culprit causing a freeze on your page: Uncovering the tool or technique to identify the problematic

Executing JavaScript in HttpClient or HtmlUnitHow to trigger javascript in HttpClient or HtmlUnit