Sending data properly from React to Ruby on Rails API Endpoint

Question

I'm working on posting data from a React Form to a Ruby on Rails API, about the React part, if just send the first item from an array using this code:

  const submitOrderHandler = async (userData) => {

    setIsSubmitting(true);
    await fetch("http://localhost:3000/ordertemps", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(cartCtx.items[0]),//please include user: userData
    });
    setIsSubmitting(false);
    setDidSubmit(true);
    cartCtx.clearCart();
  };

The Ruby on Rails API manage it and store it in the table, this is the output:

However, I need to store all the data selected by the user, so, to accomplish this task I updated my code like this:

  const submitOrderHandler = async (userData) => {
    const dataSelected = JSON.stringify(cartCtx.items);
    console.log(dataSelected);

    setIsSubmitting(true);
    await fetch("http://localhost:3000/ordertemps", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(cartCtx.items),//please include user: userData
    });
    setIsSubmitting(false);
    setDidSubmit(true);
    cartCtx.clearCart();
  };

The problem is I'm getting a 400 Status, so this is how the data looks from the FrontEnd:

This is the output from the Ruby on Rails Endpoint:

the source code of the Controller in charge to manage and store the data is this:

#POST /ordertemps
def create
    @ordertemp = Ordertemp.new(ordertemp_params)
    if @ordertemp.save
        render json: @ordertemp
    else
        render error: { error: 'Unable to create an order'}, status: 400
    end
end

private

def ordertemp_params
    #params.require(:ordertemp).permit( :clientName, :clientId, :amount, :mealid, :name, :price)
    params.require(:ordertemp).permit(:name, :amount, :price)
end

So, I'm assuming these facts:

the data is properly formatted from the FrontEnd.
For some reason my Ruby on Rails'Controller can't manage more than one element sent by the front end.

My question is: what am I missing in my controller to store all the data sent by the FrontEnd?

Thanks a lot for your comments

While sending multiple items from the front end, the parameters are in the form of array. Notice the _json parameter while sending multiple order items. If params[:_json] exist, now loop through the elements inside the params[:_json]. Each array element will have name, amount, price in it. Just access them and save it. — Hacker621
– Hacker621, Commented Jul 21, 2022 at 12:37

Amol Mohite · Accepted Answer · 2022-09-20 08:39:02Z

1

Update your controller code as below:

#POST /ordertemps
def create
  begin
    params['_json'].each do |ordertemp_params|
      @ordertemp = Ordertemp.new(ordertemp_params)
      @ordertemp.save
    end
    head :no_content

  rescue => e
    render json: { error:  unable to create orders }, status: 400
  end
end

Hope this will help you.

answered Sep 20, 2022 at 8:39

Amol Mohite

7423 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sending data properly from React to Ruby on Rails API Endpoint

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related