JavaScript Problem: How to Iterate over the Properties of an Object and its Children Objects

[@sina9707]

finally after lots of searching. Thanks A LOT! 💯

[@AllThingsJavaScript]

Glad I could help!

[@demiansims728]

Such a great tutorial! Being a junior developer, I know have a much better understanding of recursive iterations!

[@simas1266]

No words for the video, just what i was looking for. Thanks a lot!!!

[@AllThingsJavaScript]

Glad it helped!

[@arunkaiser]

AWESOME 😍😍😍 please take care of yourself. I pray god to save u from Corona we need a tutor like u, we never want to miss u, pls take care

[@AllThingsJavaScript]

Thank you so much!!

[@batuhankir8402]

i see a lot of tutorial about js. u are the best. i was looking a good tutorial to develop myself i found u. thank u so much sir

[@AllThingsJavaScript]

Glad I could help!

[@mocococo2877]

Thank you and greetings from Bulgaria. I guess I am moving toward mid level since I noticed that you missed the case of Array which also returns object. And I saw it has already been discussed. And then I pat myself on the back. Best wishes.

[@terrytas13]

This is great! Helped me solve an issue with a public API I'm using for a website. After hours and hours of trying to figure out how to parse this JSON object, recursion helped me on the right path. Thank you

[@AllThingsJavaScript]

Glad it helped!

[@muqaddamrta]

All your tutorial videos are great, thank you!

[@AllThingsJavaScript]

Glad you like them!

[@krahul456]

Thanks a lot !!! Exactly what I was searching for !! Subscribed !

[@AllThingsJavaScript]

Welcome!

[@krahul456]

@@AllThingsJavaScript Also how do I sto each of these records as an array or how do we fetch a record from this after iterating ?

[@AllThingsJavaScript]

@@krahul456 While you are iterating you could push any value onto an array. You could also use Object.entries() to retrieve an array of key, value pairs.

[@mbbvines1848]

It's really a straightforward and informative video, Before this, I am struggling a lot with this issue. thankyou so much. your work is highly appricialted.

[@AllThingsJavaScript]

You are so welcome!

[@lagajjar]

very very perfect code for understanding beginner web developer easily getting javascript knowledge from All Things Javascript...Thanks a LOT

[@pavkey88]

Excellent! That function is going on my snippets repository, great tutorial

[@AllThingsJavaScript]

Cool, thanks!

[@max4865]

Great video!!! The final version can be also condensed into one function like this: let printObject = obj =>{ for (key in obj){ if (obj[key]===null || typeof obj[key]!=='object') console.log(key, obj[key]) else printObject(obj[key]) } }

[@carefree_ladka]

Well an array is also an object. Array.isArray(obj[key]) must be checked too

[@amolmali3583]

Nice explanation, very useful tutorial. Thanks a lot..

[@bigjimtrucker6042]

Awesome explanation thanks mooo cho

[@niklarcsh]

really good example, thanks again

[@shabnamnaaz4676]

excellent tutorial , thankyou so much

[@dilbaghsingh6069]

guru ji you are awesome

[@rohiniyadav5736]

Excellent👍

[@microshortsytube]

excellent

[@yurii8710]

Thanks, very useful! It would be great to see how iterate through object with mixed nested arrays and objects.

[@michaelrooze278]

I cant find anywhere that shows this....send me a link if you find something please

[@agniwebdev774]

Thank you. 😊 Very helpful.

[@michaelrooze278]

this isnt that complicated but it seems like there should be a much easier way to do this. Thanks for sharing!

[@bug244]

Sir thankuu so much!

[@umangternate]

This was needed

[@AllThingsJavaScript]

Glad it was helpful!

[@mitchell4217]

Great stuff. Is there a way you could go over the same thing, only using the newer map/filter/reduce methods?

[@AllThingsJavaScript]

Can you give me an idea of what the end result would be that you are looking for. What we are doing in this example fits best how it is working. Also, have you seen the other tutorials I've done using these methods?

[@milanmidzovic6841]

Great video. What happens if there is an array inside nested object? Can you use this function to get items from an array? Or you need to make a new function? And how can i display this data inside html? Thanks.

[@AllThingsJavaScript]

One possible approach is to check and see if the property is an array, and then you can iterate through the array using a loop, otherwise just display the value.

[@vodek4791]

How about scenario, if child is an array? ;)

[@AllThingsJavaScript]

Good question! I will have to cover that one.

[@prakharvashistha6882]

The Code Below Recursive prints all values in JSON even if child is an Array dfs(obj); function isObject(x){ if(x===null) return false; else return (typeof x === 'object'); } function dfs(obj){ for(var x in obj){ if(isObject(obj[x])){ if(Array.isArray(obj[x])){ obj[x].forEach(e => { if(isObject(e)) dfs(e); else console.log(e); }); }else{ dfs(obj[x]); } }else{ console.log(obj[x]); } } }

[@xeux-i3]

@@prakharvashistha6882 yup array is considered as well a JSON object

[@F4ILCON]

Quick question, if I want to access street1 value I can just do person.address.street.street1, the objective is to Iterate over nested properties of an Object and not its value, is this correct?

