Iterate through a deeply nested object in JavaScript to update the value of a specific key on every instance

Question

Iterate through a deeply nested object in JavaScript to update the value of a specific key on every instance

I am facing a challenge with a complex data object that includes nested objects and arrays, making it difficult to replace the value of all occurrences of link in the attributes object. The data is returned as a single large blob, and I'm struggling to come up with a flexible solution that can traverse through objects and arrays to check for the existence of link.

Let me provide an example of the data:

const data = {
  components: [
    {
      name: 'header',
      attributes: {
        messageBars: [],
        link: '/new-link/'
        navigation: {
          brand: {
            link: '/',
            alt: 'blah',
          },
        },
      },
    },
    {
      name: 'body',
      attributes: {
        header: {
          text: 'blah',
        },
        buttons: [
          {
            children: 'OK!',
            link: '/new-link/',
          },
        ],
      },
    },

I have managed to access the attributes layer but struggled with implementing a recursive function called readData.

const replaceLink = (newLink: string, data: object) => {
  data.components.forEach(component => {
     if(component.attributes) readData(component.attributes, newLink);
  });

  return data;
};

javascript arrays object recursion

Answer 1

Answer №1

If you are looking to identify the existing links within a dataset, this code snippet will help you extract and display all the links present in the data.

const data = {
  components: [{
      name: 'header',
      attributes: {
        messageBars: [],
        link: '/link/',
        navigation: {
          brand: {
            link: '/',
            alt: 'blah'
          }
        }
      }
    },
    {
      name: 'body',
      attributes: {
        header: {
          text: 'blah'
        },
        buttons: [{
          children: 'OK!',
          link: '/link/'
        }]
      }
    }
  ]
}
const findLinks = (elem) => {

  if (Array.isArray(elem)) {
    elem.forEach(e => findLinks(e))
  } else if (elem instanceof Object) {
    if (elem.hasOwnProperty('link')) {
      console.log('link found', elem.link, elem)
    }
    for (const key in elem) {
      findLinks(elem[key])
    }
  }
}
findLinks(data)

Answer 2

If you are looking to identify the existing links within a dataset, this code snippet will help you extract and display all the links present in the data.

const data = {
  components: [{
      name: 'header',
      attributes: {
        messageBars: [],
        link: '/link/',
        navigation: {
          brand: {
            link: '/',
            alt: 'blah'
          }
        }
      }
    },
    {
      name: 'body',
      attributes: {
        header: {
          text: 'blah'
        },
        buttons: [{
          children: 'OK!',
          link: '/link/'
        }]
      }
    }
  ]
}
const findLinks = (elem) => {

  if (Array.isArray(elem)) {
    elem.forEach(e => findLinks(e))
  } else if (elem instanceof Object) {
    if (elem.hasOwnProperty('link')) {
      console.log('link found', elem.link, elem)
    }
    for (const key in elem) {
      findLinks(elem[key])
    }
  }
}
findLinks(data)

Answer 3

Answer №2

This may seem a bit audacious, but you can transform the object structure into JSON, update the links, and then reverse the conversion:

const data = {
  components: [
    {
      name: 'header',
      attributes: {
        messageBars: [],
        link: '/newlink/',
        navigation: {
          brand: {
            link: '/',
            alt: 'blah',
          },
        },
      },
    },
    {
      name: 'body',
      attributes: {
        header: {
          text: 'blah',
        },
        buttons: [
          {
            children: 'OK!',
            link: '/newlink/',
          },
        ],
      },
    },
  ]
};



const changeLinks=newlink=>JSON.parse(JSON.stringify(data).replace(/"link":"[^"]*"/g,'"link":"'+newlink+'"'))

console.log(changeLinks("xyz"))

Answer 4

This may seem a bit audacious, but you can transform the object structure into JSON, update the links, and then reverse the conversion:

const data = {
  components: [
    {
      name: 'header',
      attributes: {
        messageBars: [],
        link: '/newlink/',
        navigation: {
          brand: {
            link: '/',
            alt: 'blah',
          },
        },
      },
    },
    {
      name: 'body',
      attributes: {
        header: {
          text: 'blah',
        },
        buttons: [
          {
            children: 'OK!',
            link: '/newlink/',
          },
        ],
      },
    },
  ]
};



const changeLinks=newlink=>JSON.parse(JSON.stringify(data).replace(/"link":"[^"]*"/g,'"link":"'+newlink+'"'))

console.log(changeLinks("xyz"))

Answer 5

Answer №3

One approach to achieve this recursively entails a slightly messy code structure that gets the job done efficiently. Despite its complexity, I believe it should be relatively easy to grasp. If a value is an array, the function calls itself recursively for each item in the array. In the case of a non-array object, it replaces any value associated with the key "link", while also conducting recursive calls on all other values present. Primitive values (non-objects) remain unchanged throughout the process.

It's worth noting that this solution may not yield the desired outcome if a "link" key ever holds an object or array (as the entire object/array would be replaced instead of triggering further recursion). I assume such a scenario is unlikely, but if it were to occur, modifying the code accordingly shouldn't pose a significant challenge.

const data = {
  components: [
    {
      name: 'header',
      attributes: {
        messageBars: [],
        link: '/link/',
        navigation: {
          brand: {
            link: '/',
            alt: 'blah',
          },
        },
      },
    },
    {
      name: 'body',
      attributes: {
        header: {
          text: 'blah',
        },
        buttons: [
          {
            children: 'OK!',
            link: '/link/',
          },
        ],
      },
    },
  ]
};

const replaceLink = (newLink, value) => {
  if (Array.isArray(value)) {
    return value.map(item => replaceLink(newLink, item));
  }
  else if (value instanceof Object) {
    const replacement = { ...value };
    for (const key in replacement) {
      if (key === 'link') {
        replacement[key] = newLink;
      }
      else {
        replacement[key] = replaceLink(newLink, replacement[key]);
      }
    }
    return replacement;
  }
  return value;
};

const newData = { components: replaceLink('replacement link', data.components) };

console.log(newData);

Answer 6

One approach to achieve this recursively entails a slightly messy code structure that gets the job done efficiently. Despite its complexity, I believe it should be relatively easy to grasp. If a value is an array, the function calls itself recursively for each item in the array. In the case of a non-array object, it replaces any value associated with the key "link", while also conducting recursive calls on all other values present. Primitive values (non-objects) remain unchanged throughout the process.

It's worth noting that this solution may not yield the desired outcome if a "link" key ever holds an object or array (as the entire object/array would be replaced instead of triggering further recursion). I assume such a scenario is unlikely, but if it were to occur, modifying the code accordingly shouldn't pose a significant challenge.

const data = {
  components: [
    {
      name: 'header',
      attributes: {
        messageBars: [],
        link: '/link/',
        navigation: {
          brand: {
            link: '/',
            alt: 'blah',
          },
        },
      },
    },
    {
      name: 'body',
      attributes: {
        header: {
          text: 'blah',
        },
        buttons: [
          {
            children: 'OK!',
            link: '/link/',
          },
        ],
      },
    },
  ]
};

const replaceLink = (newLink, value) => {
  if (Array.isArray(value)) {
    return value.map(item => replaceLink(newLink, item));
  }
  else if (value instanceof Object) {
    const replacement = { ...value };
    for (const key in replacement) {
      if (key === 'link') {
        replacement[key] = newLink;
      }
      else {
        replacement[key] = replaceLink(newLink, replacement[key]);
      }
    }
    return replacement;
  }
  return value;
};

const newData = { components: replaceLink('replacement link', data.components) };

console.log(newData);

Answer 7

Answer №4

Another option to achieve this is by following these steps

const example = {
  sections: [{
      title: 'Introduction',
      content: 'Lorem ipsum dolor sit amet'
    },
    {
      title: 'Features',
      items: [{
          name: 'Feature A',
          description: 'Description of Feature A'
        },
        {
          name: 'Feature B',
          description: 'Description of Feature B'
        }
      ]
    }
  ]
}

function modifyContent(newContent, object) {
  if (Array.isArray(object)) {
    object.forEach(element => {
      if (Object.prototype.toString.call(element) === '[object Object]' || Array.isArray(element)) {
        modifyContent(newContent, element);
      }
    });
  } else {
    for (element in object) {
      if (element == "content") {
        object[element] = newContent;
      }
      if (Object.prototype.toString.call(object[element]) === '[object Object]' || Array.isArray(object[element])) {
        modifyContent(newContent, object[element]);
      }
    }
  }
}

modifyContent("newContent", example);

console.log(example);

Answer 8

Another option to achieve this is by following these steps

const example = {
  sections: [{
      title: 'Introduction',
      content: 'Lorem ipsum dolor sit amet'
    },
    {
      title: 'Features',
      items: [{
          name: 'Feature A',
          description: 'Description of Feature A'
        },
        {
          name: 'Feature B',
          description: 'Description of Feature B'
        }
      ]
    }
  ]
}

function modifyContent(newContent, object) {
  if (Array.isArray(object)) {
    object.forEach(element => {
      if (Object.prototype.toString.call(element) === '[object Object]' || Array.isArray(element)) {
        modifyContent(newContent, element);
      }
    });
  } else {
    for (element in object) {
      if (element == "content") {
        object[element] = newContent;
      }
      if (Object.prototype.toString.call(object[element]) === '[object Object]' || Array.isArray(object[element])) {
        modifyContent(newContent, object[element]);
      }
    }
  }
}

modifyContent("newContent", example);

console.log(example);

Answer 9

Answer №5

Separating the recursive traversal and object transformation from your specific task can be beneficial. One approach is to create a helper function called replaceVal. This function will go through an object, invoking your callback function for each nested key-value pair, thus allowing you to customize the value as needed.

You can then define a function like replaceLink according to your requirements. It's important to clarify the exact replacement process for your link. In the provided example, a callback is used to identify keys labeled as "link", evaluating if the corresponding value is a String. If so, it concatenates an uppercase version of the value with a predetermined prefix. However, this logic can be adjusted based on your specific needs.

// Helper Function
const replaceVal = (f) => (o) =>
  Array.isArray(o) 
    ? o.map(replaceVal(f))
  : Object(o) === o
    ? Object.fromEntries(Object.entries(o).map(([k, v]) => [k, replaceVal(f)(f(k, v))])
    : o

// Main Function
const replaceLink = replaceVal (
  (k, v) => k == "link" && String(v) === v ? `new/path/to${v.toUpperCase()}` : v
)

// Test Data
const data = {components: [{name: "header", attributes: {messageBars: [], link: "/link/", navigation: {brand: {link: "/", alt: "blah"}}}}, {name: "body", attributes: {header: {text: "blah"}, buttons: [{children: "OK!", link: "/link/"}]}}]}

// Demo
console.log(replaceLink(data))

.as-console-wrapper {max-height: 100% !important; top: 0}

Answer 10

Separating the recursive traversal and object transformation from your specific task can be beneficial. One approach is to create a helper function called replaceVal. This function will go through an object, invoking your callback function for each nested key-value pair, thus allowing you to customize the value as needed.

You can then define a function like replaceLink according to your requirements. It's important to clarify the exact replacement process for your link. In the provided example, a callback is used to identify keys labeled as "link", evaluating if the corresponding value is a String. If so, it concatenates an uppercase version of the value with a predetermined prefix. However, this logic can be adjusted based on your specific needs.

// Helper Function
const replaceVal = (f) => (o) =>
  Array.isArray(o) 
    ? o.map(replaceVal(f))
  : Object(o) === o
    ? Object.fromEntries(Object.entries(o).map(([k, v]) => [k, replaceVal(f)(f(k, v))])
    : o

// Main Function
const replaceLink = replaceVal (
  (k, v) => k == "link" && String(v) === v ? `new/path/to${v.toUpperCase()}` : v
)

// Test Data
const data = {components: [{name: "header", attributes: {messageBars: [], link: "/link/", navigation: {brand: {link: "/", alt: "blah"}}}}, {name: "body", attributes: {header: {text: "blah"}, buttons: [{children: "OK!", link: "/link/"}]}}]}

// Demo
console.log(replaceLink(data))

.as-console-wrapper {max-height: 100% !important; top: 0}

Iterate through a deeply nested object in JavaScript to update the value of a specific key on every instance

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Setting up a straightforward static server using node.js

The art of handling jQuery promises and interconnected AJAX requests

Encountering an issue where the Facebook chat plugin fails to load, resulting in an

NextJS allows for custom styling of Tiktok embeds to create a unique and

Creating a PHP array for generating a menu hierarchy

Receiving unforeseen results

Using SVG graphics as data labels in a HighChart stacked column chart

Unable to retrieve $_POST data using $.post requests while iterating through options with .each

Sending PHP array data to a JavaScript function

Implementing stop loss with node-binance-api: A step-by-step guide

The preselected value in an AngularJS select box is set to static HTML by

Set up jQuery to execute code when the document is loaded and when

Step-by-step guide on how to change the appearance of a <DIV> using data from a database (JSON

Arrange a JSON response in descending order and filter out specific values

Revise the mobile navigation opening feature to activate by clicking on a link instead of an icon

Positioning a div beside another div without containing it

The management of jQuery events through .on and .off functions, maintaining the correct order, and ensuring their

Are the functionalities of my code implemented with Node.js and callback functions comparable to Java Threads?

When using jQuery Ajax, the data being sent in the post request may include previous

Step-by-step Guide on Initializing Materialize Dropdown Button in React