Using recursive functions in Javascript to modify or remove objects from an array by their unique identifier

Question

Using recursive functions in Javascript to modify or remove objects from an array by their unique identifier

I am attempting to develop two recursive functions to "iterate" over an array of objects as shown below. I believe the two functions are quite similar, but they serve different purposes.

Function 1 is designed to update the object - it can modify every field in the "found" object and then return the "new" array of objects. Therefore, the function needs to locate the appropriate object by its .id

Function 2 is meant to find the object based on its .id and delete that object from the array, before returning the updated array of objects.

I have experimented with various methods (below the array of objects) but unfortunately, I am unable to successfully return the new object.

It's worth noting that even if each object has different keys, there will always be an .id key.

[
    {
        "type":"section",
        "name":"Section 1",
        "hassection":[      
            {
                "type":"section",
                "id":1,
                "name":"Section 1 child section 1",
                "hasMenuItem":
                    [
                        {
                            "type":"item",
                            "id":2,
                            "name":"Item 1",
                            "prices":
                            {
                                "type":"price",
                                "price":"15.95"
                            },
                            "description":"Blah Blah..."
                        },{
                            "type":"item",
                            "id":3,"name":
                            "Item 2",
                            "prices":[
                                {
                                    "type":"price",
                                    "price":"24.95"
                                },{
                                    "type":"price",
                                    "price":"13.95"
                                }
                            ],
                            "description":"Blah Blah..."
                        }
                ]
            },{
                "type":"section",
                "id":4,
                "name":"Section 1 child section 2",
                "hasitem":[
                    {
                        "type":"item",
                        "name":"Item 3",
                        "prices":
                        {
                            "type":"price","price":"14.50"
                        },
                        "description":"Blah Blah..."
                    },{
                        "type":"item",
                        "id":5,
                        "name":"Item 4",
                        "prices":
                        {
                            "type":"price",
                            "price":"14.50"
                        },
                        "description":"Blah Blah..."
                    }
                ]
            },
        ]},{
            "type":"section",
            "name":"Section 2",
            "hassection":[      
                {
                    "type":"section",
                    "id":6,
                    "name":"Section 2 child section 1",
                    "hasitem":[
                        {
                            "type":"item",
                            "id":7,
                            "name":"Item 5",
                            "prices":
                            {
                                "type":"price",
                                "price":"15.95"
                            },
                            "description":"Blah Blah..."
                        },
                        {
                            "type":"item",
                            "id":8,
                            "name":"Item 6",
                            "prices":
                            {
                                "type":"price",
                                "price":"13.95"
                            },
                            "description":"Blah Blah..."
                        }
                    ]
            }
        ]}
    ]

My function for updating

function updateNestedObj(obj,updates) {
    const updateToApply = updates.find(upd => upd.id === obj.id);
    if (updateToApply) {
        // UPDATE THE OBJECT
    }
    
    for(let k in obj) {
        if (typeof(obj[k]) === 'object') {
            // ITERATE THROUGH THE OBJECT
            updateNestedObj(obj[k], updates);
        }
    }
    return updateToApply
}

My function for deleting

function deleteNestedObj(obj, updates) {
    const updateToApply = updates.find(upd => upd.id === obj.id);
    if (updateToApply) {
        delete upd;       
    }    
    for(let k in obj) {
        if (typeof(obj[k]) === 'object') {
            deleteNestedObj(obj[k], updates);
        }
    }
}

I am struggling to figure out how to properly implement these functions - any assistance would be greatly appreciated. Thank you in advance!

javascript arrays json recursion

Answer 1

Answer №1

generics

Let's kick things off with an immutable function called update(t, func). This function accepts a value of any type, referred to as t, and a callable updater function, func. The purpose of func is to modify the value of

t</code based on the specified return value by the caller. If no value is returned (i.e., <code>undefined

), then the update function will essentially remove that specific value from the tree.

function update(t, func) {
  switch (t?.constructor) {
    case Object:
      return Object.entries(t).reduce((r, [k, v]) => {
        const newValue = update(func(v), func)
        if (newValue !== undefined) r[k] = newValue
        return r
      }, {})
    case Array:
      return t.flatMap(v => {
        const newValue = update(func(v), func)
        return newValue === undefined ? [] : [newValue]
      })
    default:
      return t
  }
}

The concept of an immutable function for remove(t, func) can be seen as a specialization of the update function.

function remove(t, func) {
  return update(t, v => Boolean(func(v)) ? undefined : v)
}

special forms

