Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 29, 2020 12:32 pm GMT

How to Traverse an Object of Arbitrary Depth in JavaScript

Sometimes we find that we need to traverse an object and perform some operation on it at some arbitrary depth. While this seems like a tough challenge, we can make use of recursion, mutability, and object references to get the job done in short order.

If you enjoy this tutorial, please give it a , , or and consider:

signing up for my free weekly dev newsletter
subscribing to my free YouTube dev channel

Our Example Challenge: Deep Word Replacement

Let's say we have an object that all the text fields of a dog adoption application our user has provided us. However, the user entered [tbd] in the places where the dog's name should bepicking a dog's name is hard. Alas, our user has finally selected the name Daffodil for his puppy, and we must now replace all the [tbd] strings in our object.

Unfortunately, our object is complex and of arbitrary depth. We must make this string replacement anywhere in our object!

Here's our object:

const application = {  section1: {    question1: {      text: "What will your pet's name be?",      response: '[tbd]',    },    question2: {      text: 'What will the names of all the pets in your house be?',      response: ['Fred', 'Whiskers', '[tbd]'],      subquestion2: {        text: 'How will you take care of your new pet?',        response: 'I will feed [tbd] three times a day and pat her head.',      },    },  },};
Enter fullscreen mode Exit fullscreen mode

Let's think about this problem in steps before we write our solution. Here's what we need to do:

  • Create a function that takes an object as an argument.
  • For each key in that object, if that key is a string, do our word replace. (mutation!)
  • If the key is an object, send that key back through the initial function (recursion!)

We can see how this looks in JavaScript:

function replaceTbd(obj) {  for (let key in obj) {    if (typeof obj[key] === 'string') {      obj[key] = obj[key].replace('[tbd]', 'Daffodil');    }    if (typeof obj[key] === 'object') {      replaceTbd(obj[key]);    }  }}
Enter fullscreen mode Exit fullscreen mode

Kind of simple actually! Let's see if that works on our object.

replaceTbd(application);console.log(application);/*{  section1: {    question1: {      text: "What will your pet's name be?",      response: 'Daffodil',    },    question2: {      text: 'What will the names of all the pets in your house be?',      response: ['Fred', 'Whiskers', 'Daffodil'],      subquestion2: {        text: 'How will you take care of your new pet?',        response: 'I will feed Daffodil three times a day and pat her head.',      },    },  },};*/
Enter fullscreen mode Exit fullscreen mode

Success! Do note that we didn't return anthing from our replaceTbd functionit's mutating our input object as it dives down the tree! If this isn't desired behavior, you could consider looking into a deep clone library to first clone your object and then mutate the clone.

Conclusion

Working with deep objects can be intimidating, but it gets much easier when you master the concepts of recursion, mutability, and object references.

If you enjoy this tutorial, please give it a , , or and consider:

signing up for my free weekly dev newsletter
subscribing to my free YouTube dev channel


Original Link: https://dev.to/nas5w/how-to-traverse-an-object-of-arbitrary-depth-in-javascript-chm

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To