What's the proper way/syntax to access Active Record nested objects through the frontend's fetch request?

I have a React frontend and a Ruby Sinatra backend. I have 4 models in the backend: here's my ERD. Here's the important associations below in a nutshell:

class Artist < ActiveRecord::Base
  has_many :songs
  has_many :genres, through: :songs
  has_many :reviews, through: :songs

  accepts_nested_attributes_for :genres, :songs
end

class Genre < ActiveRecord::Base
  has_many :songs
  has_many :artists, through: :songs
  has_many :reviews, through: :songs

  accepts_nested_attributes_for :artists, :songs
end

class Song < ActiveRecord::Base
  has_many :reviews
  belongs_to :artist
  belongs_to :genre

  accepts_nested_attributes_for :genre, :artist, :reviews
end

My issues right now are mostly syntax and how to access the nested (implied) objects within the the body of my fetch request, and also how to access it in the backend. For example, song.artist.name will lead to artist.name but I'm having a tricky time accessing artist.name through songs, even though they have an association which should allow song to access this info and publish it.

post "/songs" do
  # artist_id = Artist.find_by(name: params[:artistName]) || Artist.create(name: params[:artistName]),
  # genre_id = Genre.find_by(name: params[:genreName]) || Genre.create(name: params[:genreName]),
  # thisArtist = Artist.find_or_create_by(name: params[:artistName]),
  #              thisGenre = Genre.find_or_create_by(name: params[:genreName]),
  # this_artist = Artist.find_or_create_by(name: params[:artistName]),
  # this_genre = Genre.find_or_create_by(name: params[:genreName])
  song = Song.create(
    name: params[:name],
    year: params[:year],
    artist_attributes: [name: params[:artistName]],
    genre_attributes: [name: params[:genreName]],
  )
  song.to_json
end

On the frontend, I'm pulling user data from a form where they provide song.name, artist.name, genre.name and song.year --

function submitNewSong({songName, year, artistName, genreName}) {
fetch(`http://localhost:9292/songs`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*",
  },
  body: JSON.stringify({
    name: songName,
    year: year,
    artist: {
      name: artistName
    },
    genre: {
      name: genreName
    }
  }),
})
  .then((r) => r.json())
  .then((data) => console.log(data))

I know it's not right which is why I'm having problems POSTing the info cleanly. The closest I've got is the songName (via frontend) POSTing itself to song.name but none of the other names (for artist and genre) post. I'm just stuck at this point so any guidance is appreciated.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/ZCdu0LV