Transform a nested array of objects into a property template object with nested properties

Question

Transform a nested array of objects into a property template object with nested properties

I am in need of converting an array of objects into a nested property template object. The nested object will be constructed based on the checked items from the array.

Initially, the first level objects have their 'checked' key as null, implying that they will be included at the beginning of the property template object.

If the first level objects do not have any properties or none of the properties are marked as checked, the output should resemble this:

{staff: true}

However, if the objects contain properties and some of them are checked, the output structure will look like this:

{staffedLocation: ['schedulingGroup',
                   {property: 'staff', subProperties: ['description']}
                  ]
}

This is just a basic example, and sometimes the array of nested objects can go even deeper, necessitating the use of a recursive function. I'm struggling with how to implement recursion when the structure of the first level object differs from the rest.

An example of the array of objects being worked with is shown below:

[
    {checked: null, name: "staffedLocation", properties: [
        {checked: null, name: "oid", properties: null, toggle: null, type: "integer"},
        {checked: null, name: "_class", properties: null, toggle: null, type: "string"},
        {checked: true, name: "schedulingGroups", properties: null, toggle: null, type: "list"},
        {checked: null, name: "staff", properties: [
            {checked: null, name: "oid", properties: null, toggle: null, type: "integer"},
            {checked: null, name: "_class", properties: null, toggle: null, type: "string"},
            {checked: true, name: "description", properties: null, toggle: null, type: "string"},
            {checked: null, name: "limits", properties: null, toggle: null, type: "list"},
            {checked: null, name: "weeklyMaxHours", properties: null, toggle: null, type: "integer"}

        ], toggle: true, type: "list"},
    ], toggle: true, type: "staffedLocation"},
    {checked: null, 
    name: "staff", properties: [
        {checked: null, name: "oid", properties: null, toggle: null, type: "integer"},
        {checked: null, name: "_class", properties: null, toggle: null, type: "string"},
        {checked: null, name: "description", properties: null, toggle: null, type: "string"},
        {checked: null, name: "limits", properties: null, toggle: null, type: "list"},
        {checked: null, name: "weeklyMaxHours", properties: null, toggle: null, type: "integer"}
    ], toggle: true, type: "staff"},
    {checked: null, name: "assignedShifts", properties: null, toggle: null, type: "shiftForEmail"},
    {checked: null, name: "editedShifts", properties: null, toggle: null, type: "shiftForEmail"},
    {checked: null, name: "deletedShifts", properties: null, toggle: null, type: "shiftForEmail"},
    {checked: null, name: "unassignedShifts", properties: null, toggle: null, type: "shiftForEmail"},
    {checked: null, name: "rangeStart", properties: null, toggle: null, type: "timestamp"},
    {checked: null, name: "rangeEnd", properties: null, toggle: null, type: "timestamp"}
]

The desired output should be a nested object structured like this:

{   
    staffedLocation: ['schedulingGroup',{property: 'staff',subProperties: ['description']}],
    staff: true,
    assignedShifts: true,
    editedShifts: true,
    deletedShifts: true,
    unassignedShifts: true,
    rangeStart: true,
    rangeEnd: true
}

javascript angularjs arrays

Answer 1

Answer №1

If you wish to implement your recursive function properly, make sure to apply it only to the properties within the topmost object rather than the object itself:

// Without ES6 syntax
function convert(content) {

function convertValues(props) {
    if (!(props && props.length && props.length > 0)) {
        return true;
    }
    var convertedProps = [];

    props.forEach(function(prop) {
       // Utilizing recursion
       var values = convertValues(prop.properties);
       if (prop.checked || values.length) {

           convertedProps.push(prop.name, values);
       }
    });

    return convertedProps;
}

var convertedContent = {};

content.forEach(function(obj) {
    convertedContent[obj.name] = convertValues(obj.properties);
});

return convertedContent;

}

The code provided may not be a perfect fit for your requirements, but I hope it can offer some guidance in the right direction.

Answer 2

