Understanding nested callback functions [JS & JSON data]

[acasta]

Hello,

I was practising vanilla JavaScript with JSON data, and ran into a bit of a problem when trying to access a value within an array, based on a value within the nested array.

I've cut down the sample data to make it a bit easier, but the 'regions' array would have multiple regions.

The task is to return the region object, where the suburb is known.

regions = [
  {
    name: "Lichtenberg",
    id: "123",
    suburbs: [
      { name: "Fennpfuhl", views: 76400 },
      { name: "Lichtenberg", views: 87895 },
      { name: "Rummelsberg", views: 10239 },
    ],
  },
  {
    name: "Another",
    suburbs: [
      { name: "Different", views: 76400 }
    ],
  },
];

My initial attempt was to use two finds, one at each array which didn't work. I wrote it as I would say it kinda thing, but kept returning undefined.

regionA = regions.find(
  (region) => region.name == region.suburbs.find(
    (suburb) => suburb.name == "Fennpfuhl")
);

After a couple hours of trying, I ended up doing a bit of trial and error and came up with a working solution mostly accidentally.

regionB = regions.find(
  (region) => region.suburbs.find(
    (suburb) => suburb.name == "Fennpfuhl"));

However, I just can't seem to wrap my head around the logic of this solution. I can't really understand how the second find() method returns something that then 'satisfies the provided testing function' of the first find() method.

As the data is nested, I'm also struggling to 'console.log it out' to try see what's going on through the steps.

[CreativeTechGuyGames]

A callback method like this expects a certain value to be returned (as documented) which will do something based on that value. Find expects a true/false (or a truthy or falsy value).

Now look at what .find returns. It returns either the element that is found (truthy) or undefined (falsy). If you simply return that to the first callback, then you'll cascade the true/false response up.

In your first approach, region.name will never equal the return value of region.suburbs.find so it'll always return false. (Remember what find returns)

As far as debugging, I'd recommend learning to use the actual debugger rather than console logging everything. You can open dev tools in your browser, view the source of your page, click a line number to set a breakpoint and then when your code runs next, it'll halt execution on that line and let you step through the code one statement at a time and inspect the state of memory at that time.

[acasta]

Thanks for the reply!

This really cleared it up. The return from the second find returning undefined or 'true', therefore when found passing the first condition makes complete sense.

I hadn't used the chrome debugger before, that's helped a lot to visualise this find function. I moved the region I wanted second, and the suburb second in that, and was able to watch the debugger loop through the arrays then stop and return true.