Trying to find a property recursively in JavaScript

90
January 23, 2020, at 8:20 PM
var initialize = {
      '0': {   
         type: 'tag',
         name: 'img',
         attribs: { 
            src: 'path/to/file.png',
            alt: 'SEO is good' 
         },
       },
      '1': { 
         type: 'tag',
         name: 'img',
         attribs: { 
             src: 'path/to/another/image.jpg',
            alt: 'SEO is GREAT' 
         }
       }

I have an object and want to traverse recursively until I get to my property and value I wish.

Isn't this how you would do it ?

function iterObj(obj) {
  var arr = []
  arr.push(obj)
  return arr.map(obj => {
    var newObj = {}
    if (obj !== null && typeof obj === "object") {
      iterObj(obj);
    }
    newObj[obj.src] = obj.src;
    return newObj;
  })
}

So shouldn't iterObj(initialize) yield:

[{src: 'path/to/file.png'}, {src: 'path/to/another/image.jpg'}]
Answer 1

In order to check each property of the object, you will need to get a list of the object's properties and/or their respective values, either using Object.keys(), Object.values() or Object.entries(). From there, you will need to check if each value meets the following criteria:

1) If it has a src property, push that property and continue on

2) If it is an object, and not null, recurse over the object to check if it, or its children have a src property

Then you concatenate the results of the recursive calls to your original array and return the final results. This is one of the key pieces you were missing. You were making the recursive calls, but not doing anything with them.

The reason you can't use .map like you were, is because you're not returning a src from an object 1-to-1. An object could contain any number of child src properties, or it could contain 0. You'll need to manually build your results list instead.

Here's a working example of what you're trying to do:

var initialize = { 
  '0': {    
      type: 'tag', 
      name: 'img', 
      attribs: {  
        src: 'path/to/file.png', 
        alt: 'SEO is good'  
      }, 
    }, 
  '1': {  
      type: 'tag', 
      name: 'img', 
      attribs: {  
          src: 'path/to/another/image.jpg', 
        alt: 'SEO is GREAT'  
 
      } 
    } 
} 
 
function iterObj(obj) { 
  var arr = [] 
  for (let value of Object.values(obj)){ 
    if (value.src) { arr.push({ src: value.src }) } 
    if (value !== null && typeof value === "object" && !Array.isArray(value)) { 
      arr.push(...iterObj(value)); 
    } 
  } 
  return arr; 
} 
 
console.log(iterObj(initialize));

READ ALSO
Element slides up and down repeatedly on scroll

Element slides up and down repeatedly on scroll

I am creating a scroll to top button that appears when a user has scrolled to a certain pointI created a CodePen that works, but my regular code doesn't; the button slides up and down repeatedly

113
Google script time out

Google script time out

My script is timing out, I guess because it's going over the 6 minute limitDoes anyone have an idea how I can optimize it so it runs faster?

110
Move text insertion point (caret) on click

Move text insertion point (caret) on click

To enhance UX by catching miss-clicks in my form, I'm using the following code on a bounding box around each text field:

108
reactjs custom component input value doesnt update with state change

reactjs custom component input value doesnt update with state change

I am working on a list app, and I am having issues with the components not updating correctlyI pull the users list from a JSON file and save it in a state

72