railsから送られてきたjsonデータが正常に表示されない

Question

フロントのreact側でgetリクエストし、railsでdataを生成して、json形式に変換し、
フロント側に返す処理をしているのですが、データをうまくjson形式でフロント側に渡せません。
どなたか問題の原因が分かる方おりましたらご教授お願い致します

rails側

module Api
  module V1
    class LineFoodsController < ApplicationController
      before_action :set_food, only: %i[create replace]

      def index
        line_foods = LineFood.active
　　　　　　　　　　　　　
        p line_foods[0].restaurant　
##上のコードよりサーバー上で下記のデータが出力される
###<Restaurant id: 1, name: "testレストラン_0", fee: 100,
## time_required: 10, created_at: "2021-06-05 07:45:03", 
##updated_at: "2021-06-05 07:45:03">

        if line_foods.exists?
          render json: {
            line_food_ids: line_foods.map { |line_food|line_food.id },

            ##上記で出力されてるデータをrestaurantに格納している⬇️
            restaurant: line_foods[0].restaurant,

            count: line_foods.sum { |line_food| line_food[:count] },
            amount: line_foods.sum { |line_food| line_food.total_amount },
          }, status: :ok
        else
          render json: {}, status: :no_content
        end
      end
      private

      def set_food
        @ordered_food = Food.find(params[:food_id])
      end


   end
 end
end

フロント側

import React, { Fragment,useEffect } from 'react';

import { fetchLineFoods } from '../apis/line_foods';

export const Orders = () => {
  useEffect(() => {
    fetchLineFoods()
    .then((data) =>
    console.log(data)
    )
    .catch((e) => console.error(e));
  }, [])
  return (
    <Fragment>
      　注文画面
    
    </Fragment>
  )
}

フロント側のconsoleでの出力結果⬇️

上記の写真で表されているようにline_foods[0].restaurant　の中身がうまく渡せていません

試したこと
フロント側でconsole.log(typeof(data.restaurant))
をしてresutaurantの型を出力したところstringと出ました

line_foods[0].restaurantをline_foods[0].restaurant.to_json()
に変換して渡してみました。
すると結果は下記のようになったのですが、文字型と認識されてしまっている？からか、出力結果がおかしくなっております

line_foods[0].restaurantをline_foods[0].restaurant.to_json()に変換した場合の出力結果⬇️

Comments

[hoshi-takanori]

Rails よく知りませんが、たぶん restaurant を to_json する必要があるのでは。
https://qiita.com/eggc/items/29a3c9a41d77227fb10a

[kensho-]

ご回答ありがとうございます！
hoshi-takanoriさんの載せてくださった記事を参照したら、データの内容はフロント側でも確認できるようになりました！
しかし、受け取ったデータが文字型で認識されている？か何かで出力結果がおかしいです。
その結果を上記で編集して画像添付いたしました！

結果として
restaurant:
id: "1"
name: "testレストラン_0
....
のような形になって出力されるのが理想なのですが、、、

[hoshi-takanori]

ごめんなさい、to_json じゃなくて as_json みたいですね。
https://shinkufencer.hateblo.jp/entry/2019/04/08/233000

[kensho-]

hoshi-takanoriさん
先ほどto_jsonをas_jsonに変えたところ
無事解決できました！
欲しかった形でデータを受け取ることができました！
本当にありがとうございます！！

[kensho-]

hoshi-takanoriさん
大変お手数ですがas_jsonの投稿内容を回答欄にコピペして投稿していただけませんでしょうか？？
ベストアンサーにしたいと考えております。

Answer 1

Rails 詳しくないんですが、line_foods[0].restaurant をそのまま JSON に変換すると "#Restaurant:〜" という文字列になってしまうということですよね。
たぶん何らかの方法で適切な JSON データに変換する必要があり、to_json だと直接 JSON 文字列 ("{"id":1,"name":〜") になってしまうのでやりすぎってことで、as_json を使えば良さそうです。
参考: Railsにおけるto_jsonとas_json - コード日進月歩

Comments

[kensho-]

hoshi-takanoriさん
ご回答ありがとうございます！
いただいた回答で解決することができました！

[kensho-]

as_jsonとすればしっかりjsonデータとして渡せるということですね！