[@AllThingsJavaScript]

One example, if you receive an object and you don't know exactly what it contains, you can still traverse it. And yes as you mentioned you could traverse the properties as well.

[@sologuitardeshchatterjee]

Nice tutorial indeed.. Thanks!.. But one thing I want to highlight that only typeof val === "object" is not the safest check for an object because it would return true even if val is an Array also. So better to check like (typeof val === "object") && (toString.call(val) !== "[object Array]") Or, val.constructor === Object

[@AllThingsJavaScript]

Yes, you are right. This is true for function as well. To be thorough, we would need to check for function and we could use isArray for array.

[@AllThingsJavaScript]

Although function would return 'function' so it is not an issue in this case. So forget I included that.

[@akj3388]

I didn't get it because the console.log is in the "else" block so it only prints if it is not an object so how does it print anyway?

[@AllThingsJavaScript]

So we are trying to iterate over properties. If the property is an object, it startings going through its properties. If it is not an object it displays the property information to the console. Does that help?

[@akj3388]

@@AllThingsJavaScript I probably need to watch the video again. But thanks for your input.

[@abdelrhmankamal1370]

How can I edit this object? For example, I want to change the street1 value. How can this be possible and how can I save it in the same object? I use

[@AllThingsJavaScript]

You would do something like this: person.address.street = '200 N. main'; You may also want to view this tutorial: kzbin.info/www/bejne/r4CZaIpqqalphrM

[@davidsuh1257]

Thanks for this great tutorial Steven. It's not clear to me why you bother to check if val is null (line 19), since null is returned for 'val === null' and the code doesn't fail.

[@AllThingsJavaScript]

Enter typeof null in the console. You will see it returns 'object'. So if null is considered an object by JavaScript we want to eliminate that before we check for an object. Does that make sense?

[@davidsuh1257]

I did that, and then I created a property with a value of null in the code and it still ran without problems.

[@miraclesdohappen2352]

Hi great tutorial, i have a question what about the array of objects nested, in your example its plain JSON objects, can you explain how to loop through if i encounter an array of objects as well. This would complete the whole process. Once again clear and concise explanation keep the good work..

[@AllThingsJavaScript]

So an array of objects as one of the properties?

[@miraclesdohappen2352]

@@AllThingsJavaScript Yes as an array of child objects, look below a sample json which could give a better view. Thank you for your fast response highly appreciate { "array": [ { "one": 1 }, { "two": [ { "name": "xx", "age": 34 }, [ { "address": "Watson str" } ] ] } ], "boolean": true, "color": "gold", "null": null, "number": 123, "object": { "a": "b", "c": "d" }, "string": "Hello World" }

[@AllThingsJavaScript]

@@miraclesdohappen2352 Sounds good. I will add it to the list.

[@kacperkepinski4990]

if (isObject(obj[val])) { let details = document.querySelector('details'); let summary = document.createElement('summary'); details.appendChild(details); } i want do sth like that but nothing happens

[@AllThingsJavaScript]

So there is a lot going on here, so difficult to tell where the problem might be by what you provided. Do some logs to see if each step you are getting what you want.

[@TheBcool88]

Instead console log how can we return object with all the values?

[@AllThingsJavaScript]

You might want to try returning the main object, and then return any child object that you find. Does that help?

[@TheRafinhay]

Hey, I've got a very complex object to Iterate over using javascript, and I was wondering if you could help me is there any way you could help me?

[@AllThingsJavaScript]

Post your code and we can see if we can help.

[@seenuvasanv]

Could you consider this correction, for (const key in object) instead of for (let val in object) !!

[@AllThingsJavaScript]

Yes, there is nothing wrong with that. You will usually see me use let for objects because of what it communicates. Objects are mutable and const can send the message that they can't be changed when it reality it only means they can't be reassigned. It is just a personal issue I have with const. :-)

[@seenuvasanv]

@@AllThingsJavaScript Thanks for the reply, the 'val' suppose to be 'key'

[@AllThingsJavaScript]

@@seenuvasanv Yes, sorry I misunderstood the question. When using for in the variable in this case becomes the key. However, you need to use let instead of const because the variable is reassigned.

[@seenuvasanv]

@@AllThingsJavaScript Thanks

[@prakharvashistha6882]

The Code Below Recursive prints all values in JSON even if child is an Array dfs(obj); function isObject(x){ if(x===null) return false; else return (typeof x === 'object'); } function dfs(obj){ for(var x in obj){ if(isObject(obj[x])){ if(Array.isArray(obj[x])){ obj[x].forEach(e => { if(isObject(e)) dfs(e); else console.log(e); }); }else{ dfs(obj[x]); } }else{ console.log(obj[x]); } } }

[@supercompooper]

Circular references in objects? You have an infinite loop in your code.

[@AllThingsJavaScript]

Where do you see a problem? Be more specific so it can either be explained or verified.

[@supercompooper]

@@AllThingsJavaScript let a={a:null};a.a=a -- try recursively iterating/printing that? It's circular. You should keep references in a weakmap as you traverse or have a max depth so if you recurse too deep you can stop. Cheers

[@SatoshiCommentorto]

const fn = () => {}