CODEWITHSUNDEEP
jsonlaravelvue.js
Jerry Li
Jerry Li

Reputation: 97

Parsing Laravel response to proper JSON

I am using Vue with Laravel 5.6 and I am trying to create a list element. My template is below, the problem is that I cannot properly use the response. For this example I have one item returning but in real examples there will be batches of 10 items. Need a way to transform the gibberish into readable normal JSON

<template>
        <div>
            <tr v-for="row in list" v-bind:key='row.id'>
                <td align="left">{{row.list_type_id}}</td>

            </tr>
        </div>
    </template>

        <script>

        export default {
            name: 'List',
            data(){
                return{
                    list:{
                    }
                }
            },
            created() {
                this.getList()
            },
            methods:{
                getList(){
                    let self = this
                    $.ajax({
                        url: '/api/list',
                        success: function(result){
                            self.list = result;
                    }});
                }
            }
        }
        </script>

This is the response I get from Laravel;

[{"data":"{\"list_name\":\"STLTV2\",\"device_type_id\":\"6758\",\"entity_id\":\"1072\",\"client_id\":\"msx\"}]

Well normally other then data there are different keys but to be able to prase this I am neglecting them for now.

Ah, also in my model I have

protected $casts = [
    'data' => 'json'
];

Adding my controller where I only return data

public function index()
{
    return \DB::table('list_items')
        ->join('list', 'list_items.list_id', '=', 'list.id')
        ->where('list.type',3)
        ->limit(1)
        ->select(['data'])
        ->get();

}

As I limit the returned record with limit(10 and only select data column I can use self.list = JSON.parse(result[0]['data']); I want to be able to convert data as well as other fields

{
 'list_id': 1,
 'data': {
     'list_name':'STLTV2',
     ...
  }
}

Adding ListItem Model

class ListItem extends Model
{

    protected $casts = [
        'data' => 'json'
    ];

    protected $fillable = [
        'list_id',
        'data',
    ];

    public function list()
    {
        return $this->belongsTo(Lists::class, 'list_id', 'id');
    }
}

Adding Lists Model

class Lists extends Model
{
    protected $casts = [
        'view' => 'json',
        'settings' => 'json'
    ];

    public function items()
    {
        return $this->hasMany(ListItem::class);
    }
}

Upvotes: 0

Views: 642

Answers (2)

Thamer
Thamer

Reputation: 1954

To achieve what you want you should update your index method like below:

here we will use Eloquent to select our data 

public function index()
    {
        // here we get all listItems with list that has type = 3  
        $listItems = ListItem::with('lists' => function($query) {
            $query->where('type',3);
        })->get();

        return $listItems->map(function($item){

            return [
                'list_id' => $item->list_id,
                'list_item_id' => $item->list_item_id,

                 // put here all your data like key => value, and then you can get them from your vue component
                //'key' => value
            ];
        });
    }

Upvotes: 1

dimolina
dimolina

Reputation: 11

A better approach may be to use API Resoruces to work with the response of the api. https://laravel.com/docs/5.7/eloquent-resources#generating-resources

In your index function

public function index()
{
    return return YourResource::collection(YourModel::all());

}

Upvotes: 0

Related Questions