Forem: Joshua Shane Doud Jr.

Leveraging Active Storage in Ruby on Rails and React

Joshua Shane Doud Jr. — Tue, 19 Dec 2023 00:12:51 +0000

Introduction:

In the dynamic landscape of web development, seamlessly handling file uploads and storage is a crucial aspect of building modern applications. Ruby on Rails, a robust back-end framework, simplifies this process with its Active Storage feature. When paired with the powerful front-end library React, developers can create a smooth and efficient experience for users.

In this comprehensive guide, we'll explore the integration of Active Storage in Ruby on Rails with a React front end. We'll cover everything from setting up Active Storage to handling file uploads and rendering images in a React application.

Getting Started:

Setup Ruby on Rails with Active Storage:
Start by creating a new Rails application or integrating Active Storage into an existing one. Ensure you have the necessary gems installed:

gem 'rails', '~> 6.0'
gem 'image_processing'

Run bundle install to install these gems. Next, set up Active Storage by running:

rails active_storage:install
rails db:migrate

Configure Models:
Incorporate Active Storage into your models by using the has_one_attached or has_many_attached macro. For example, in a Post model:

class Post < ApplicationRecord
  has_one_attached :image
end

Handling File Uploads:

Create a Form in React:
When integrating with React, create a form that allows users to upload files. Utilize the fetch API or a library like Axios to send the file to your Rails backend. Here's a simple example using React and Axios:

import React, { useState } from 'react';
import axios from 'axios';

