API JSON formatting to bootstrap-vue table

Question

I am a student working on a VueJS dashboard displaying scientific research data from clinicaltrials.gov. The issue is the JSON response value is in the form of an array and as such prints with brackets and quotation marks in the table. I am trying to display the data without the brackets and quotations. In addition, when there are multiple items as in the Condition field, I am trying to display each item seperated by commas.

The data comes from the API as an axios response in the following format:

    {
  "StudyFieldsResponse":{
    "APIVrs":"1.01.02",
    "DataVrs":"2021:03:18 22:20:36.369",
    "Expression":"Pfizer",
    "NStudiesAvail":371426,
    "NStudiesFound":5523,
    "MinRank":1,
    "MaxRank":1,
    "NStudiesReturned":1,
    "FieldList":[
      "OrgFullName",
      "Acronym",
      "InterventionName",
      "Condition",
      "Phase",
      "LastKnownStatus",
      "ResultsFirstPostDate",
      "LastUpdatePostDate"
    ],
    "StudyFields":[
      {
        "Rank":1,
        "OrgFullName":[
          "Pfizer"
        ],
        "Acronym":[],
        "InterventionName":[
          "Infliximab [infliximab biosimilar 3]"
        ],
        "Condition":[
          "Crohn's Disease",
          "Ulcerative Colitis"
        ],
        "Phase":[],
        "LastKnownStatus":[],
        "ResultsFirstPostDate":[],
        "LastUpdatePostDate":[
          "December 21, 2020"
        ]
      }
    ]
  }
}

Axios Call in mounted:

var APIurl = "https://clinicaltrials.gov/api/query/study_fields?expr=" + TrialSearch + "%0D%0A&fields=OrgFullName%2CAcronym%2CInterventionName%2CCondition%2CPhase%2CLastKnownStatus%2CResultsFirstPostDate%2CLastUpdatePostDate&min_rnk=1&max_rnk=999&fmt=json"
      
      axios
        .get(APIurl)
        
        .then(response => {this.items = response.data.StudyFieldsResponse.StudyFields})
        
        .catch(function (error) {
          //eslint-disable-next-line no-console
          console.log(error);
        })

HTML of b-table:

<b-table :items="items" id="table-list" responsive :per-page="perPage" :current-page="currentPage" :fields="fields" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" >
         
            </b-table>

js data function:

data: function() {
    return {

      sortBy: 'name',
      perPage: 10,
      PipeperPage: 5,
        currentPage: 1,
        sortDesc: false,
        sortByFormatted: true,
        filterByFormatted: true,
        sortable: true,
        fields: [

          
          { key: 'Acronym', sortable: true },
          { key: 'InterventionName', sortable: true },
          { key: 'Condition', sortable: true },
          { key: 'Phase', sortable: true },
          { key: 'LastKnownStatus', sortable: true },
          { key: 'ResultsFirstPostDate', sortable: true },
          { key: 'LastUpdatePostDate', sortable: true },

          ],
          
        items: [],

screenshot of current table format

Sorry for the long post; I am really trying to learn but am lost.

Answer 1

Like you said all the properties of the response are arrays instead of primitives values like string, boolean, or number. b-table expects that the items data is an array of rows (that is good) with properties and primitives values like you are passing arrays is printing the whole value as a string.

What you need to do is add a computed property (that will change when items change) mapping that item with a new item, choosing the values you use (to keep it simple) and joining the array in a string.

You can choose to join the array arr.join(', ') or to select the first item arr[0] || "".

Life example https://codesandbox.io/s/api-json-formatting-to-bootstrap-vue-table-r91cw?file=/src/components/Dashboard.vue:1095-1586

<template>
  <b-table 
    :items="simpleItems" 
    id="table-list" 
    responsive 
    :per-page="perPage" 
    :current-page="currentPage" 
    :fields="fields" 
    :sort-by.sync="sortBy" 
    :sort-desc.sync="sortDesc" 
  />
</template>

<script>
export default {
  data() {
    return {
      // your data
    }
  },
  computed: {
    simpleItems() {
      return this.items.map((item) => {
         return {
          Acronym: item.Acronym.join(", "),
          InterventionName: item.InterventionName.join(", "),
          Condition: item.Condition.join(", "),
          Phase: item.Phase.join(", "),
          LastKnownStatus: item.LastKnownStatus.join(", "),
          ResultsFirstPostDate: item.ResultsFirstPostDate.join(", "),
          LastUpdatePostDate: item.LastUpdatePostDate.join(", "),
        };
      })  
    },
  }
}
</script>