I received some rather messy data from a backend API in JSON format and I am struggling to display it correctly within an HTML table. The list items are not aligned properly within the table.
For instance, as shown in the screenshot, items like 2.1, 2.2, etc. are mistakenly placed under 1.. They should be shifted down to their appropriate numbered lists. It is apparent that the data from the API is flawed. My goal is to find a way to visually resolve this issue.
https://i.sstatic.net/lmyvG.png
Do you have any suggestions on how to address this problem?
<template>
<div>
<table>
<!-- <tr v-if='eg[0].type == "ExREF"'> -->
<tr>
<th>General:</th>
<td>
<ol><li v-for='(item, index) in eg' v-if='item.type == "ExREF"' :key='index'>{{item["General Considerations Guidance"]}}</li></ol>
</td>
</tr>
<tr>
<th>Considerations:</th>
<td>
<ol>
<li v-for='(item, index) in eg' v-if='item.type == "Extract"' :key='index'>
{{item["General Considerations Guidance"]}}
<ol>
<li v-for='(a, index) in item.Nodes' :key='index' type='a'>
<em>{{a.Node}}</em> {{a["General Considerations Guidance"]}}
<ol>
<li v-for='(i, index) in a.Nodes' :key='index' type='i'>
<em>{{i.Node}}</em>{{i["General Considerations Guidance"]}}
</li>
</ol>
</li>
</ol>
</li>
</ol>
</td>
</tr>
</table>
</div>
</template>