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)