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

What steps can be taken to restrict users to providing only one comment and rating for each item?

Assign a value using the select component from Material UI

What is the best approach to managing a 204 status in Typescript in conjunction with the Fetch API

Issue with jQuery week calendar: Existing data not loading correctly into the calendar

How can I incorporate a script from the node_modules directory into a VueJS project?

Refining strings to enum keys in TypeScript

Ways to send a JSON object to a Node.js server

AngularJS Uncaught ReferenceError: variable is not

What is the best way to retrieve data from a JSON object?

Using jQuery Plugin for Date Operations

programming for the final radio button text entry

Can we convert oddly structured data to XML format?

Using Node and Express to handle form submissions, we can create a POST request that sends data to the server

Display/Conceal content with JQuery on a PHP webpage

"Sending a POST request from the smartphone application client developed using the Meteor

assigning a numerical value to a variable

Issue encountered when trying to load a Jquery Datatable with input from a textbox

Cross-origin request headers not permitted by the Access-Control-Allow-Headers policy in NodeJS and ExpressJS

Retrieving a specific variable from a cookie value that is stored within a JSON array

The Ocelot API Gateway is a powerful tool for managing