API JSON 格式化到 bootstrap-vue 表答案

【问题标题】：API JSON formatting to bootstrap-vue tableAPI JSON 格式化到 bootstrap-vue 表
【发布时间】：2021-06-17 08:48:36
【问题描述】：

我是一名在 VueJS 仪表板上工作的学生，该仪表板显示来自临床试验.gov 的科学研究数据。问题是 JSON 响应值采用数组的形式，因此在表中打印时带有括号和引号。我正在尝试显示不带括号和引号的数据。此外，当 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);
        })

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

screenshot of current table format

抱歉，帖子太长了；我真的很想学习但是迷路了。

【问题讨论】：

标签： javascript json vue.js html-table bootstrap-vue

【解决方案1】：

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

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

您可以选择加入数组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>

【讨论】：