Vue.js with iView Table - 访问 Elasticsearch 搜索响应对象

Question

我在我的 Vue.js 应用程序中使用 iView UI 套件表，该应用程序使用带有 axios 的 Elasticsearch API。我的问题是我似乎无法访问嵌套的搜索响应对象，它是一个数组列表对象。我只能访问第一级字段，但不能访问嵌套字段。不知道在iView表格中如何设置表格行键。

这是我的 axios 调用和映射器方法的样子:

listObjects(pageNumber){
      const self = this
      self.$Loading.start()
      self.axios.get("/api/elasticsearch/")
        .then(response => {
          self.ajaxTableData = self.mapObjectToArray(response.data);
          self.dataCount = self.ajaxTableData.length;

          if(self.ajaxTableData.length < self.pageSize){
            self.tableData = self.ajaxTableData;
          } else {
            self.tableData = self.ajaxTableData.slice(0,self.pageSize);
          }
          self.$Loading.finish()
        })
        .catch(e => {
          self.tableData = []
          self.$Loading.error()
          self.errors.push(e)
        })
    },
    mapObjectToArray(data){
      var mappedData = Object.keys(data).map(key => {
        return data[key];
      })
      return mappedData
    },

iView 表格列如下所示:

tableColumns: [
        {
          title: 'Study Date',
          key: 'patientStudy.studyDate',
          width: 140,
          sortable: true,
          sortType: 'desc'
        },
        {
          title: 'Modality',
          key: "generalSeries.modality",
          width: 140,
          sortable: true
        },
        ...
    ]

(原始)Elasticsearch 文档如下所示:

[
{ "score":1, "id":"3a710fa2c1b3f6125fc168c9308531b59e21d6b3", 
"type":"dicom", "nestedIdentity":null, "version":-1, "fields":{
  "highlightFields":{

  },
  "sortValues":[

  ],
  "matchedQueries":[

  ],
  "explanation":null,
  "shard":null,
  "index":"dicomdata",
  "clusterAlias":null,
  "sourceAsMap":{
     "generalSeries":[
        {
           "seriesInstanceUid":"999.999.2.19960619.163000.1",
           "modality":"MR",
           "studyInstanceUid":"999.999.2.19960619.163000",
           "seriesNumber":"1"
        }
     ],
     "patientStudy":[
        {
           "studyDate":"19990608"
        }
     ]
  }

}]

这是消费对象的样子:

如您所见，我需要访问的字段位于“sourceAsMap”对象内，然后嵌套在数组中。如何提供 iView 表格单元格键来访问它们？

更新:我现在“重新映射”了我的 Elasticsearch 对象，然后再将它显示在 Vue.js 表中，现在它可以工作了。但是，我不认为我这样做的方式非常优雅或干净......也许你可以帮助我以更好的方式做到这一点。这是我重新映射对象的方法:

getData(data){
  let jsonMapped = []
  for(let i = 0; i < data.length; i++){
    let id = {}
    id['id'] = data[i].id
    let generalData = data[i]['sourceAsMap']['generalData'][0]
    let generalSeries = data[i]['sourceAsMap']['generalSeries'][0]
    let generalImage = data[i]['sourceAsMap']['generalImage'][0]
    let generalEquipment = data[i]['sourceAsMap']['generalEquipment'][0]
    let patient = data[i]['sourceAsMap']['patient'][0]
    let patientStudy = data[i]['sourceAsMap']['patientStudy'][0]
    let contrastBolus = data[i]['sourceAsMap']['contrastBolus'][0]
    let specimen = data[i]['sourceAsMap']['specimen'][0]
    jsonMapped[i] = Object.assign({}, id, generalData, generalSeries, generalImage, generalEquipment, patient,
    patientStudy, contrastBolus, specimen)
  }
  return jsonMapped
},

结果是这样的:

虽然它现在可以工作了，但我该如何优化这段代码？

Answer 1

一些功能可以帮助您解决问题

let data = [{
    key1: ['k1'],
    key2: ['k2'],
    key3: [{
        subKey1: 'sk1',
        subKey2: ['sk2'],
        subObject: [{ name: 'John', surname: 'Doe' }],
        items: [1, 2, 3, 5, 7]
    }]
}];
function mapIt(data) {
    if (isSingletonArray(data)) {
       data = data[0];
    }
    for(const key in data) {
        if (isSingletonArray(data[key])) {
            data[key] = mapIt(data[key][0]);
        } else {
            data[key] = data[key];
        }
    }
    return data;
}
function isSingletonArray(obj) {
    return typeof obj === 'object' && Array.isArray(obj) && obj.length === 1;
}
console.log(mapIt(data));

输出:

{ 
    key1: 'k1',
    key2: 'k2',
    key3: { 
        subKey1: 'sk1',
        subKey2: 'sk2',
        subObject: { name: 'John', surname: 'Doe' },
        items: [ 1, 2, 3, 5, 7 ] 
    } 
}

您可以在浏览器中查看。 mapIt 将单例数组解包为对象或基元。但我建议您注意 javascript 的特殊弹性客户端库。它可以让您免于编写额外的代码。