Transforming a collection of Javascript objects into a pure Javascript array

Question

Transforming a collection of Javascript objects into a pure Javascript array

After JSON.stringify-ing my JavaScript object, the output looks like this:

[
    {
        "item_id": null,
        "parent_id": "none",
        "depth": 0,
        "left": "1",
        "right": 4
    },
    {
        "item_id": "1",
        "parent_id": null,
        "depth": 1,
        "left": 2,
        "right": 3
    }
]

I am trying to convert this into a multi-dimensional array that resembles the following structure:

item[0][0] = item_id
item[0][1] = parent_id
item[0][2] = depth
item[0][3] = left
item[0][4] = right

item[1][0] = item_id
item[1][1] = parent_id
item[1][2] = depth
item[1][3] = left
item[1][4] = right

Any assistance on achieving this transformation would be greatly appreciated :)

Edit: With the support of everyone, I have successfully implemented the conversion. Thank you all for your contributions.

javascript json

Answer 1

Answer №1

To begin, let's consider the original array before using the stringify function. We can iterate through each item in this array and create a new array for each property. Here is an example implementation:

var myObject = X; // representing the original object
var newArray = [];

for (var i = 0; i < myObject.length; i++) {
   var item = myObject[i];
   var subArray = [];
   subArray.push(item["item_id"]);
   subArray.push(item["parent_id"]);
   subArray.push(item["depth"]);
   subArray.push(item["left"]);
   subArray.push(item["right"]);
   newArray.push(subArray);
}

You can find a working example here - make sure to check the console for the result.

Note: I have chosen not to use a for in loop due to concerns about order reliability. While some may trust it, I prefer to err on the side of caution. You can explore other opinions on this topic here.

If you are looking to optimize performance, you could directly create an array from the property values like this:

for (var i = 0; i < myObject.length; i++) {
    var item = myObject[i];
    var subArray = [item["item_id"], item["parent_id"], item["depth"], item["left"], item["right"]];
    newArray.push(subArray);
}

This approach offers approximately double the speed in terms of performance. You can see the comparison here.

Answer 2

To begin, let's consider the original array before using the stringify function. We can iterate through each item in this array and create a new array for each property. Here is an example implementation:

var myObject = X; // representing the original object
var newArray = [];

for (var i = 0; i < myObject.length; i++) {
   var item = myObject[i];
   var subArray = [];
   subArray.push(item["item_id"]);
   subArray.push(item["parent_id"]);
   subArray.push(item["depth"]);
   subArray.push(item["left"]);
   subArray.push(item["right"]);
   newArray.push(subArray);
}

You can find a working example here - make sure to check the console for the result.

Note: I have chosen not to use a for in loop due to concerns about order reliability. While some may trust it, I prefer to err on the side of caution. You can explore other opinions on this topic here.

If you are looking to optimize performance, you could directly create an array from the property values like this:

for (var i = 0; i < myObject.length; i++) {
    var item = myObject[i];
    var subArray = [item["item_id"], item["parent_id"], item["depth"], item["left"], item["right"]];
    newArray.push(subArray);
}

This approach offers approximately double the speed in terms of performance. You can see the comparison here.

Answer 3

Answer №2

What you may have thought was an "object" is in fact a collection of Arrays.

var items = [];
for (var x=0; x<arrayCollection.length; x++) {
   var subArray = [];
   var element = arrayCollection[x];
   for (var y in element) {
      subArray.push(y);
   }
   items.push(subArray);
}

Answer 4

What you may have thought was an "object" is in fact a collection of Arrays.

var items = [];
for (var x=0; x<arrayCollection.length; x++) {
   var subArray = [];
   var element = arrayCollection[x];
   for (var y in element) {
      subArray.push(y);
   }
   items.push(subArray);
}

Answer 5

Answer №3

Iterate through the properties of each object in your array and map them accordingly

var mappedItems = yourArray.map(function (object) { 
  var result = [];
    for (var prop in object) { 
      result.push(object[prop]);
    }
    return result; 
});

