Discovering a specific element within a deeply nested JavaScript object

Question

Discovering a specific element within a deeply nested JavaScript object

let data = [{
    "ItemAID" : 1,
    "ItemADesc" : [ {
      "ItemBid" : 11,
      "ItemBDesc" : [ {
        "ItemCid" : 111,
        "ItemCTitle" : "TitleC111",
      }, {
        "ItemCid" :112,
        "ItemCTitle" : "TitleC112",
      } ]
    }]},

    {
        "ItemAID" : 2,
        "ItemADesc" : [ {
          "ItemBid" : 21,
          "ItemBDesc" : [ {
            "ItemCid" : 211,
            "ItemCTitle" : "TitleC211",
          }, {
            "ItemCid" :212,
            "ItemCTitle" : "TitleC212",
          } ]
        }]}]

console.log(data.find(A => A.ItemADesc.find(B => B.ItemBDesc.find(C=>C.ItemCid === 212)?.ItemCTitle)));

I want to retrieve the value of ItemCTitle when the itemCid matches a specific ID. The current code returns the entire object with matching itemCid, instead of just the nested variable value. Any help will be highly appreciated.

javascript arrays json

Answer 1

Answer №1

With the use of Array.reduce, it becomes possible to extract only the array of ItemC and easily locate the desired item within that array.

let input = [{
  "ItemAID" : 1,
  "ItemADesc" : [ {
    "ItemBid" : 11,
    "ItemBDesc" : [ {
      "ItemCid" : 111,
      "ItemCTitle" : "TitleC111",
    }, {
      "ItemCid" :112,
      "ItemCTitle" : "TitleC112",
    } ]
  }]},

  {
      "ItemAID" : 2,
      "ItemADesc" : [ {
        "ItemBid" : 21,
        "ItemBDesc" : [ {
          "ItemCid" : 211,
          "ItemCTitle" : "TitleC211",
        }, {
          "ItemCid" :212,
          "ItemCTitle" : "TitleC212",
        } ]
      }]}];

const itemC = input.reduce((acc, cur) => {
  if (cur['ItemADesc'] && cur['ItemADesc'].length > 0) {
    cur['ItemADesc'].forEach(({ ItemBDesc }) => {
      if (ItemBDesc.length > 0) {
        acc.push(...ItemBDesc);
      }
    });
  }
  return acc;
}, []).find(({ ItemCid }) => ItemCid === 211);

console.log(itemC.ItemCTitle);

Answer 2

With the use of Array.reduce, it becomes possible to extract only the array of ItemC and easily locate the desired item within that array.

let input = [{
  "ItemAID" : 1,
  "ItemADesc" : [ {
    "ItemBid" : 11,
    "ItemBDesc" : [ {
      "ItemCid" : 111,
      "ItemCTitle" : "TitleC111",
    }, {
      "ItemCid" :112,
      "ItemCTitle" : "TitleC112",
    } ]
  }]},

  {
      "ItemAID" : 2,
      "ItemADesc" : [ {
        "ItemBid" : 21,
        "ItemBDesc" : [ {
          "ItemCid" : 211,
          "ItemCTitle" : "TitleC211",
        }, {
          "ItemCid" :212,
          "ItemCTitle" : "TitleC212",
        } ]
      }]}];

const itemC = input.reduce((acc, cur) => {
  if (cur['ItemADesc'] && cur['ItemADesc'].length > 0) {
    cur['ItemADesc'].forEach(({ ItemBDesc }) => {
      if (ItemBDesc.length > 0) {
        acc.push(...ItemBDesc);
      }
    });
  }
  return acc;
}, []).find(({ ItemCid }) => ItemCid === 211);

console.log(itemC.ItemCTitle);

Answer 3

Answer №2

If you're in need of locating deeply buried objects, consider utilizing the library known as d-forest.

Answer 4

If you're in need of locating deeply buried objects, consider utilizing the library known as d-forest.

Discovering a specific element within a deeply nested JavaScript object

Answer №1

Answer №2

Similar questions

Starting a fresh Angular project yields a series of NPM warnings, notably one that mentions skipping an optional dependency with the message: "npm

Can the ASP.NET MVC 3 route constraints be modified to return a 400 Bad Request with JSON responses instead?

What is the best way to create separate positions for items within a single div?

Regular expressions to extract JSON data

Endless cycle plaguing Grunt tasks

Refresh a DIV using two SQL queries in forms

How to delete a specific element from the DOM using its ID in JavaScript

Accessing JSON values using JQuery

Manipulating Python lists

How to efficiently retrieve data from a JSON file stored on an SD Card and showcase the information on a textview using Android?

Steps to send an array through the $_POST array using form.serialize() in ajax

Building a Database in a Node.js Express Application Using Jade and JavaScript

How can I retrieve the value of a specific JSON attribute in Cloud Functions?

How can I retrieve the width of a responsive React element during its initial rendering phase?

How can Vue detect modifications made in the edited field?

The HTML Style for implementing HighChart title text does not work when exporting files

Encountering issues with creating a session in Selenium/webdriver while utilizing Safari 12

I keep encountering the error message "ReferenceError: window is not defined" in Next.js whenever I refresh the page with Agora imported. Can someone explain why this is happening?

When the 'keyup' event is detected, trigger the function only on keyup

Save the test outcomes in HTML format using cypress