DEV Community: AlexMcD-git

Recursive Fetching In Javascript

AlexMcD-git — Sat, 14 Jan 2023 04:28:19 +0000

For my latest project, I am working on finding degrees of separation between a given player, and the top ranked group, known as "Challenger"(which consists of the top 200) in the game League of Legends. All of this is made possible by the RiotAPI.

The process I had in mind was to look up other players from the 10 most recent games, find the highest ranked player, and repeat the process with said player if they are not a "Challenger" rank. The basic structure of the process would be:

function findChallenger(playerID){
    //lookup recent games with playerID
    //lookup players from those games
    //find the rank information on those players
    //sort the players by rank
    if (highestRankedPlayer.tier!== "CHALLENGER"){
        findChallenger(highestRankedPlayer.id)
    }
}

In order to implement this with data from the API, fetch requests need to be made. Not only that, but the data for each fetch is reliant on the data from the previous fetch. In order for this to work we need to made the 2nd fetch after the promise of the first is resolved, like so:
(using "data1.url" as an example of how the data of the first fetch is necessary towards making the 2nd)

fetch(url1)
.then(response1=>response1.json())
.then(data1=>{
    fetch(data1.url)
    .then(response2=>response2.json()
    .then(data2=>/*process data2*/)
    }
)

In this manner I "nested" fetch requests in order to reach all the API endpoints necessary for the functionality of my project on github here, and the specifics of making these calls are available on this particular file. The particular point of recursion is where, within "findChallenger(){}" (after the best player from your 10 most recent games is found)

if (bestPlayer.tier ==="CHALLENGER"){
    return
}
else{
    summonerLookup(bestPlayer.summonerName)
}

I would recommend anyone looking to try out an API requiring authentication give the RiotAPI a go (being familiar with League of Legends, Valorant, or Legends of Runeterra is also helpful) due to the generous rate limits, intuitive end points, and ease of applying for an increase.

Dynamic Dropdown Selection Options for forms using React.js

AlexMcD-git — Thu, 06 Oct 2022 01:46:25 +0000

Drop down options on forms are an important aspect of the functionality of my react-redux/ruby on rails project, RuneScape themed task bingo, viewable here (hosted on heroku).

I found myself satisfied with the outcome and wanted to show how I built out the result starting at the HTML foundation up to dynamic use with react.
Starting with the basics of a form. (just the "select" and "submit" parts for this example even though it had more inputs in the project)

return(
      <form>
        <label>Which team are you submitting for? </label>
        <select name="team">
          <option>Select A Team</option>
          {//teams need to populate as <option> tags}
        </select>
        <button type="submit">Submit</button>
      </form>
)

From there I would incorporate the react elements such as state and handling changes or submitting.

const [formState, setFormState] = useState(initialState)
function handleSubmit(e){
  e.preventDefault()
  //patch request to backend and reset form state
}
const handleChange = (e) => {
    const { name, value } = e.target
    setFormState((prevState) => ({...prevState, [name]: value}))
}
return(
      <form onSubmit={(e) => handleSubmit(e)}>
        <label>Which team are you submitting for? </label>
        <select name="team" value={formState.team} onChange={handleChange}>
          <option>Select A Team</option>
          {//teams need to populate as <option> tags}
        </select>
        <button type="submit">Submit</button>
      </form>
)

Now we have the basics of a form that will keep its contents in state and send a patch request when submitted. The remainder of the options come from the active "game" that is held in the redux store. We pull that into this component with:

  const activeGame = useSelector ((state) => state.game.value)

Since our game object has a board array, each with the associated team, we can just use .map to create components for each team to fill in the tag.

        <select name="team" value={formState.team} onChange={handleChange}>
          <option>Select A Team</option>
          {activeGame.boards.map(board => <option key={board.team.id}>{board.team.team_name}</option>)}
        </select>

The intuitive nature of React made this fairly straightforward to do even after only a few months coding in javascript. If you have a different or better way of creating select options for forms please share below as I'm always looking to improve my own practices.

Serializers for your Serializers

AlexMcD-git — Tue, 28 Jun 2022 23:15:20 +0000

The last few weeks I was learning ruby on rails and was especially impressed by the powerful simplicity of serializers. For my example, I build an app for tracking experiments and chemical inventory for a lab group. Users can log in and create experiments and attach or remove chemicals to an experiment. Chemicals can also be created in the DB, have their amount edited, and be removed. For example, I can create an experiment with the description "Baking soda and vinegar volcano". For this I can add the existing chemicals, baking soda, and vinegar. Important to note that these chemicals could be part of multiple experiments at once, so the models are connected with a join table like so:

#/experiment.rb
class Experiment < ApplicationRecord
    has_many :chemical_experiments, dependent: :destroy
    has_many :chemicals, through: :chemical_experiments
    belongs_to :user

#/chemical.rb
class Chemical < ApplicationRecord
    has_many :chemical_experiments, dependent: :destroy
    has_many :experiments, through: :chemical_experiments

#/chemical_experiment.rb
class ChemicalExperiment < ApplicationRecord
  belongs_to :chemical
  belongs_to :experiment

#/user.rb
class User < ApplicationRecord
    has_many :experiments

If I log out and then back in, I want to be able to fetch all of the user's data in one request, so that I can make use of React's responsive rendering with state. If set up the same :belongs_to and :has_many for user, experiments, and chemicals (the join table and through: is not needed in serializer if the models are set up correctly).

#/user_serializer.rb
class UserSerializer < ActiveModel::Serializer
  attributes :id, :username
  has_many :experiments

#/experiment_serializer.rb
class ExperimentSerializer < ActiveModel::Serializer
  attributes :id, :description, :is_complete
  has_many :chemicals

#/chemical_serializer.rb
class ChemicalSerializer < ActiveModel::Serializer
  attributes :id, :name, :amount_in_grams, :location

So, our user#show method (GET /user/:id) should return a user object with id, username, and an array of experiments. Each experiment object should return it's attributes and an array of chemical objects.

#/users_controller.rb
    def show
        user = User.find(params[:id])
        render json: current_user, status: 200
    end

Fetching user with id of 1 would return something like this:

{
  "id": 1,
  "username": "Alex",
  "experiments": [
    {
      "id": 1,
      "description": "Baking soda and vinegar volcano",
      "is_complete": false
    }
  ]
}

The problem is that, by default, ActiveModel Serializer only will return one layer deep. In order to return the next layer, chemicals associated with the experiment, we need to make a slight change in our user_controller.rb.

#/users_controller.rb
    def show
        user = User.find(params[:id])
        render json: current_user, include: ['experiments', 'experiments.chemicals'], status: 200
    end

with this slight change we have just a few lines of code split between a few files that builds our tree of data. What the fetch request should now return is the user with all of the nested data that we built serializers for.

{
  "id": 1,
  "username": "Alex",
  "experiments": [
    {
      "id": 1,
      "description": "Baking soda and vinegar volcano",
      "is_complete": false,
      "chemicals": [
          {
              "id": 1,
              "name": "Acetic Acid",
              "amount_in_grams": 500,
              "location": "Acids Cabinet, Lab B"
          },
          {
              "id": 2,
              "name": "Sodium Bicarbonate",
              "amount_in_grams": 1000,
              "location": "Chemical Storage, Shelf 2"
          }
      ]
    }
  ]
}

This nicely structured data will make building out the front end much easier, especially in a framework like react. I hope other developers taking their first delve into ruby on rails will find some of this information useful.

Algorithms Part 2 : A Beginner's Attempt (at improvement and translation)

AlexMcD-git — Fri, 03 Jun 2022 02:39:24 +0000

As mentioned in my last post, I wanted to revisit the same problem after learning some ruby. Not only did I want to "translate" from one language to another, I wanted to attempt at optimization. Here is my javascript solution. The full question is both in the repl and previous blog.

The TL;DR is starting from an array of all false values, act upon it from an array of queries. First value of a query determines SET(1) or GET(2). SET means you turn the value in the starting array true, GET means you determine the position (indexing starts at 1) of the next true from the given starting position. SET has no output. If there are no ouputs for the GET, output is -1.

testArray = [false, false, false, false, false]
queries = [[2, 3], [1, 2], [2, 1], [2, 3], [2, 2]]
expectedOutput = output = [-1, 2, -1, 2]

I tried to recreate my javascript solution as similarly as possible using ruby methods as such.

testArray = [false, false, false, false, false]
queries = [[2, 3], [1, 2], [2, 1], [2, 3], [2, 2]]
outputArray =[]

queries.each {|q| 
  if q[0]==1
    testArray[q[1]-1]=true
  elsif q[0]==2
    found = false
    i=q[1]-1
      until found || i>testArray.length do
        if testArray[i]
          outputArray<<i+1
          found = true
        end
        i=i+1
      end
    if found == false
      outputArray<<-1
    end
  end
}
print outputArray

As mentioned before, this could run very long if the GET were to have to search a very long "testArray" only to return -1. What if setting also stored the value to an array of everything that has been set? I also had the idea to store the max value separately in case the "memoryArray" get large. First step is to chop down the "if GET" and store the SETs.

testArray = [false, false, false, false, false]
queries = [[2, 3], [1, 2], [2, 1], [2, 3], [2, 2]]
outputArray =[]
memoryArr=[]
memoryArrMax= 0

queries.each {|q| 
  if q[0]==1
    testArray[q[1]-1]=true
    memoryArr<<q[1]
    if q[1]>memoryArrMax
      memoryArrMax=q[1]
    end
  elsif q[0]==2
    if q[1] > memoryArrMax
      outputArray<<-1
    else
      puts 'i should be here 2 times'
    end
  end
}
print memoryArr
puts 
print outputArray

console:

i should be here 2 times
i should be here 2 times
[2]
[-1, -1]

So we see the output array is properly getting -1 twice, like before, but without even searching the the testArray. (I stored the max as a separate variable because the memoryArray could get pretty big, so in the worst case the .max built in method would take longer to recalculate every time there is a GET, I'm guessing, as opposed to a single comparison with each SET).

Next we add what to do if we have a GET where we know the return should not be -1. We need to find the first VALUE in memoryArray (which corresponds to indexes of true values in testArray) that is greater than or equal to the index provided with our GET request. This requires the array to be sorted. To cut down on sorting, we can opt to only sort on a GET request, instead of after every SET. Additionally, this can further be reduced by not sorting with consecutive GETs. I will add a boolean to track if our last query was a GET. This brings our final solution to:

testArray = [false, false, false, false, false]
queries = [[2, 3], [1, 2], [2, 1], [2, 3], [2, 2]]
outputArray =[]
memoryArr=[]
memoryArrMax= 0
lastWasGet=false

queries.each {|q| 
  if q[0]==1
    testArray[q[1]-1]=true
    lastWasGet=false
    memoryArr<<q[1]
    if q[1]>memoryArrMax
      memoryArrMax=q[1]
    end
  elsif q[0]==2
    if q[1] > memoryArrMax
      outputArray<<-1
    else
      if !lastWasGet
        memoryArr=memoryArr.sort
        lastWasGet=true
      end
      for index in memoryArr do
        if index>=q[1]
          outputArray<<index
        end
        break if index>=q[1]
      end
    end
  end
}

Repl here

I understand that there may be some limitations of the .sort method that may make this solution also sub-optimal. I still don't think it could be worse than the worst case of the previous brute-force-y solution. If you made it this far, let me know what your think, and how you would approach this!

Algorithms : A Beginner's Attempt and Reflection

AlexMcD-git — Fri, 13 May 2022 17:48:30 +0000

As someone new to algorithm problems, seeing a big paragraph of words for a math problem can seem kind of intimidating. Here's an example of such a problem I came across only a week into practicing much simpler problems. Feel free to take a crack at it before having a look at my process:

Answer a Query
Imagine a length-N array of booleans, initially all false. Over time, some values are set to true, and at various points in time you would like to find the location of the nearest true to the right of given indices.
You will receive Q queries, each of which has a type and a value. SET queries have type = 1 and GET queries have type = 2.
When you receive a SET query, the value of the query denotes an index in the array that is set to true. Note that these indices start at 1. When you receive a GET query, you must return the smallest index that contains a true value that is greater than or equal to the given index, or -1 if no such index exists.
Input
A list of Q queries, formatted as [type, index] where type is either 1 or 2, and index is <= N
1 <= N <= 1,000,000,000
1 <= Q <= 500,000

Output
Return an array containing the results of all GET queries. The result of queries[i] is the smallest index that contains a true value that is greater than or equal to i, or -1 if no index satisfies those conditions.
Example
N = 5
Q = 5
queries = [[2, 3], [1, 2], [2, 1], [2, 3], [2, 2]]
output = [-1, 2, -1, 2]
The initial state of the array is [false, false, false, false, false].
The first query is GET 3, but no values in the array are true, so the answer is -1.
The second query is SET 2, so the value at index 2 is set to true.
The new state of the array is [false, true, false, false, false].
The third query is GET 1, and the index of the true value nearest to 1 (to the right) is 2.
The fourth query is GET 3, but no values to the right of index 3 are true.
The fifth query is GET 2, and the value at index 2 is true.

If, like me, you're new to problems like this, it can be hard to decide where the code for something like this would even start. When lost, I find it easiest to verbalize the needs of the problem before coding them.

Input is two arrays, one starts out always the same (repeating array of "false", initially) and the other one, "queries", performs the operations to give us the output array.

The output array is correlated to the "queries" array, but doesn't have to match it in length.

We perform one of two actions based on the first value of a query.

This seemed like enough to get started, so lets begin with setup. with two arrays and a function that "SETs" or "GETs". Since our output doesn't directly match anything we will start empty and add to it in our function:

const queries = [[2, 3], [1, 2], [2, 1], [2, 3], [2, 2]] const testArray = [false, false, false, false, false] const outputArray =[] queries.forEach(element=>setOrGet(element))

So we have the beginning and endpoint. setOrGet needs to look at the first element of the inner array for the two separate actions

function setOrGet(innerArray){ if (innerArray[0] === 1){ //do one thing } if (innerArray[0] === 2){ //do the other thing }}

We have to be careful going forward because the problem mentions:

Note that these indices start at 1.

But javascript array indexing begins at 0, so we always need to subtract 1 from the index provided. Now to add the "set" functionality, when the first element is equal to 1.

function setOrGet(innerArray){ if (innerArray[0] === 1){ testArray[innerArray[1]-1]= true } if (innerArray[0] === 2){ findNextTrue(innerArray[1]-1,testArray) }}

In order to keep setOrGet concise, I made a separate function for "GET", where we are finding the next element that reads true. To do this we pass the element that we start at, and the array we are searching. I used a for loop, starting at the element, checking each for true. When a true is found I push the index (+1) to the output (we also return to break the loop and avoid pushing further elements). If no true is found, -1 is added instead.

function findNextTrue(start, array){ for(index = start; index<array.length;index++){ if (array[index]){ outputArray.push(index+1) return } } outputArray.push(-1) }

And it works! Full solution can be seen here.

But can it be better? In this first go at the problem, the worst case scenario would repeatedly iterate over the entire N-length array of booleans, that can be up to a billion entries long. If _queries _is the maximum of 500,000 and every query is GET1, denoted as [2,1], this solution will take 5E14 operations (since without any SET operations, it will iterate all 1 billion items 500,000 times). Writing out this blog and explaining my process has already had me thinking about more efficient ways to handle this. Perhaps we have some way to keep track of where the true values are outside of the array of booleans. It is nice to see how my though process evolves in as little of a time that it has been since I started javascript 6 weeks ago (and algo problems 3 weeks ago), so this will definitely be something I revisit.

I do want my fellow beginners to keep in mind that reaching a point where it works at all is the first step before optimization.

"this" and the DOM

AlexMcD-git — Fri, 22 Apr 2022 15:40:06 +0000

Hello world,

As someone with just under 3 weeks of experience with each of javascript, HTML, and css, I've found a couple things that seemed to work together very well. While surely not the first to do so, I couldn't find much information about it (probably because I'm not well versed enough in the lingo to Google it properly).

The problem, like for many beginners, starts with an array or object that itself is full of objects, some of which have their own arrays or objects. I would like to iterate through this array and add that content to the DOM. Easy enough with "forEach" and a separate function for "rendering" each of them to the DOM.

const arrayOfObjects = [{stuff}, ...,{the last of the stuff}]
arrayOfObjects.forEach(renderFunction)

Since just looking at things is boring, I'd like to add some interactivity through event listeners. The basic breakdown is "I want to display something. I want to add an input of some kind. Input will change what is displayed". Now, to be less abstract I am going to move over to my specific example, but first a bare minimum background so anyone can understand.

I want to render the stats for the characters (also known as "champions") of "League of Legends". Understanding the gameplay is completely unrelated here. Each character has health, attack damage, armor, and many other stats. Every time you level up those stats increase. The starting number and increase per level is different for every character. Our input will be a slider, from 1(starting level) to 18(max level). The goal here is to update the displayed stat as the slider moves. For example: Character has 500 health at level 1 and 100 health per level up. Moving the slider to 6 means the character has leveled up 5 times, so their health stat should display 1000.

For over 150 Champions this is a lot of data to display. So we instead show a thumbnail for each character and clicking it will load the details at the top. Here on out, I will try to keep the amount of code to a minimum, only sharing the most relevant details.

const arrayOfObjects = [{stuff}, ...,{the last of the stuff}]
arrayOfObjects.forEach(renderFunction){
    //all the other stuff
    //setting the name of the character to the alt text of our image
    pic.alt = champion.id
    pic.addEventListener('click', clickChampionFunction)
}

const clickChampionFunction = (event)=>{
    //accessing the correct champion object, by the name(aka id)
    const featuredObject = championsObj[event.target.alt]
    statsListFeatured.innerHTML = statsRender(featuredObject.stats, 1)
}

function statsRender(statsObj, level){
    return `(string with a lot of interpolation that makes the data pretty)`
}

Some rudimentary styling later, we can see our champion, base stats on the left side of the picture, and per-level stats on the right. Great!

Now we just need to add an event listener that puts in the slider's value as the level.

    //still inside of clickChampionFunction()
    levelSlider = document.createElement('form')
    levelSlider.innerHTML = `<input type="range" min="1" max="18" value="1">`
    levelSlider.addEventListener('input', updateValue)
}

function updateValue(event){
  levelDisplay.textContent = `Level: ${event.target.value}`
  document.querySelector(`.baseStats`).innerHTML = statsRender(featuredObject.stats, event.target.value)
}

All good, right? No. Even though the updateValue function, as of now, is only called within a block of code that has access to featuredObject, the updateValue function does not have access to that object. Since updateValue is not within the scope of the clickChampionFunction it cannot access the variable. This took a good bit of thinking (and console.log-ing to realize) the first time. So, how do we pass parameters through an event listener callback? This seems to be an old question that was also asked on stackoverflow over 13 years ago. I don't just want an answer, I want to know why. Luckily the comment "JavaScript is a prototype-oriented language, remember!" helped me get there.

What does this mean? We can see what type of data we are working with to determine how we can use it.

So of course, you can do object things with objects. Is it really that simple? Just set a key to a value that I want pass through?

levelSlider.obj = featuredObject
console.log(levelSlider)

Logging the object itself does not seem to reveal our data (only the DOM element), but calling levelSlider.obj will reveal the invisible data hitching a ride on our object. On the MDN page for this we can see:
"As a DOM event handler
When a function is used as an event handler, its this is set to the element on which the listener is placed."
So if this is our slider, and our slider has the .obj, is it really as simple as this.obj?

function updateValue(event){
  console.log(this.obj)
}

Yes, everything seems to have clicked into place. A strange bit is that this does not work for arrow functions. As MDN puts it, "Arrow functions don't provide their own this binding"

So to finish things up, lets look at our level, and update the stats to be correct for the slider-selected level.

function updateValue(event){
  levelDisplay.textContent = `Level: ${event.target.value}`
  document.querySelector(`.baseStats`).innerHTML = statsRender(this.obj.stats, event.target.value)
}

Not even a week later, this seems very obvious, but at the time this was a little bit of a breakthrough moment.

The takeaway for my fellow beginners:
To access data in an event listener callback function, first add that data to an attribute of the same element that is getting the event listener. It can then be accessed any time the event listener is called with this.attribute.