If you wish to implement your recursive function properly, make sure to apply it only to the properties within the topmost object rather than the object itself:

// Without ES6 syntax
function convert(content) {

function convertValues(props) {
    if (!(props && props.length && props.length > 0)) {
        return true;
    }
    var convertedProps = [];

    props.forEach(function(prop) {
       // Utilizing recursion
       var values = convertValues(prop.properties);
       if (prop.checked || values.length) {

           convertedProps.push(prop.name, values);
       }
    });

    return convertedProps;
}

var convertedContent = {};

content.forEach(function(obj) {
    convertedContent[obj.name] = convertValues(obj.properties);
});

return convertedContent;

}

The code provided may not be a perfect fit for your requirements, but I hope it can offer some guidance in the right direction.

Answer 3

Answer №2

Thanks to the assistance of Alexey, I was able to successfully transform everything as needed. The function found below now carries out the conversion process correctly.

$scope.convertToPropertyTemplate = function(content) {
    function convertValues(props) {

        if (!(props && props.length && props.length > 0)) {
            return true;
        }
        var convertedProps = [];

        props.forEach(function(prop) {
            // Recursive
            var convertedObj = {};
            var values = convertValues(prop.properties);
            if (prop.checked) {
                convertedProps.push(prop.name);
            } 

            if (values.length){
                convertedObj["property"] = prop.name;
                convertedObj["subProperties"] = values;
                convertedProps.push(convertedObj);
            }
        });

        return convertedProps;
    }

    $scope.convertedContent = {};

    content.forEach(function(obj) {
        $scope.convertedContent[obj.name] = convertValues(obj.properties);
    });
}

Answer 4

Thanks to the assistance of Alexey, I was able to successfully transform everything as needed. The function found below now carries out the conversion process correctly.

$scope.convertToPropertyTemplate = function(content) {
    function convertValues(props) {

        if (!(props && props.length && props.length > 0)) {
            return true;
        }
        var convertedProps = [];

        props.forEach(function(prop) {
            // Recursive
            var convertedObj = {};
            var values = convertValues(prop.properties);
            if (prop.checked) {
                convertedProps.push(prop.name);
            } 

            if (values.length){
                convertedObj["property"] = prop.name;
                convertedObj["subProperties"] = values;
                convertedProps.push(convertedObj);
            }
        });

        return convertedProps;
    }

    $scope.convertedContent = {};

    content.forEach(function(obj) {
        $scope.convertedContent[obj.name] = convertValues(obj.properties);
    });
}

Transform a nested array of objects into a property template object with nested properties

Answer №1

Answer №2

Similar questions

Implementing Various Conditions in ng-if Using AngularJS

Adapting a Function to Utilize a Passed Variable in an Angular 2 Application with Observables

Is it possible to transmit form data via a JSON field when making a POST request to an API?

A custom JavaScript function designed to facilitate the downloading of a file that includes the user's input directly to the user

$watchCollection not firing when object is modified

Using a single function for multiple IDs in JavaScript

The correlation of unclickable and unmovable elements in the Firefox browser

Having trouble retrieving a hidden value in JavaScript when dealing with multiple records in a Coldfusion table

Tips for utilizing a .node file efficiently

Is it possible to convert a list of MongoDB documents into a tabular format?

Containers shared among Next.js pages within a folder

Utilize Bootstrap 3 Datepicker version 4 to easily set the date using Moment.js or Date objects

What is the best method for extracting an attribute value from an HTML <a> element?

Why isn't my state updating with componentDidMount()?

Error occurred when trying to run 'npm run dev' on vite: Unable to access the file "node_modules/react/jsx-dev-runtime.js"

Exploring the magic of the (!!!) operator in JavaScript!

Tips on skipping the need to repeatedly use `@ApiProperty()` for every dto in NestJs-swagger

Get the child from Firebase using the $id parameter in the $routeParams

Adding a specific element to an array using JQuery

I have successfully stored an array in session storage and was able to retrieve it. While I am able to access the data, I am unable to duplicate the array