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的特殊弹性客户端库。这样可以避免编写额外的代码。

带有iView表的Vue.js-访问Elasticsearch搜索响应对象

1 个答案: