how to properly format data for morris js

Question

I am using morris js for creating chart in my application. And I have a response from backend like below

{ duration: '', income: 0, expense:0 },

bur as morris js needs array so that i am try to assign in an array like below

results = [response.income_expense];

and after assigning when I console log this value I got below output

 console.log(results);
    ["{ duration: '', income: 0, expense:0 },"]
0: "{ duration: '', income: 0, expense:0 },"

but I want an output like below

(4) [{…}, {…}, {…}, {…}]
0: {duration: "2021", income: 537000, expense: 337000}
1: {duration: "2020", income: 368500, expense: 568500}
2: {duration: "2019", income: 268500, expense: 168500}
3: {duration: "2018", income: 368500, expense: 568500}

please help me to get the desired output

addittionally i have this functions in backend

public function dashboardData(Request $request)
    {
        try {
            $data = $this->widgets($request->type);
            $data['income_expense'] = $this->incomeExpense($request->type);

            return $data;
        } catch (\Exception $e) {
            LogActivity::errorLog($e->getMessage());
            return response()->json([
                'error' => trans('common.Something Went Wrong')
            ]);
        }
    }

and this one is my trait

public function incomeExpense($type): string
    {
        $chart_data_yearly = '';
        $income_expense = $this->transactionRepo->incomeExpense($type);
//        dd($income_expense);

        foreach ($income_expense as $k => $row) {
            $income = $this->transactionRepo->incomeByDate($row->transaction_date, $type);
            $expense = $this->transactionRepo->expenseByDate($row->transaction_date, $type);

            $chart_data_yearly .= "{ duration: '" . $row->duration . "', income: " . $income . ", expense:" . $expense . " },";
        }

        return $chart_data_yearly;
    }

Answer 1

public function incomeExpense($type): string
    {
        $chart_data_yearly = '';
        $income_expense = $this->transactionRepo->incomeExpense($type);
//        dd($income_expense);

        foreach ($income_expense as $k => $row) {
            $income = $this->transactionRepo->incomeByDate($row->transaction_date, $type);
            $expense = $this->transactionRepo->expenseByDate($row->transaction_date, $type);
            @$return[] = ['duration' => $row->duration,'income'=>$income,'expense' =>$expense]
          
        }

        return json_encode($chart_data_yearly);
    }

This is what I wouldve done, pushed all rows into an array and then return a jsonencoded string, now if you parse it you shouldnt get any errors