Continue looping in Javascript until an empty array is identified

Question

Continue looping in Javascript until an empty array is identified

Currently, I am in search of a solution to create a loop in Javascript that continues until the array of objects is empty. The object I am working with looks like this:

"chain": {
    "evolves_to": [{
        "evolves_to": [{
            "evolves_to": [],
            "species": {
                "name": "nidoqueen"
            }
        }],
        "species": {
            "name": "nidorina"
        }
    }],
    "species": {
        "name": "nidoran-f"
    }
}

The goal is to continuously loop until the variable evolves_to is empty and within each iteration, utilize the species.name to display the evolution sequence. For example, "nidoran-f -> nidorina -> nidoqueen". Unfortunately, I have not been able to come up with an effective approach yet. I am feeling slightly lost. Your assistance would be greatly appreciated :)

javascript json typescript vue.js foreach

Answer 1

Answer №1

You have the option to implement a recursive function:

const chain = {
    "evolves_to": [{
        "evolves_to": [{
            "evolves_to": [],
            "species": {
                "name": "nidoqueen"
            }
        }],
        "species": {
            "name": "nidorina"
        }
    }],
    "species": {
        "name": "nidoran-f"
    }
}
, traverse = obj => {
  if(!obj.evolves_to.length) {
    console.log(obj.species.name)
    return
  } else {
    console.log(obj.species.name, "=>")
    traverse(obj.evolves_to[0])    
  }
}

traverse(chain)

Alternatively, you can gather values in an array like below:

const chain = {
    "evolves_to": [{
        "evolves_to": [{
            "evolves_to": [],
            "species": {
                "name": "nidoqueen"
            }
        }],
        "species": {
            "name": "nidorina"
        }
    }],
    "species": {
        "name": "nidoran-f"
    }
}
, arr = []
, traverse = obj => {
  if(!obj.evolves_to.length) {
    arr.push(obj.species.name)
    return
  } else {
    arr.push(obj.species.name)
    traverse(obj.evolves_to[0])    
  }
}

traverse(chain)
console.log(arr.join(" -> "))

Answer 2

You have the option to implement a recursive function:

const chain = {
    "evolves_to": [{
        "evolves_to": [{
            "evolves_to": [],
            "species": {
                "name": "nidoqueen"
            }
        }],
        "species": {
            "name": "nidorina"
        }
    }],
    "species": {
        "name": "nidoran-f"
    }
}
, traverse = obj => {
  if(!obj.evolves_to.length) {
    console.log(obj.species.name)
    return
  } else {
    console.log(obj.species.name, "=>")
    traverse(obj.evolves_to[0])    
  }
}

traverse(chain)

Alternatively, you can gather values in an array like below:

const chain = {
    "evolves_to": [{
        "evolves_to": [{
            "evolves_to": [],
            "species": {
                "name": "nidoqueen"
            }
        }],
        "species": {
            "name": "nidorina"
        }
    }],
    "species": {
        "name": "nidoran-f"
    }
}
, arr = []
, traverse = obj => {
  if(!obj.evolves_to.length) {
    arr.push(obj.species.name)
    return
  } else {
    arr.push(obj.species.name)
    traverse(obj.evolves_to[0])    
  }
}

traverse(chain)
console.log(arr.join(" -> "))

Answer 3

Answer №2

One solution is to use a basic recursive function:

const evolutions = { 
  "chain": {
    "evolves_to": [{
        "evolves_to": [{
            "evolves_to": [],
            "species": {
                "name": "nidoqueen"
            }
        }],
        "species": {
            "name": "nidorina"
        }
    }],
    "species": {
        "name": "nidoran-f"
    }
  }
}

function findNoEvolution(obj, evolutionStages) {
  if (obj.evolves_to.length > 0) {
    for (let i = 0; i < obj.evolves_to.length; i += 1) {
      const found = findNoEvolution(obj.evolves_to[i], evolutionStages);
      if (found) {
        evolutionStages.push(obj.species.name)
        return found;
      }
    }
  }
  evolutionStages.push(obj.species.name)
  return true;
}
const evolutionStages = [];
findNoEvolution(evolutions.chain, evolutionStages);
const evolutionStageString = evolutionStages.reverse().join(' -> ');
console.log(evolutionStageString);

After finding the evolution stages, the array is reversed using reverse() and joined together with arrows using join(' -> ').

Answer 4

One solution is to use a basic recursive function:

const evolutions = { 
  "chain": {
    "evolves_to": [{
        "evolves_to": [{
            "evolves_to": [],
            "species": {
                "name": "nidoqueen"
            }
        }],
        "species": {
            "name": "nidorina"
        }
    }],
    "species": {
        "name": "nidoran-f"
    }
  }
}

function findNoEvolution(obj, evolutionStages) {
  if (obj.evolves_to.length > 0) {
    for (let i = 0; i < obj.evolves_to.length; i += 1) {
      const found = findNoEvolution(obj.evolves_to[i], evolutionStages);
      if (found) {
        evolutionStages.push(obj.species.name)
        return found;
      }
    }
  }
  evolutionStages.push(obj.species.name)
  return true;
}
const evolutionStages = [];
findNoEvolution(evolutions.chain, evolutionStages);
const evolutionStageString = evolutionStages.reverse().join(' -> ');
console.log(evolutionStageString);

After finding the evolution stages, the array is reversed using reverse() and joined together with arrows using join(' -> ').

Continue looping in Javascript until an empty array is identified

Answer №1

Answer №2

Similar questions

Leverage AngularJS to effectively parse JSON data using scope variables

Implementing TypeScript for augmented styling properties in a component - a guide

Having difficulties showing live data in real-time, the Python web application is encountering an "Internal Server Error" while attempting to do so

What is the best way to showcase the chosen items from a treeview in ReactJS?

Node.js program experiences issues with incorporating netCDF files

"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

Connect the child content to the form

Iterating Through Array with Node JS Before Adding a New Property

Updating a MongoDB subarray with $set now includes adding a new entry rather than just updating existing ones

Is there a method to determine the height of the viewport if the DOCTYPE is not specified in Chrome, Firefox, or Safari?

Sending a JSON payload along with a file using Delphi

Exploring the capabilities of AngularJS for efficient testing using Jasmine alongside mixpanel integration

Iterating through a jQuery function to increment value

Error: Sorry, there was an issue with the code (React)

In Vuex, the getters always come back as true

The Iron Seal feature is ineffective when a user tries to log in

Is it possible to make the info box centered and adjust everything to seamlessly fit on all screen sizes?

best practice for parsing JSON strings in Java

typescript add an html element to an existing html document

Acquire a numerical value from a text source and increment it by one using Jquery