So when accessing an external API and when trying to display this data

https://i.stack.imgur.com/Yop0I.png

and everything was fine so far as you can see

https://i.stack.imgur.com/L3hXq.png

using this code

<tr v-for=”cv_output in cv_outputs” :key=”cv_output.id”>
<td>{ ‘teste’ }</td>
<td>{ cv_output[‘id’] }</td>
<td>{ cv_output[‘last-modified-date’] }</td>
<td>{ cv_output[‘output-category’][‘value’] }</td>
<td>{ cv_output[‘output-category’][‘code’] }</td>
<td>{ cv_output[‘output-type’][‘value’] }</td>
<td>{ cv_output[‘output-type’][‘code’] }</td>
<td>{ cv_output[‘other-output’] }</td>

but as soon as I try to go further such as

{ cv_output [‘other-output’][‘title’] }

the data stops displaying in the table and in the console i get the following:

TypeError: Cannot read property ‘title’ of null

which doesn’t make any sense I think. Any idea why?

Controller method:

public function getRemoteOutputs()
{
$science = Auth::user()->science_id;

$client = new Client([‘headers’ => [‘Accept’ => ‘application/json’]]);

$request = $client->get(
‘https://url\_to\_the\_api/'.$science.'/degree',
[
‘auth’ => [‘client’, ‘secret’],
]

);

$data = $request->getBody()->getContents();

return $data;
}

Solution :

I @Helpinghand is correct, one of the records is missing other-output.

Try:

<td>
<span v-if=”cv_output[‘output-type’]“>{ cv_output[‘output-type’][‘title’] }</span>
<span v-else>No Output Type Title</span>
</td>

Solution 2:

Try this:

{ cv_output [‘other-output’] ? cv_output [‘other-output’][‘title’]: ‘’}

This will return the other-output->title if it exists, if not it should return nothing without error. (you can put whatever you want in the single quotes there if you want something like ‘not available’ as default)