Access elements of a object inside a object

Question

Suppose this is the object inside object:

let MyObject = {
person : [ {
name: "abc",
age: 100
},
{
name: "xyz",
age: 20
}
]
}

Suppose I want to get the 2nd person's name
Though i can access like this
console.log(MyObject.person[1].name);

But what if i don't know the index of that element thats is [1] in this case ? (Imagine there are 100 of such objects inside the MyObject and I want to access a random one out of it)
So how can i access it without knowing the index of the object in that array?

Answer 1

Let's say you want to find a person by name rather than by index, you could use a `for of` loop:

const findPerson = (name, persons) => {
for(person of persons){
if(person.name == name) return person
}

return false
}

let person = findPerson("xyz", MyObject.person)

However, I personally make use of Array functions based on the many different use cases.

The following is an equivalent to the previous code:

let person = (MyObject.person
.find(item => item.name == "xyz") ?? false)

Things can get more advanced from here. But, this should give you an idea.

Answer 2

[Part 3 of 3 Follow Up]

So... finally you can remove the isMatch function and replace the following:

items.find(isMatch)

with:

items.find(item => item === "xyz")

It's all equivalent.

Hopefully, this gives you a clearer understanding. 😉👌

Answer 3

David Carroll Can u pls explain me a bit about the last 3rd and 4th line 😅(sry for inconvenience I understood it now ) Thanks for helping @David Carroll

Answer 4

[Part 1 of 3 Follow Up]
Spend some time reading about this on the MDN website:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

I'll try to shorten the code to focus on the key parts:

const items = [
{name: "abc"},
{name: "xyz"}
]

items.find(item => item.name === "xyz")

NOTE: `items` is an Array.

Arrays have specific methods that allow for additional capabilities for iterating items.

Many of these Array methods, like Array.find(...) expect a function that returns a Boolean value to indicate if an item is a match. These functions are known as predicates.

The predicate function used for Array.find() requires an arg for the current item of an array.

This predicate could have been written as:

function isMatch(item) {
return item.name === "xyz"
}

items.find(isMatch)

Note: isMatch function is passed to the Array.find() method as a predicate function.

(continued...)

Answer 5

[Part 2 of 3 Follow Up]

Now... let's rewrite isMatch as an arrow function:

const isMatch = (item) => {
return item.name === "xyz"
}

This particular arrow function can be simplified by removing the (...), {...}, and the `return` keyword:

const isMatch = item => item.name === "xyz"

Again... the above line is equivalent to the earlier named function:

function isMatch(item) {
return item.name === "xyz"
}

Visually compare the two examples to build a mental map of each part of the different function types.

Essentially... the left side of the arrow "=>" defines the parameter arg "(item)" and the right side defines the function body with an implicit return statement:

{ return item.name === "xyz" }

A reference to `isMatch` - without the parenthesis - is the equivalent of defining an arrow function and passing it without a name:

item => item.name === "xyz"

This is known as an anonymous function, where isMatch is a named function.

Answer 6

David Carroll Yes , this has given me a very good idea about not only my question but i also learnt a bit of few new things in js .Thanks a lot for ur help.