Answer 6

Iterate through the properties of each object in your array and map them accordingly

var mappedItems = yourArray.map(function (object) { 
  var result = [];
    for (var prop in object) { 
      result.push(object[prop]);
    }
    return result; 
});

Answer 7

Answer №4

Utilizing recursion for handling multi-dimensional data objects:

code snippet

 function isArray($obj) {
    return Object.prototype.toString.call($obj) === '[object Array]';
}

function processObject(data) {


    if(isArray(data)){
        return (processArray(data));
    }

    var result = [];
    for (var i in data) {
        var item = data[i];
        if (item === null) { // considering null as an object type..!
            result.push(item);
        } else if (isArray(item)) {
            result.push(processArray(item));
        } else if (typeof item === 'object') {
            result.push(processObject(item));
        } else {
            result.push(item);
        }
    }
    return result;
}

function processArray(data) {
    var result = [];

    for (var i = 0; i < data.length; i++) {
        var item = data[i]; 
        if (item === null) { // considering null as an object type..!
            result.push(item);
        } else if (isArray(item)) {
            result.push(processArray(item));
        } else if (typeof item === 'object') {
            result.push(processObject(item));
        } else {
            result.push(item);
        }
    }
    return result;
}

var processedData = processObject(data);
console.log(processedData);

Answer 8

Utilizing recursion for handling multi-dimensional data objects:

code snippet

 function isArray($obj) {
    return Object.prototype.toString.call($obj) === '[object Array]';
}

function processObject(data) {


    if(isArray(data)){
        return (processArray(data));
    }

    var result = [];
    for (var i in data) {
        var item = data[i];
        if (item === null) { // considering null as an object type..!
            result.push(item);
        } else if (isArray(item)) {
            result.push(processArray(item));
        } else if (typeof item === 'object') {
            result.push(processObject(item));
        } else {
            result.push(item);
        }
    }
    return result;
}

function processArray(data) {
    var result = [];

    for (var i = 0; i < data.length; i++) {
        var item = data[i]; 
        if (item === null) { // considering null as an object type..!
            result.push(item);
        } else if (isArray(item)) {
            result.push(processArray(item));
        } else if (typeof item === 'object') {
            result.push(processObject(item));
        } else {
            result.push(item);
        }
    }
    return result;
}

var processedData = processObject(data);
console.log(processedData);

Transforming a collection of Javascript objects into a pure Javascript array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the technique for invoking methods of the Joi class without the need to instantiate an object?

Aggregating information from JSON to populate a list

Storing values in an array when checkboxes are selected within an ng-repeat loop in AngularJS

Tips for Integrating a Facebook Shop Page into Your Website

Are there any techniques for running unit tests on a Vue.js transition?

Utilizing iOS Local Storage for Efficient Form Submission Handling

What is the best way to attach an event listener to detect the coordinates where a click occurs inside a div element?

Moving data from one table to another and making changes or removing it

Encountering SCRIPT1014 and SCRIPT1002 errors within an Angular4 application when using Internet Explorer 11

When trying to set up Plaiceholder in a Next.js/Webpack 5 environment, you may encounter the following issue: "Error: Module not found - Can't resolve 'child_process

Attempting to employ jQuery to generate a text input that allows for inputting multiple incorrect answers

JavaScript has been used to modify a cell's URL in jqGrid

Retrieving data from an anonymous function in AngularJS and outputting it as JSON or another value

There was a json parsing error that occurred due to an uncaught TypeError. The error message stated that the 'in' operator cannot be used to search for '1009'

Display and conceal div with Jquery as you scroll to specific points on a mobile device

Sending specific names as properties

The next image is crashing on every device except for mine

I'm getting an error about uncaught products in a collection - can you help me understand what this means and how to

Animating a Canvas to Follow Mouse Coordinates

The initial setTimeout function functions correctly, however the subsequent ones do not operate as expected