Utilizing numerous Rails API POST requests has become a common practice

Currently, my ReactJS application is connected to a Rails 5 API.

The React application sends a single JSON POST request to api/v1/job in order to create a new job record. This request contains information for two HABTM relationships with Tools and Technologies.

Job - has_and_belongs_to_many :technologies

Job - has_and_belongs_to_many :tools

I am wondering how I can update the appropriate join tables in my rails controller with the ID's related to Job, Technologies, and Tools.

The structure of the request is as follows, where the numbers represent IDs:

{
   "job" : {
     ...
     "technologies" : [ "1", "6", "9" ],
     "tools" : [ "3", "5" ],
     ...
   }
}

It's important to note that the request is sent as an axios POST request with JSON data, so there are no traditional form fields.

In my controller, I can access the params successfully like this:

@technologies = params[job][technologies]
. However, I'm uncertain about the next step to take in order to create the record :)

Answer №1

After a series of iterations, I arrived at the following solution:

@job['technology_list'].each do |tech|
    technology = Technology.find(tech['id'])
    @new_job.technologies << technology

Just to clarify, in this scenario, @new_job refers to the job that was recently generated within the controller.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The loading animation does not appear in the NextJS 14 - loading.tsx component while a GET request is being processed

Component with 500 photos displayed on my page: 'use client'; import { useEffect, useState } from 'react'; import { wait } from '@/components/loaders/skeletons'; export default function Postings() { const [photos, setPhotos ...

Encountered an issue with the MUI DataGrid: TypeError - Unable to access properties of undefined while attempting to read 'MuiDataGrid'

I've been trying to customize the language of the default parameters in my DataGrid MUI configuration, but I'm encountering an error when attempting to add the localeText. I have been following the guidelines provided on their website page titled ...

The ReactJS parent-child relationship is experiencing an issue with the child reference holding onto

Having an issue with the useRef() function in React. When my parent component calls the child's undo function, the child's state (betHistory) is empty. However, when the undo() function is called by the child itself, the state contains all the va ...

Disable scroll restoration on backward navigation in NextJS

Is there a way to prevent the browser from restoring scroll position when using the back or forward buttons? I've searched for information on how to achieve this, but with no luck. According to the documentation for NextJS: "By default, Next.js ...

Select multiple rows by checking the checkboxes and select a single row by clicking on it in the MUI DataGrid

I am currently utilizing the MUI DataGrid version 4 component. The desired functionalities are as follows: Allow multiple selections from the checkbox in the Data Grid (if the user selects multiple rows using the checkbox). Prevent multiple selections fr ...

When trying to run the "npm start" command, I encountered a syntax error that specifically mentioned the use of

Every time I attempt to run the npm start command, I encounter the following error: I have followed the steps provided in this link: https://github.com/kriasoft/react-starter-kit/blob/master/docs/getting-started.md Could you please advise on how to resolve ...

Running 'npm start' results in an error linked to package.json

Upon attempting to launch my React application with 'npm start', an error message appeared in the terminal: npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Users/louis/afrikalink/package.json npm ERR! errno -2 npm ERR! enoent ENOENT: no ...

Troubleshoot: Issue with Navbar Dropdown Expansion on Bootstrap Sass 3.3.6 with JavaScript

Beginner: Bootstrap Sass 3.3.6 - Incorporating Javascript - Issue with Navbar Dropdown Not Expanding application.html.erb Head: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> ...

Utilizing GraphQL API in a React frontend: A Guide

I'm looking to build a frontend for my Graphcool API endpoint and need some guidance on how to get started with ReactJS-Graphcool. Any references or tips would be greatly appreciated! ...

Issues with initializing React code - A beginner's guide to troubleshooting in React development

The div ID specified on line 9 is not being displayed as expected. The output does not include the text placed under the reactDom.render function. It only shows "Hello World from the index" on line 10. What could be causing this issue? I am utilizing t ...

NextJS useEffect does not pause for API response

I'm having trouble fetching the "lovedList" values when the page loads initially. The list gets updated correctly on re-rendering. How can I ensure that it waits for the list values to render the first objects from useEffect? import { Post, PostPro ...

Is it possible to utilize MUI without the need for @emotion/react and @emotion/styled dependencies?

Whenever I attempt to integrate MUI into my React JS application by running npm install @mui/material, I encounter some errors: Compiled with problems:X ERROR in ./node_modules/@mui/material/node_modules/react-transition-group/esm/CSSTransition.js 5:0-47 ...

I'm experiencing issues with Tailwind CSS not functioning properly once it's been

I've integrated Tailwind into my Next.js app, and it's functioning as expected on my local machine. However, when I deploy the app to Vercel or build and run it, the Tailwind classes seem to not be applied, giving the impression that Tailwind is ...

Is it possible to create tags in Material UI Autocomplete using events other than just pressing the 'Enter' key?

In my current project, I am utilizing the freesolo Autocomplete feature. My specific requirement is to create tags when input text is followed by commas or spaces. Currently, tags are created on the Enter event by Autocomplete, but I am looking for a way t ...

Explore a variety of images within an array using Gatsby and Markdown documents

After spending more than 6 hours on this, I've decided to call it quits for today. However, I'm hoping someone out there might have a solution. The problem at hand is as follows: I'm trying to include an array of images in a Markdown file t ...

When utilizing Next.js with TypeScript, you may encounter an error message stating that the property 'className' is not found on the type 'IntrinsicAttributes & IntrinsicClassAttributes'

I recently put together a basic nextjs app using typescript. Here's the link to the example: https://github.com/zeit/next.js/tree/master/examples/with-typescript However, I encountered an issue where I am unable to add the className attribute to any ...

Is there a way to update a React object's value using form data submitted by the user?

Incorporating react into my project, I am currently in the process of developing a payment system utilizing the PayPal button v2. I am facing the challenge of allowing users to input the desired amount they wish to charge themselves. The current structure ...

WebpackError: The global object "document" could not be found

I am encountering an issue with my website build using gatsby.js and bulma. While building the site, I receive the following error message: WebpackError: document is not defined The only instance where I use document is for the navbar-burger toggle code ...

Implementing SVG in React Component

I recently downloaded an SVG image with the intention of using it as a React component. However, when I pasted the SVG code into the functional component, I encountered error markers within the tags. What can I do to fix this issue so that I can successf ...

Determine whether to wrap a component with a <span> or <div> tag based on

How can I effectively wrap the component using logical operations? I want to add another span to enclose the Child component if showSpan is true. I've tried something like the following but it doesn't seem to be working as expected. const Child ...