transform a nested JavaScript object into a one-dimensional array

Question

transform a nested JavaScript object into a one-dimensional array

There is a JavaScript object in the following format:

{
  "draw": "",
  "columns": [
    {
      "data": "userid",
      "name": "",
      "searchable": true,
      "search": {
        "value": "",
        "regex": false
      }
    }
  ]
}

I want to transform it into a single-dimensional object like this:

{ 
 "draw" : "",
 "columns[data]": "userid",
 "columns[name]": "",
 "columns[searchable]": "true",
 "columns[searchable][value]": "",
 "columns[searchable][regex]":"true"
}

The main object can have multiple layers of depth and may contain objects and arrays.

Any suggestions or ideas are greatly appreciated since JavaScript is not my strong suit.

javascript object

Answer 1

Answer №1

To handle this scenario, I would implement a recursive function that takes a property of the original object and the path to that object as arguments. If the property is not an object, the function will add the value to the path. If the property is an object, the function will iterate through its properties and call itself recursively.

var object = {
  "draw": "",
  "columns": [{
    "data": "userid",
    "name": "",
    "searchable": true,
    "search": {
      "value": "",
      "regex": false
    }
  }]
};

console.log(flatten(object));

function flatten(object) {
  var result = {};
  innerFlatten(object, "");
  return result;

  function innerFlatten(object, path) {
    if (typeof object !== "object" || object === null || object instanceof Date) return result[path] = object;
    if (!Object.keys(object).length) return result[path] = object;
    for (var key in object) {
      innerFlatten(object[key], path ? (path + "[" + key + "]") : key);
    }
  }
}

Answer 2

To handle this scenario, I would implement a recursive function that takes a property of the original object and the path to that object as arguments. If the property is not an object, the function will add the value to the path. If the property is an object, the function will iterate through its properties and call itself recursively.

var object = {
  "draw": "",
  "columns": [{
    "data": "userid",
    "name": "",
    "searchable": true,
    "search": {
      "value": "",
      "regex": false
    }
  }]
};

console.log(flatten(object));

function flatten(object) {
  var result = {};
  innerFlatten(object, "");
  return result;

  function innerFlatten(object, path) {
    if (typeof object !== "object" || object === null || object instanceof Date) return result[path] = object;
    if (!Object.keys(object).length) return result[path] = object;
    for (var key in object) {
      innerFlatten(object[key], path ? (path + "[" + key + "]") : key);
    }
  }
}

Answer 3

Answer №2

To achieve this, you can remove the array from the columns property and set it to the 0 index value.

let example = {
  "draw": "",
  "columns": [
    {
      "data": "userid",
      "name": "",
      "searchable": true,
      "search": {
        "value": "",
        "regex": false
      }
    }
   ]
}

example.columns = example.columns[0]

console.log(example)

Answer 4

To achieve this, you can remove the array from the columns property and set it to the 0 index value.

let example = {
  "draw": "",
  "columns": [
    {
      "data": "userid",
      "name": "",
      "searchable": true,
      "search": {
        "value": "",
        "regex": false
      }
    }
   ]
}

example.columns = example.columns[0]

console.log(example)

transform a nested JavaScript object into a one-dimensional array

Answer №1

Answer №2

Similar questions

How can I replace any non-alphanumeric characters in a string with an underscore using JavaScript or TypeScript?

Ember.js: Storing function prototypes as objects

Using Node.js to parse XLSX files and generate JSON output

Tips for enhancing the width of the extrude shape in the x and z axes using Three.js

Calculating a Price Quote

Unable to retrieve selected value with AJAX

Steps for creating a PDF file from an HTML page using JavaScript coding

Having issues with npm python-shell integration within electron framework

Implementing IBAN as the default option in Stripe's PaymentElement

Storing JSON strings in PHP differs from storing them in JavaScript

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

The element's height appears to be fluctuating unexpectedly when I attempt to adjust it using percentage values within a narrow range

How to reposition the Bootstrap navbar Logo from the left to the center

Retrieve a single document from Firestore and assign it to a variable

"Troubleshooting issue: Module fails to reload following JSON.parse error

Retrieving display format or formatted value from an object with Moment.js

Trouble with AJAX request on iPad, works perfectly on desktop

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

What is the best way to assign the "active" class to a navigation list item using JavaScript within Bootstrap 4?

Harnessing the power of flexbox for data visualization