API JSON 格式化为 bootstrap-vue table

Question

我是一名学生，正在研究显示来自 clinicaltrials.gov 的科学研究数据的 VueJS 仪表板。问题是 JSON 响应值采用数组形式，因此在 table 中打印时带有括号和引号。我试图显示没有括号和引号的数据。此外，当 Condition 字段中有多个项目时，我试图显示以逗号分隔的每个项目。

数据来自 API 作为以下格式的 axios 响应：

    {
  "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 调用挂载：

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 的 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() {
    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

抱歉久了post；我真的很想学习，但我迷路了。

Answer 1

正如您所说，响应的所有属性都是数组，而不是字符串、布尔值或数字等原始值。 b-table 期望项目数据是具有属性和基元值的行数组（这很好），就像您传递数组一样将整个值打印为字符串。

你需要做的是添加一个计算的属性（当项目改变时它会改变）映射那个项目和一个新项目，选择你使用的值（为了简单起见）并加入数组在一个字符串中。

您可以选择加入数组arr.join(', ')或select第一项arr[0] || ""。

生活范例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>

API JSON 格式化为 bootstrap-vue table

API JSON formatting to bootstrap-vue table

javascript

json

html-table

vue.js

bootstrap-vue