const FileUploadForm = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append('image', file);

    try {
      await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      console.log('File uploaded successfully!');
    } catch (error) {
      console.error('Error uploading file:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
};


export default FileUploadForm;

Handle File Upload in Rails:
In your Rails controller, handle the file upload by attaching it to the corresponding model. For instance:

class ApiController < ApplicationController
  def upload
    post = Post.create
    post.image.attach(params[:image])
    render json: { status: 'success' }
  end
end

Rendering Images in React:

Retrieve Image URLs:
After a successful upload, you'll want to retrieve the URL of the uploaded image from the Rails backend. Modify the Rails controller to include the image URL in the response.

class ApiController < ApplicationController
  def upload
    post = Post.create
    post.image.attach(params[:image])
    render json: { status: 'success', image_url: url_for(post.image) }
  end
end

Display Images in React:
Update your React component to display the uploaded image using the received URL.

import React, { useState } from 'react';
import axios from 'axios';

const FileUploadForm = () => {
  const [file, setFile] = useState(null);
  const [imageUrl, setImageUrl] = useState(null);

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append('image', file);

    try {
      const response = await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      setImageUrl(response.data.image_url);
      console.log('File uploaded successfully!');
    } catch (error) {
      console.error('Error uploading file:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
      {imageUrl && <img src={imageUrl} alt="Uploaded" />}
    </div>
  );
};

export default FileUploadForm;

Conclusion:

In this guide, we've covered the integration of Active Storage in Ruby on Rails with a React front end. From setting up Active Storage to handling file uploads and rendering images in a React application, you now have a solid foundation for managing file storage in your web projects.

By combining the strengths of Ruby on Rails and React, you can create a seamless user experience with efficient file management. As you continue to explore and refine your skills in these technologies, you'll be well-equipped to build robust and user-friendly applications. Happy coding!

Using Rails serializers to render data through a has_many relationship.

Joshua Shane Doud Jr. — Tue, 04 Jul 2023 18:12:05 +0000

Have you ever had the need to not only fetch a single models data but the data included in that models relationships with other models?

Using Rails as a backend API server we can hone in on the data we want to render and send to our front end application. Say we have the following relationships:
USER:



  has_many :comments
    has_many :posted_pets, :class_name => "Pet", :foreign_key => "user_id"
    has_many :pets, through: :comments

PET:



  belongs_to :user
    has_many :comments, dependent: :delete_all
    has_many :users, through: :comments

COMMENTS:



    belongs_to :user
    belongs_to :pet

These relationships establish that a user has many posted pets using an alias and has many comments that belong to a pet.

Our need at the front end side of the application is that we want to display a pet with their list of comments and an individual comment will display the comments users username like below:

Our first task is to render the pet model data, but we want to establish what we want to render to the front end of the application. To do so we use a serializer. To create a serializer using Rails we need to include the following in our terminal rails g serializer pet. You will notice that the name of the serializer "pet" is singular. This follows the proper naming convention to ensure this serializer is used as the default serializer for the "Pet" model. Lets take a look at the now generated serializer for "pet".

The serializer allows us to control the attributes that will be rendered to the front end. Say we have a found address attribute that we do not want to display in the front end of the application. We can exclude this attribute in the serializer to keep the data from being rendered.

Now this serializer is being used when we fetch our Pet model data. Here is a glimpse of the controller rendering the data to the front end application.



   def show
        pet = Pet.find_by(id: params[:id])
        if pet
            render json: pet,
        else
            render json: {error: "Pet not found"}, status: :not_found 
        end 
    end

We however are not done. Looking back at our front end image we can see that we require the comments data that is associated with the pet. We already established our relationships in our models but now we can utilize our serializer to include the associated data when we render. Like so:

Now we get the pet data and all the comment data associated with the pet. We can stop here but lets say we want to also control the comment data we render to the front end. To do so we create another serializer for the comment model using our rails g serializer comment. Lets see how this looks below:

Utilizing this serializer we are only included each comments ":id" and ":body" when rendering the data. No additional syntax is needed in our pet controller:



   def show
        pet = Pet.find_by(id: params[:id])
        if pet
            render json: pet,
        else
            render json: {error: "Pet not found"}, status: :not_found 
        end 
    end

We have our pet data and our comment data, but now we need the user that posted the comment's username. To do this we have to include more syntax in our controller because AMS or active model serializer is not able to render deeply nested data.

A simple fix is to "include:" the data in our pet controller like so:




    def show
        pet = Pet.find_by(id: params[:id])
        if pet
            render json: pet, include: ['comments', 'comments.user']
        else
            render json: {error: "Pet not found"}, status: :not_found 
        end 
    end

Establishing the relationships and utilizing AMS we can finally render the following data to our front end:

What an amazing functionality! I hope this helped you learn more about AMS.

Sinatra/Active Record Full CRUD

Joshua Shane Doud Jr. — Fri, 24 Mar 2023 23:40:28 +0000

Welcome and get ready to link your front-end to your back end using Sinatra with Active Record. In this blog I will be showing you how to use Sinatra and Active Record to access your Ruby based models and present this data to your front-end React application. To get started lets take a look at a simple GET request from our front-end server below:

  fetch("http://localhost:9292/animals")
  .then(res => res.json())
  .then(data => {
    setAnimals(data);
  },)

Now this bit of code shows that we are asking our server for data using a GET request. After this data is received we are turning that data which is JSON into data that can be used by our front-end and then updating our state to that data.

How does this look on the back-end? How is this request being processed after it is sent to the server? Lets take a look at the code:

class ApplicationController < Sinatra::Base

  get '/games' do

  end

end

This code above is the beginning of the server's job to receive the GET request. Now we must obtain all of the data needed by the request:

 get '/animals' do 
    animals = Animal.all 

  end

This is where Active Record comes in handy. Using the method .all we can obtain all of the animals from the database. We are not done yet though we need to convert these animals to JSON. Luckily Active Record has a method for this as well .to_json.

 get '/animals' do 
    animals = Animal.all 
    animals.to_json
  end

Yay! Now our React application can make a GET request for the "/animals" database; but wait we also want to set the content type headers for all of the responses. We do this by adding the following line: set :default_content_type, 'application/json'

class ApplicationController < Sinatra::Base
  set :default_content_type, 'application/json'

  get '/animals' do 
    animals = Animal.all 
    animals.to_json(include: :shelter) 
  end
end

Now our ApplicationController inherits from the Sinatra::Base class and can send a response to a GET request with a default json content type for the headers.

We can modify this request using Active Record methods to control the data the server sends back as a response to the request.

We can only send the first 10 entries in our database and we can make sure to include the shelter that the animal has a relationship with:

  get '/animals' do 
    animals = Animal.all.limit(10) 
    animals.to_json(include: :shelter) 
  end

Methods like this help us as developers to use our back-end to control server responses.

So we have successfully made a GET request and set up our server's response, but our application is going to require more than just readable data from our database. We would also like to create, update, and remove from our database. These options are known to developers as CRUD (create, read, update, delete) or our POST, GET, PATCH, and DELETE requests.

Lets start with our POST request using similar looking code. Here is our request from our React application:

fetch("http://localhost:9292/animals", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(formData)
        })
        .then(res => res.json())
        .then(newAnimal => onAddAnimal(newAnimal))

The beginning of our code is going to start off with similar syntax to our GET response but will be post instead.

class ApplicationController < Sinatra::Base
  set :default_content_type, 'application/json'

 post '/animals' do


  end
end

Unlike our GET response we need to use an Active Record method .create to create an animal using the body of the request sent by the react application and add it to the database sending a response from the server with the added animal and its new id generated by the database. How does this look?

 post '/animals' do
    animal = Animal.create(
      name: params[:name],
      species: params[:species],
      breed: params[:breed],
      sex: params[:sex],
      age: params[:age],
      image: params[:image],
      shelter_id: params[:shelter_id]
    )
    animal.to_json
  end

We added to our database!
This allows our react application to make a request sending over data to the server. The server then takes this data and using Sinatra and the params hash creates a new animal. Our create part of CRUD is complete. Our next two requests are going to be our update or PATCH request and our DELETE request. Here is the final result of all four requests in our controller file.

class ApplicationController < Sinatra::Base
  set :default_content_type, 'application/json'


  # Animal Controllers Full CRUD
  get '/animals' do 
    animals = Animal.all 
    animals.to_json(include: :shelter) 
  end

  get '/animals/:id' do
    animal = Animal.find(params[:id])
    animal.to_json(include: :shelter)
  end

  delete '/animals/:id' do
    animal = Animal.find(params[:id])
    animal.destroy
    animal.to_json
  end

  post '/animals' do
    animal = Animal.create(
      name: params[:name],
      species: params[:species],
      breed: params[:breed],
      sex: params[:sex],
      age: params[:age],
      image: params[:image],
      shelter_id: params[:shelter_id]
    )
    animal.to_json
  end

  patch '/animals/:id' do
    animal = Animal.find(params[:id])
    animal.update(
      name: params[:name],
      species: params[:species],
      breed: params[:breed],
      sex: params[:sex],
      age: params[:age],
      image: params[:image],
      shelter_id: params[:shelter_id]
    )
    animal.to_json
  end
end

Thank you for going on this CRUD journey with me. Tune in next time!

React Application vs Single Page HTML

Joshua Shane Doud Jr. — Fri, 27 Jan 2023 03:01:54 +0000

What a transformation you go through when you move on from the basic HTML and CSS structure. You get to open up that door into the magical realm of React and JSX which seems to just make everything more "crisp". In this post I want to share with you my experience and what a difference React and JSX made for me.

To start off the organization that you get to have when using React components just makes my OCD skyrocket to the satisfactory level. To give an example having the ability to organize your application into different JS files that individually render JSX to the DOM is amazing. Below you will find a screenshot of a mock challenge that I will be using in this blog to talk about my experience and how much using React differs.

Just look at that organization. You have your main 'App.JS" which is parent to your "Header.JS", "ListingCard.JS", and "Search.JS. Then your "ListingContainer.JS" is parent to your "ListingCard.JS". This allows you to group what you render to the DOM and when you want to edit any of the code you do not have to sift through lines of code to find what you need. I am of course talking about having everything rendered within your HTML file and having to group lines of HTML elements using Divs with IDs and Class Names. This is a thing of the past using React and components.

I am a stickler when it comes to organization but that's not even the best part! With React over simple HTML you can use this amazing function called useState. First let me give you an example using my mock challenge code:

import React, {useState, useEffect} from "react";
import Header from "./Header";
import ListingsContainer from "./ListingsContainer";

function App() {

  const [listings, setListings] = useState([]);

If you look closely in order to use "useState" you must import it from react using the top line of code. After this you can create a variable using an array. The first input inside the array is going to be your variable's name and how you reference the variable. The next input is going to be how you set the value of the variable. More on this later. After the array you then set the initial value of the variable using useState() like so: const [listings, setListings] = useState([]);

"listings" can now be used just like any normal variable and so in this example I was able to make my fetch request and set the value of listings to the data I received from the server. See below:

  const [listings, setListings] = useState([]);

  useEffect(() => {
    fetch(" http://localhost:6001/listings")
      .then((res) => res.json())
      .then((data) => setListings(data))
  }, [])

Now that the value has been basically updated I can continue to update that value using setListings() and with a bit of destructuring I can retain the previous value and add to it, remove from it, or update it. Following up with an example please look at how this function filters the array of data and then updates the state to a new array. This exact snippet of code is used to delete a listing within the array.

  function handleDeleteListing (deletedListing) {
    const updatedListings = listings.filter((listing) => listing.id !== deletedListing.id)
    setListings(updatedListings)
  }

What an amazing feature! Without giving you more examples I do want to mention how this state that we can create has so many applications. One of which is creating a controlled "Form" but this subject deserves a post on its own. I encourage you though that if you are interested please look forward to another post on controlled forms in the near future.

Now that I have explained a bit about "useState" lets just recap on how it makes life so much easier compared to simple HTML. With simple HTML you would have needed to use JavScript to grab pieces of HTML and fetch the data and then use the data to create more HTML elements updating the elements rendering them to the element you already grabbed. Oh how I do not miss any of that.

Now let me explain the wonders of "useEffect". This feature acts as a function and allows you to set a time or a que as to when the function runs. Say for example you are making a fetch request and you want this to run when on the initial load of your DOM. Yoiur code would look like this:

  useEffect(() => {
    fetch(" http://localhost:6001/listings")
      .then((res) => res.json())
      .then((data) => setListings(data))
  }, [])

The array after the function is your ability to set either how often you would like this function to run or if you leave this blank it will run one time on the initial load of your Dom.

Compared to simple HTML and JS this makes fetching data from a server so much easier. Instead of having to run the code after setting up a listener for DOMfullyload you just simply "useEffect".

This is my take on some of the pros to React over simple HTML and JS. It takes some time to learn but you will be happy you took that step forward. Thank you for the consideration and tuning in to my blog. Ill catch you on the next one!

My JavaScript Pseudocode steps.

Joshua Shane Doud Jr. — Sat, 26 Nov 2022 18:56:04 +0000

While I am just starting out as a web developer, I believe that the overall ability to problem solve and view a problem from different angles will help you succeed in a development position. When you are confronted with a particular problem it really helps to simplify the problem and create a task list for yourself. This is where my Pseudocode comes in handy for myself. Lets break it down into a few steps to make it easier to understand.

First lets start with a problem that needs solving. I have a web application that I want to take information from a JSON server and distribute this information into a card format for each item within the server. I want to do this when the DOM loads.

Now that is a very specific problem that needs solving but separating this paragraph into Pseudocode steps is going to help with several issues that you may run into. First where do I begin? Well we can start with the "when" we want this code to run.

// Add an event listener for when the DOM is loaded
document.addEventListener("DOMContentLoaded", () => {
getAllNinjas()
})

This is step one and very important because it is going to lead us in the right direction. With the event listener being added to "DOMContentLoaded" we know that this is going to use a callback function. Here is our next step! We are also going to use pseudocode to break down our fetch function as well.

// Create a callback function that "gets" the needed information
function getAllNinjas() {
    // "GET" fetch from JSON server
    fetch("http://localhost:3000/ninjas")
    // Convert result to "json"
    .then(res => res.json())
    // take json data and send to callback function to render a card for each item within the data object
    .then(ninjaData => ninjaData.forEach(ninja => renderOneNinja(ninja)))
}

So after pseudo coding and coding out the next step you can see how complex the problem is beginning to get, but how basic and simple the steps that we are creating. These basic steps help keep focus and guide yourself through the process of creating working code.

So lets just look at our overall steps.

// Add an event listener for when the DOM is loaded
// Create a callback function that "gets" the needed information

An look how easy figuring out the next step is going to be! We need to create another callback function that handles the data that we just fetched from our JSON server. Within the creation of our function it is important again that we use our pseudocode to our advantage to create steps in creating the "handle" function.

// Create a callback function that "handles" the fetch data and renders each item to the DOM or a "DOM manipulation function

function renderOneNinja(ninja) {
    // Create an container element to hold our card
    const ninjaCard = document.createElement("div")
    // Add a class name to each card
    ninjaCard.classList.add("ninja-card")
    // Add an ID to the element that includes the `dataitem.name`
    ninjaCard.id = `${ninja.name}`
    // Format the elements innerHTML using iteration through the item within the data object
    ninjaCard.innerHTML =`
            <div class="front">
                <img class="img" src="${ninja.imageUrl}">
                <p class="name">Name:${ninja.name}</p>
                <p class="village">Village:${ninja.village}</p>
                <p class="rank">Rank:${ninja.rank}</p>
                <p class="power" style="display:none;">${ninja.power}</p>
            </div>
            <div class="back">
                <button id=one class=addBtn>Add to Squad 1</button>
                <button id=two class=addBtn>Add to Squad 2</button>
            </div>
    `
    // Add event listeners for the two buttons and the mouseenter and mouseleave (these event listeners were added on at a later time due to a different desired outcome or a different "PROBLEM".
    ninjaCard.querySelector("#one").addEventListener("click", handleClickOne)
    ninjaCard.querySelector("#two").addEventListener("click", handleClickTwo)
    ninjaCard.addEventListener("mouseenter", handleMouse)
    ninjaCard.addEventListener("mouseleave", handleMouse)

    // Append the element to a container already on the DOM
    document.querySelector("#ninjaContainer").appendChild(ninjaCard)
}

Wow! That was a lot to go through for only one function, but leaving out our pseudocode for the functions creation lets see how our task list looks.

// Add an event listener for when the DOM is loaded
// Create a callback function that "gets" the needed information
// Create a callback function that "handles" the fetch data and renders each item to the DOM or a "DOM manipulation function

Whoa! Only three steps top solve our problem; however, within each steps there are a series of "children steps" that allow a developer to simplify the road to a desired result.
This was a large problem that really needed to be simplified to get yourself pointed in the right direction, but lets just take a look at a more simplified problem that we can still use pseudocode for.

So here is our problem:

Create a function that when given an array with three element objects that contain two items, returns an array that combines the value of power to one value.

This is a more simple problem but look at how confusing it can get. So lets pseudocode this problem.

// Create function "reducePower" that takes in one argument "array of three element objects"

This handles a couple of simple tasks like the name of the function and what we are going to be using as an argument. The problem can be referenced in writing this pseudocode. Our name is describing what our desired result will be and the problem gives us the argument we need to use. Now we need to write out what to do with the argument.

// Iterate through each object and find the power value
// Create a variable to hold each power value ([])
// Push each power value to the variable

We need to obtain the power value for each object and combine them into an array. Why do we need to combine them into an array? Lets see why.

// Use the reduce method on the array of power values which will return the total of the values.

We just pseudo coded our problem out and quickly and effectively came up with a task list to use as a guide when creating our code. Now we are thinking like problem solvers. I promise this will help any developer new or veteran. With that I bid you good day and hope this has helped with your development journey!

Code Organization

Joshua Shane Doud Jr. — Sat, 05 Nov 2022 18:21:45 +0000

Hello eager developers. I want to take some time to talk about Code organization and how a well placed comment that describes your functions can really make a difference in readability of your code.

Take the example below for instance:

function fetchUser(userName) {
    fetch(`https://api.github.com/users/${userName}`, {
        method: "GET",
        header: {
            "Content-Type": "Application/json",
            Accept: "application/vnd.github.v3+json"
        }
    })
    .then(resp => resp.json())
    .then(data => addUser(data))

This function serves a primary purpose. Ask yourself what that purpose is and how can you organize this function with other functions? Well lets take a look at another function who's primary purpose is similar:

function fetchRepos(userName) {
    fetch(`https://api.github.com/users/${userName}/repos`)
    .then(resp => resp.json())
    .then(data => {
        console.log(data);
        addRepos(data)
    })
}

To put these functions into perspective the first function is taking in a userName and fetching a json object that matches that userName. The second function is doing the same but returning an object of repositories for the userName provided. This userName is provided by a <button></button>.

Now that we understand the functions a little better, how can we organize them together? Well their functions are both fetching data from an API. So lets group them with a comment "API fetch functions":

// API fetch functions

function fetchUser(userName) {
    fetch(`https://api.github.com/users/${userName}`, {
        method: "GET",
        header: {
            "Content-Type": "Application/json",
            Accept: "application/vnd.github.v3+json"
        }
    })
    .then(resp => resp.json())
    .then(data => addUser(data)) 
}

function fetchRepos(userName) {
    fetch(`https://api.github.com/users/${userName}/repos`)
    .then(resp => resp.json())
    .then(data => {
        console.log(data);
        addRepos(data)
    })
}

Now when I come back to this js file I can clearly see that these two functions are fetching data from the API and then sending that data to go do something. Instead of taking that data and doing something with it within the fetch functions it is better to send it off to another function that is organized under a different comment. See below:

// Dom Manipulation Functions

function addUser (userObj) {
    let userCard = document.createElement("li")
    let userContainer = document.querySelector("#user-list")
    userCard.id = userObj.login
    userCard.innerHTML = `
        <img src="${userObj.avatar_url}">
        <h4>UserName : ${userObj.login}</h4>
        <h5>Profile Link: ${userObj.html_url}</h5>
        <button class="${userObj.login}">Obtain Repos</button>
    `
    userContainer.appendChild(userCard)
    let userBtn = document.querySelector(`.${userObj.login}`)
    userBtn.addEventListener("click", handleBtn)
}

function addRepos(repoObj) {
    let repoArr=[...repoObj]
    repoArr.forEach((repo) => {
        let repoList = document.querySelector("#repos-list")
        let repoName = document.createElement("li")
        repoName.innerHTML = `${repo.name}`
        repoList.appendChild(repoName)
    })
}

This separation of responsibility for the functions allows us as developers to better describe a functions purpose. This way when an issue arises we can go back to our code and have an easier time pinpointing where that issue is coming from. This also helps with testing. If you know exactly which function is causing an issue a few well placed console.log() can really help solve the problem and verify that your return is what you think it will be.

And here is the full js file so you can see how organization really helps with readability.

document.addEventListener("DOMContentLoaded", () => {

document.querySelector("#github-form").addEventListener("submit", handleSubmit)


})

// Handle Event Functions
function handleSubmit(event) {
    event.preventDefault()
    let githubUserName = event.target.search.value
    fetchUser(githubUserName)
}

function handleBtn(event) {
    let btnClass = event.target.classList.value
    fetchRepos(btnClass)
}

// API fetch functions

function fetchUser(userName) {
    fetch(`https://api.github.com/users/${userName}`, {
        method: "GET",
        header: {
            "Content-Type": "Application/json",
            Accept: "application/vnd.github.v3+json"
        }
    })
    .then(resp => resp.json())
    .then(data => addUser(data)) 
}

function fetchRepos(userName) {
    fetch(`https://api.github.com/users/${userName}/repos`)
    .then(resp => resp.json())
    .then(data => {
        console.log(data);
        addRepos(data)
    })
}

// Dom Manipulation Functions

function addUser (userObj) {
    let userCard = document.createElement("li")
    let userContainer = document.querySelector("#user-list")
    userCard.id = userObj.login
    userCard.innerHTML = `
        <img src="${userObj.avatar_url}">
        <h4>UserName : ${userObj.login}</h4>
        <h5>Profile Link: ${userObj.html_url}</h5>
        <button class="${userObj.login}">Obtain Repos</button>
    `
    userContainer.appendChild(userCard)
    let userBtn = document.querySelector(`.${userObj.login}`)
    userBtn.addEventListener("click", handleBtn)
}

function addRepos(repoObj) {
    let repoArr=[...repoObj]
    repoArr.forEach((repo) => {
        let repoList = document.querySelector("#repos-list")
        let repoName = document.createElement("li")
        repoName.innerHTML = `${repo.name}`
        repoList.appendChild(repoName)
    })
}

Thank you! Have a great day!

My journey using .find() to return keys and values in an array!

Joshua Shane Doud Jr. — Thu, 20 Oct 2022 18:11:56 +0000

Below you will find my final product, but after that I will take you through my failed attempts from which I was able to learn from to get to this final product. After this I will take you even further and "clean up" my final code block.

const record = [
    { year: "2015", result: "W"},
    { year: "2014", result: "N/A"},
    { year: "2013", result: "L"},
    //...
  ]

  function superbowlWin(array) {
    let win = array.find(isWin)
    if (win) {
      return win.year
    }
    return win
  }

  function isWin(score){
      return score.result === "W"

  }

With the above code block in mind and our variable "record" I was tasked with creating a function that would loop through the objects in the array and return the year value when the result value (===) "W" or a win. I started out with this:

 function superbowlWin(array) {
   return array.find(isWin).year

  function isWin(score){
      return score.result === "W"

  }

Now this was ok and it gives me the first year that produced a winning result; however, it did not give me a way to find out if there were no winning results within my array. Attempting to change the code to do so I ended up with a couple of failing functions like this:

function superbowlWin(array) {
   return array.find(isWin).year;
       else return undefined


  function isWin(score){
      return score.result === "W"

  }

Now this and others did not work. I then realized that instead of trying to return the functions return directly I can place the function inside a variable and then use that variable to write an if....else statement to compare the results to what I would be looking for. This meant that I could take the result of the .find() function and compare it to being true or false. If true it would return the variable.year (win). This returns 2015 which is a winning year. Now the else statment returns the variable (win) if the function turns out to be false. This returns undefined due to the .find() functions default. Please see below:

const record = [
    { year: "2015", result: "W"},
    { year: "2014", result: "N/A"},
    { year: "2013", result: "L"},
    //...
  ]

  function superbowlWin(array) {
    let win = array.find(isWin)
    if (win) {
      return win.year
    }
    return win
  }

  function isWin(score){
      return score.result === "W"

  }

If we want to take this a step further we can clean the code block and turn it into an anonymous function within our main function and write it as an arrow function:

function superbowlWin(array){
        let win = array.find(array => array.result === "W")
        if (win){
            return win.year;
        } else return win;
}

And there you have it our final function which uses the .find() function to take in a callback function (arrow function) to loop through the array and return the winning year! Although you probably read this in a minute or two let me tell you the journey was a lot longer. Have a great day and look for more little bits of my code learning journey.

Starting out learning to code with flatiron online coding boot-camp.

Joshua Shane Doud Jr. — Mon, 17 Oct 2022 17:59:48 +0000

On October 10th, 2022 I started the flex-software-engineer program at flatiron school. Wow! I just want to say how amazing the present can be. One day I woke up and asked myself if what I was doing was worth it? Was I making a difference and enjoying my craft? As fast as I could make the decision to switch career paths I was on my way to learning to code.

After researching several online coding boot-camps that could work around my current career I finally chose flatiron school. This was the best choice I have made, and although I am only a week into the program, I can say that this school sets you up for success. You immediately have access to a pre-work program that sets you up with a solid foundation.

During the pre-work I learned the basis of HTML, JavaScript, and CSS. You are also given a step by step process to make sure the device you are using is ready for the program by installing Visual Studios to helping you first discover how to use GitHub. I am well on my way and will be posting about my experience as often as I can.