Combining two distinct array objects

Question

Combining two distinct array objects

Attached below is my JSON:

"mainSteps": [
  {
    "id": "9b3b64b4-d8a5-46d5-b464-066dc5c45dc3",
    "name": "Main Step 1",
    "steps": [
      {
        "name": "sub step 1.1"
      },
      {
        "name": "sub step 1.2"
      }
    ]
  },
  {
    "name": "Main step 2"
    "steps": [
      {
        "name": "sub step 2.1"
      },
      {
      "name": "sub step 2.2"
      }
    ],
  },
  {
    "name": "Main Step 3",
    "steps": [
      {
        "name": "sub step 3.1"
      },
      {
        "name": "sub step 3.2"
      }
    ],
  }
]

I am looking for the desired output format like: [Main Step 1, sub step 1.1 , sub step 1.2], [Main Step 2, sub step 2.1 , sub step 2.2], [Main Step 3, sub step 3.1 , sub step 3.2]. I have spent the entire day trying to achieve this output but keep getting different formats such as [[Main Step 1, Main Step 2, Main Step 3, sub step 1.1, sub step 1.2....]. Despite trying various methods, I cannot seem to obtain the exact output as mentioned above. Can someone provide me with some clarification?

var dataProcess = {
        parentProcess:[],
        subProcess:[]
                           };                      
   var steps = mainData.steps; // Steps containing the full JSON data                   
        var proc = [];
                 $scope.getSteps = function(steps) {
                    for (var i=0; i < steps.length; i++) {
                       dataProcess.parentProcess.push(steps[i].name);
                     for(var j=i; j < steps[i].steps.length; j++){
                  dataProcess.subProcess.push(steps[i].steps[j].name);
                   }
                   }

This is one of the methods I have tried so far.

javascript arrays json for-loop

Answer 1

Answer №1

In case ES5 syntax is required:

var details = mainSteps.map(function(step) {
  return [ step.name ].concat((step.steps || []).map(function(substep){
    return substep.name;
  })
});

Alternatively, for ES6 syntax:

var details = mainSteps.map(step =< [step.name].concat((step.steps || []).map(sub => sub.name));

If deeper recursion is necessary, a function can be used as the top level mapper that calls itself.

Answer 2

In case ES5 syntax is required:

var details = mainSteps.map(function(step) {
  return [ step.name ].concat((step.steps || []).map(function(substep){
    return substep.name;
  })
});

Alternatively, for ES6 syntax:

var details = mainSteps.map(step =< [step.name].concat((step.steps || []).map(sub => sub.name));

If deeper recursion is necessary, a function can be used as the top level mapper that calls itself.

Answer 3

Answer №2

Perhaps you could approach it in this manner:

let primarySteps = [
  {
    "id": "9b3b64b4-d8a5-46d5-b464-066dc5c45dc3",
    "name": "Primary Step 1",
    "steps": [
      {
        "name": "sub step 1.1"
      },
      {
        "name": "sub step 1.2"
      }
    ]
  },
  {
    "name": "Primary Step 2",
    "steps": [
      {
        "name": "sub step 2.1"
      },
      {
        "name": "sub step 2.2"
      }
    ],
  },
  {
    "name": "Primary Step 3",
    "steps": [
      {
        "name": "sub step 3.1"
      },
      {
        "name": "sub step 3.2"
      }
    ],
  }
],
mapped = primarySteps.map(e => [e.name, e.steps[0].name, e.steps[1].name]);
console.log(mapped);

Answer 4

Perhaps you could approach it in this manner:

let primarySteps = [
  {
    "id": "9b3b64b4-d8a5-46d5-b464-066dc5c45dc3",
    "name": "Primary Step 1",
    "steps": [
      {
        "name": "sub step 1.1"
      },
      {
        "name": "sub step 1.2"
      }
    ]
  },
  {
    "name": "Primary Step 2",
    "steps": [
      {
        "name": "sub step 2.1"
      },
      {
        "name": "sub step 2.2"
      }
    ],
  },
  {
    "name": "Primary Step 3",
    "steps": [
      {
        "name": "sub step 3.1"
      },
      {
        "name": "sub step 3.2"
      }
    ],
  }
],
mapped = primarySteps.map(e => [e.name, e.steps[0].name, e.steps[1].name]);
console.log(mapped);

Answer 5

Answer №3

By implementing this approach, the code is designed to handle arrays of different lengths and subarrays:

var results = mainSteps.map(x => [x.name].concat(x.steps.map(y => y.name)));

Answer 6

By implementing this approach, the code is designed to handle arrays of different lengths and subarrays:

var results = mainSteps.map(x => [x.name].concat(x.steps.map(y => y.name)));

Answer 7

Answer №4

A straightforward approach using Array.map and Array.concat methods:

// Assuming "obj" is the initial object
var dataProcess = obj.mainSteps.map(function (o) {
    return [o.name].concat(o.steps.map(function(v){ return v.name; }));
});

console.log(JSON.stringify(dataProcess, 0, 4));

The result:

[
    [
        "Main Step 1",
        "sub step 1.1",
        "sub step 1.2"
    ],
    [
        "Main step 2",
        "sub step 2.1",
        "sub step 2.2"
    ],
    [
        "Main Step 3",
        "sub step 3.1",
        "sub step 3.2"
    ]
]

View DEMO here

Answer 8

A straightforward approach using Array.map and Array.concat methods:

// Assuming "obj" is the initial object
var dataProcess = obj.mainSteps.map(function (o) {
    return [o.name].concat(o.steps.map(function(v){ return v.name; }));
});

console.log(JSON.stringify(dataProcess, 0, 4));

The result:

[
    [
        "Main Step 1",
        "sub step 1.1",
        "sub step 1.2"
    ],
    [
        "Main step 2",
        "sub step 2.1",
        "sub step 2.2"
    ],
    [
        "Main Step 3",
        "sub step 3.1",
        "sub step 3.2"
    ]
]

View DEMO here

Combining two distinct array objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilize res.render in Node.js to pass multiple data arrays to the view

What is the reasoning behind websites predominantly opting for new windows for authentication as opposed to using pop-up dialogs or iframes?

JSON interprets HTML as text rather than parsing it

Sending POST Requests with Node and ExpressJS in the User Interface

Buttons failing to adjust the color of the background and text

Challenges arise when attempting to modify an ArrowHelper without creating a new instance

Issues arise when using ng-repeat in conjunction with ng-click

fetch and modify data simultaneously in firebase

"Enhance your website with Wordpress and Divi by adding dynamic image replacement on hover

What is the best method for retrieving a single DataRow object from an Asp Web API?

When Controller Scope Goes Missing in ng-repeat

When utilizing JSON tag, an empty array [] is returned, which conflicts with gson's expectation

How to efficiently reduce an array in ES6 without encountering any TypeScript errors

Interactive Button Animation using Three.js

An external script containing icons is supposed to load automatically when the page is loaded, but unfortunately, the icons fail to display

difficulty arises when attempting to invoke a viewmodel from another viewmodel inside a ko.computed function

Select a division and retrieve the identification of a different division

Guide to converting a Lookup<string, string> object to JSON format

The process of incorporating user properties into the output of a Service Bus topic from a Javascript Azure Function

Preventing JavaScript from Removing Operators When Transmitting/Storing Data in PHP with AJAX