Searching for a deeply nested JSON property with lodash

Question

Searching for a deeply nested JSON property with lodash

I am dealing with a JSON API response that has the following structure:

[
  {
    title: "top1",
    sections: [
      {
        section_title: "section1",
        content: [
          {
            content_title: "title1",
            content_id: "id1"
          },
          {
            content_title: "title2",
            content_id: "id2"
          }
        ]
      },
      {
        section_title: "section2",
        content: [
          {
            content_title: "title3",
            content_id: "id3"
          },
          {
            content_title: "title4",
            content_id: "id4"
          }
        ]
      }
    ]
  }, {
    title: "top2",
    sections: [...]
  },
  ...
]

In addition, I have a small array of content IDs arr2 = ['id2','id3']. My task is to search the API response data to find any content_id that matches an ID in arr2.

Although I have some lodash code in place, I realize that my nested forEach approach may not be the most efficient:

_.forEach(response, function(top) {
  _.forEach(top.sections, function(section) {
    _.forEach(section.content, function(content) {
      _.forEach(arr2, function(id) {
        if(id === content.content_id) {
         // Do stuff
        }
      })
    })
  })
})

Do you have any suggestions on how I could optimize this code?

javascript arrays json object lodash

Answer 1

Answer №1

Upon further reflection, I've found that there isn't a more elegant solution using different lodash functions. It appears that utilizing the forEach method is necessary to set the owned properties for each case. One small optimization could be to avoid lodash altogether and replace the innermost forEach with the vanilla JavaScript forEach Array method, as well as using find for a potential performance boost.

response.forEach((topItem) => {
    topItem.sections.forEach((section) => {
        section.content.forEach((content) => {
            if(arr2.find((item) => { return item === content.content_id; })){
                topItem.owned = true; section.owned = true; content.owned = true;
            }
        });
    });
});

I personally prefer arrow function syntax as well...

Answer 2

Upon further reflection, I've found that there isn't a more elegant solution using different lodash functions. It appears that utilizing the forEach method is necessary to set the owned properties for each case. One small optimization could be to avoid lodash altogether and replace the innermost forEach with the vanilla JavaScript forEach Array method, as well as using find for a potential performance boost.

response.forEach((topItem) => {
    topItem.sections.forEach((section) => {
        section.content.forEach((content) => {
            if(arr2.find((item) => { return item === content.content_id; })){
                topItem.owned = true; section.owned = true; content.owned = true;
            }
        });
    });
});

I personally prefer arrow function syntax as well...

Answer 3

Answer №2

You have the ability to create a function that will recursively go through recognized descendant properties.

function deepWalk(collection, childKeys, iteratee) {

  // generating a partial _.each with an iterator that will
  // recursively navigate through properties from the `childKeys` array
  var each = _.partial(_.each, _, function(value, index) {
    // triggering the iteratee callback
    iteratee(value, index);
    // only recursively navigate through properties found in childKeys
    _(value).pick(childKeys).each(each);
  });

  // triggering the iteration
  each(collection);

}

deepWalk(collection, ['sections', 'content'], function(value) {
  if(_.includes(['id2', 'id3'], value.content_id)) {
    // perform any necessary actions here..
    console.log(value);
  }
});

var collection = [
  {
    title: "top1",
    sections: [
      {
        section_title: "section1",
        content: [
          {
            content_title: "title1",
            content_id: "id1"
          },
          {
            content_title: "title2",
            content_id: "id2"
          }
        ]
      },
      {
        section_title: "section2",
        content: [
          {
            content_title: "title3",
            content_id: "id3"
          },
          {
            content_title: "title4",
            content_id: "id4"
          }
        ]
      }
    ]
  }
];

function deepWalk(collection, childKeys, iteratee) {
  
  // generating a partial _.each with an iterator that will
  // recursively traverse properties from the `childKeys` array
  var each = _.partial(_.each, _, function(value, index) {
    // triggering the iteratee callback
    iteratee(value, index);
    // only recursively navigate through properties found in childKeys
    _(value).pick(childKeys).each(each);
  });
  
  // triggering the iteration
  each(collection);
  
}

deepWalk(collection, ['sections', 'content'], function(value) {
  if(_.includes(['id2', 'id3'], value.content_id)) {
    // perform any necessary actions here..
    console.log(value);
  }
});

.as-console-wrapper { min-height: 100%; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Answer 4

You have the ability to create a function that will recursively go through recognized descendant properties.

function deepWalk(collection, childKeys, iteratee) {

  // generating a partial _.each with an iterator that will
  // recursively navigate through properties from the `childKeys` array
  var each = _.partial(_.each, _, function(value, index) {
    // triggering the iteratee callback
    iteratee(value, index);
    // only recursively navigate through properties found in childKeys
    _(value).pick(childKeys).each(each);
  });

  // triggering the iteration
  each(collection);

}

deepWalk(collection, ['sections', 'content'], function(value) {
  if(_.includes(['id2', 'id3'], value.content_id)) {
    // perform any necessary actions here..
    console.log(value);
  }
});

var collection = [
  {
    title: "top1",
    sections: [
      {
        section_title: "section1",
        content: [
          {
            content_title: "title1",
            content_id: "id1"
          },
          {
            content_title: "title2",
            content_id: "id2"
          }
        ]
      },
      {
        section_title: "section2",
        content: [
          {
            content_title: "title3",
            content_id: "id3"
          },
          {
            content_title: "title4",
            content_id: "id4"
          }
        ]
      }
    ]
  }
];

function deepWalk(collection, childKeys, iteratee) {
  
  // generating a partial _.each with an iterator that will
  // recursively traverse properties from the `childKeys` array
  var each = _.partial(_.each, _, function(value, index) {
    // triggering the iteratee callback
    iteratee(value, index);
    // only recursively navigate through properties found in childKeys
    _(value).pick(childKeys).each(each);
  });
  
  // triggering the iteration
  each(collection);
  
}

deepWalk(collection, ['sections', 'content'], function(value) {
  if(_.includes(['id2', 'id3'], value.content_id)) {
    // perform any necessary actions here..
    console.log(value);
  }
});

.as-console-wrapper { min-height: 100%; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Searching for a deeply nested JSON property with lodash

Answer №1

Answer №2

Similar questions

Can you send an array of objects as data in an AJAX post request?

A helpful guide on using workbox to effectively cache all URLs that follow the /page/id pattern, where id is a

Retrieving data from MySQL and mapping it to a model class in Android Studio

Issue with Microsoft Azure and AngularJS: Chart not rendering data as expected

Tap on the child to reveal their parent

Choosing different elements using identical classes in JQuery

Displaying subtotal in a list using Vue.js and conditional rendering with v-if statement

Handle all link clicks on the webpage

Error encountered in the onPostExecute method due to a type mismatch at line 111 in JSON.java, along with a JSONException stating that the input has ended at character 0

Tips for showcasing the Phaser game screen exclusively within a React route

Loop through a list of items and apply the bootstrap-select plugin to each

Eliminate redundant items from the array

Issues involving Npm and JSON format

What could be causing the malfunction of my Superfish menu in Firefox?

Unraveling the mystery of polymorphic list deserialization in Java with ArangoDB

Transforming a CSV row into a JSON object using Java

Issue with Bootstrap4 Carousel not scrolling horizontally

Modify the file format depending on the browser being used as Internet Explorer

Simple Method to Retrieve one document from Firebase v9 in a React Application

Is there a way to effectively eliminate an array of objects in JavaScript or TypeScript and alter the object structure simultaneously?