These functions can be further specialized to cater to your specific requirements. For instance, updateWithObj(t, obj) will recursively update the object t where a node's id matches the provided obj.id.

function updateWithObj(t, obj) {
  return update(t, v => v.id == obj.id ? {...v, ...obj} : v)
}

Similarly, removeWithObj(t, obj) recursively removes nodes from object t where a node's id matches obj.id.

function removeWithObj(t, obj) {
  return remove(t, v => v.id == obj.id)
}

examples

Let's generate some sample data for illustration purposes. It is worth noting that update is indifferent whether it deals with arrays of elements or individual objects.

const data = [
  {id: 1, data: 50 },
  {id: 2, data: {id: 3, data: "foo"}},
  {id: 4, data: [{id: 5, data: 3.141}, {id: 6, data: {id: 7, data: "bar"}}]}
]

We'll begin with a straightforward update operation on obj.id == 1. Observe how the existing data attribute remains unaltered while a new attribute ok is added. The other nodes remain unchanged.

console.log(updateWithObj(data, {id: 1, ok: "✅"}))

.... ....(truncated for brevity) ....

Answer 2

generics

Let's kick things off with an immutable function called update(t, func). This function accepts a value of any type, referred to as t, and a callable updater function, func. The purpose of func is to modify the value of

t</code based on the specified return value by the caller. If no value is returned (i.e., <code>undefined

), then the update function will essentially remove that specific value from the tree.

function update(t, func) {
  switch (t?.constructor) {
    case Object:
      return Object.entries(t).reduce((r, [k, v]) => {
        const newValue = update(func(v), func)
        if (newValue !== undefined) r[k] = newValue
        return r
      }, {})
    case Array:
      return t.flatMap(v => {
        const newValue = update(func(v), func)
        return newValue === undefined ? [] : [newValue]
      })
    default:
      return t
  }
}

The concept of an immutable function for remove(t, func) can be seen as a specialization of the update function.

function remove(t, func) {
  return update(t, v => Boolean(func(v)) ? undefined : v)
}

special forms

These functions can be further specialized to cater to your specific requirements. For instance, updateWithObj(t, obj) will recursively update the object t where a node's id matches the provided obj.id.

function updateWithObj(t, obj) {
  return update(t, v => v.id == obj.id ? {...v, ...obj} : v)
}

Similarly, removeWithObj(t, obj) recursively removes nodes from object t where a node's id matches obj.id.

function removeWithObj(t, obj) {
  return remove(t, v => v.id == obj.id)
}

examples

Let's generate some sample data for illustration purposes. It is worth noting that update is indifferent whether it deals with arrays of elements or individual objects.

const data = [
  {id: 1, data: 50 },
  {id: 2, data: {id: 3, data: "foo"}},
  {id: 4, data: [{id: 5, data: 3.141}, {id: 6, data: {id: 7, data: "bar"}}]}
]

We'll begin with a straightforward update operation on obj.id == 1. Observe how the existing data attribute remains unaltered while a new attribute ok is added. The other nodes remain unchanged.

console.log(updateWithObj(data, {id: 1, ok: "✅"}))

.... ....(truncated for brevity) ....

Using recursive functions in Javascript to modify or remove objects from an array by their unique identifier

Answer №1

Similar questions

Exploring NodeJs integration with Google Geocoder API

Should data be sent via ajax to the server before reloading the page to view the results, or is it more efficient to update the DOM using JavaScript?

Why am I receiving a 404 error when trying to access an Angular 9 route within a subfolder

How to implement a cyclic item generation feature in React.js

Validation for prototype malfunctioning

Changing the order of element names depending on their location within the parent element using jQuery

The camera scene is experiencing difficulties in updating the image

It appears that when importing from a shared package in lerna, the name must include "src" at the end for Typescript or Javascript files

Arranging a Multi-layered Array Based on One of Its Values

Using Jquery to duplicate a row from one table and insert it into another table

Managing the dropdown selection will reset the text field when the onchange event is triggered with the submission of the form

Where can I find the zip code that matches the State, city, and country in the USA?

Encountering a discrepancy in the level of indirection error

"Mastering the art of event delegation: A guide to effectively engaging with various

Challenges with splitting asynchronous code in NPM modules

"Utilizing Angular's ng-repeat to house multiple select dropdown

transferring data to Amazon Web Services using Angular framework

The issue in jQuery arises from a syntax error within an array

Deactivating the idle timer in React Native: A Step-by-Step Guide

Divide promise chain into individual functions