Vue.js с iView Table - доступ к объекту ответа поиска Elasticsearch - PullRequest
Новая
       21

Vue.js с iView Table - доступ к объекту ответа поиска Elasticsearch

0 голосов
/ 11 сентября 2018

Я использую таблицу набора iView UI в своем приложении Vue.js, которое использует Elasticsearch API с axios.Моя проблема в том, что я просто не могу получить доступ к вложенному объекту ответа поиска, который является объектом списка массива.Я получаю доступ только к полям 1-го уровня, но не к вложенным.Я не знаю, как установить ключ строки таблицы в таблице iView.

Вот так выглядят мои методы вызовов axios и mapper: 

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 выглядят следующим образомthis: 

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"
        }
     ]
  }

}]

А вот так выглядит потребляемый объект:

enter image description here

Как видите, поля, к которым мне нужно получить доступ, находятся внутри объекта "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
},

Результат таков:

enter image description here

Даже если он теперь работает,но как я могу оптимизировать этот код?

1 Ответ

0 голосов
/ 11 сентября 2018

Несколько функций могут помочь вам в вашей ситуации 

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.Это может спасти вас от написания дополнительного кода.

...