React+ReduxでLaravel APIを叩いたときのレスポンスの表示でエラー

Question

前提・実現したいこと

現在、Reactでパラメータと一緒にLaravel APIを叩き、Laravel側は更にそのパラメータをつかって外部（ホットペッパーグルメ）のAPIを叩き、その結果をReact側に返す機能を実装中です。一度Laravelを噛ませる理由はCORS回避の為です。
パラメータに関してはリクエストを送る前のページで確定されています。
試しに、Postmanでリクエストを送ったところ下記のようにレスポンスは返ってきます。

しかし、下記のようにレスポンスをJSON.parse()を使ってオブジェクトに変換し、console.log()してみても


…の様にエラーが表示されます。

Postmanで送ったところ正しいレスポンスが返ってきていることから、恐らく、リクエストが意図した通りに送られていないのでレスポンスも正しく返ってきていない、もしくは私のJSON.parse()に対する理解が及んでいないかのどれかだと思い、コードを書き直してはいますが一向に解決致しません。
どなたか解決方法のご教授お願い致します。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'results' of undefined
    at app.js:120993

該当のソースコード

/*** リクエストファイル ***/

class Result extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            lat: '',
            lng: ''
        }
    }

    componentDidMount() {
        // Get user current position
        navigator.geolocation.getCurrentPosition((position) => {
            this.setState({
                lat: position.coords.latitude,
                lng: position.coords.longitude
            })
            const lat = position.coords.latitude
            const lng = position.coords.longitude
            console.log(position.coords)

            const httpURL = 'http://localhost:8000/api/gourmet?range=3&order=4'
            this.props.actions.httpRequest()
            const res = axios.get(`${httpURL}&lat=${lat}&lng=${lng}&party_capacity=${this.props.QuestionsReducer.people}&budget=${this.props.QuestionsReducer.budget}&free_food=${this.props.AmountReducer.freeFood}&free_drink=${this.props.AmountReducer.freeDrink}&genre=${this.props.QuestionsReducer.genre}`)
            this.props.actions.httpSuccess()
            console.log(JSON.parse(res.data.results))
        }, (err) => {
            this.props.actions.httpFailure()
            console.log(err)
        })
    }

    render() {
        const { classes } = this.props
        return (
            <div className={classes.root}>
                <div className={classes.toolbar} />
                <h1>周辺のお店</h1>
                {/* TODO: Modify Google Maps layout */}
                <Map
                    style={mapStyle}
                    google={this.props.google}
                    zoom={14}
                    center={{ lat: this.state.lat, lng: this.state.lng }}
                    initialCenter={{ lat: this.state.lat, lng: this.state.lng }}
                >
                    <Marker
                        title={'現在地'}
                        position={{ lat: this.state.lat, lng: this.state.lng }}
                    />
                </Map>
                <h1>aaaaaaaaaa</h1>
            </div>
        )
    }
}
const mapStateToProps = state => ({
    QuestionsReducer: state.QuestionsReducer,
    AmountReducer: state.AmountReducer,
    HttpReducer: state.HttpReducer
})

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(actions, dispatch)
})

const styledResult = withStyles(styles, { withTheme: true })(Result)
const wrappedStyledResult = GoogleApiWrapper({ apiKey: ('AIzaSyDXmfufz94HbjCTfGwUBF4TCIwJ2_j-KW8') })(styledResult)

export default connect(mapStateToProps, mapDispatchToProps)(wrappedStyledResult)

/*** api.php ***/

Route::get('/gourmet', 'GetGourmetController@gourmet')->name('api.jwt.gourmet');

/*** GetGourmetController.php ***/

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use GuzzleHttp\Client;

class GetGourmetController extends Controller
{
    public function gourmet(Request $req)
    {
        $lat = $req->lat;
        $lng = $req->lng;
        $partyCapacity = $req->party_capacity;
        $budget = $req->budget;
        $freeFood = $req->free_food;
        $freeDrink = $req->free_drink;
        $genre = $req->genre;
        $param = "?key=*****&format=json&range=3&order=4&lat=$lat&lng=$lng&party_capacity=$partyCapacity&budget=$budget&free_food=$freeFood&free_drink=$freeDrink&genre=$genre";

        $client = new Client([
            // Base URI is used with relative requests
            'base_uri' => 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1',
            // You can set any number of default request options.
            'timeout' => 2.0,
        ]);
        $res = $client->request('GET', $param)->getBody();

        return $res;
    }
}

試したこと

QuestionsReducer、AmountReducer内のstateはconsole.log()で確認したところ、しっかり格納されていました。
lat,lngも同様です。

【追記】

このように変更してみましたが、 「SyntaxError: Unexpected token G in JSON at position 0」 と表示されてしまいます。
console.log(url)でリクエストURLも確認してみましたが、異常はなしでした…。

補足情報（FW/ツールのバージョンなど）

Laravel 5.8.*

Answer 1

こんにちは

修正後のコードの下記の部分

の中で

修正前：

console.log(JSON.parse(respose.data).results)

としている行ですが、respose.data はJSON文字列ではなく、すでにparseされたオブジェクトになっているので、下記に修正でいかがでしょうか？

修正後：

console.log(respose.data.results)

以下は axios - Response Schema からの引用です。

// data is the response that was provided by the server

data: {},

以上、参考になれば幸いです。

Comments

[退会済みユーザー]

ご回答ありがとうございます！！
無事表示されました！！
ありがとうございました！！

[jun68ykt]

どういたしまして。
> 無事表示されました！！
とのことで、よかったです????

Answer 2

普段axiosは使わないので明るくないのですが、axios.getは非同期通信をするのではないでしょうか？
axios.get(url).then(res => { console.log(res.data.result); }); で確認してください。

Comments

[退会済みユーザー]

ご回答ありがとうございます！
それも考慮して実装してみましたが、エラーが発生しましたね…。
試したことにも追記致しました！
是非ご一読お願いいたします。

[thyda.eiqau]

エラーメッセージが変わっていますね。
axiosの通信自体は成功しているように見えますが（それ以外のところでコードの書き方に疑問は残りますが）、axiosの結果として返ってきているデータが正しくJSONのフォーマットに則っているかを確認してください。

[退会済みユーザー]

どうやら、axiosはオブジェクトとしてレスポンスを返してくれる様です…。
無事表示されました！
お騒がせいたしました。ありがとうございます！！