API JSON格式化引导-vue表

Question

我是一名学生，正在开发一个VueJS仪表板，显示来自clinicaltrials.gov的科研数据。问题是JSON响应值是以数组的形式出现的，因此打印的表中带有括号和引号。我试图在没有括号和引文的情况下显示数据。此外，当条件字段中有多个项时，我试图显示每个条目，每个项由逗号分隔。

数据作为axios响应来自API，格式如下：

    {
  "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);
        })

B-表的HTML：

<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: [],

当前表格格式的屏幕截图

很抱歉，这个职位太长了，我真的在努力学习，但我迷路了。

Answer 1

正如您所说的，响应的所有属性都是数组，而不是字符串、布尔值或数字之类的原语值。B表期望条目数据是一个行数组(很好)，它具有属性和基元值，就像您传递的数组一样，是将整个值打印为一个字符串。

您需要做的是添加一个计算属性(当项更改时会改变)，将该项映射为一个新项，选择您使用的值(以保持简单)，并将数组连接到一个字符串中。

您可以选择加入数组arr.join(', ')或选择第一个项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>