使用 oracle jet + knockout JS + elasticsearch 根据用户列选择填充动态列答案

【问题标题】：populate dynamic columns based on the user column selection using oracle jet + knockout JS + elasticsearch使用 oracle jet + knockout JS + elasticsearch 根据用户列选择填充动态列
【发布时间】：2018-10-05 18:42:30
【问题描述】：

在我的网站开发中，我提供了组合框，用户可以在其中选择要显示的列，并且将根据用户请求获取和呈现数据。所以我提供了如下组合框选择，

<div id="filterColumns" style="width: 1px; min-width: 100%;">
  <oj-label for="multiSelect">Select Columns</oj-label>
  <div id="columnsList">
    <oj-select-many help.instruction="Select the columns to populate the data" id="multiSelect" value={{selectedColumns}} style="max-width:50em">
      <oj-option value="Name">Name</oj-option>
      <oj-option value="Age">Age</oj-option>
      <oj-option value="Gender">Gender</oj-option>
      <oj-option value="Mainden Name">Mainden Name</oj-option>
      <oj-option value="Mothers Name">Mothers Name</oj-option>
      <oj-option value="Designation">Designation</oj-option>
      <oj-option value="Experience">Experience</oj-option>
      <oj-option value="Company">Company</oj-option>
      <oj-option value="Location">Location</oj-option>
    </oj-select-many>
  </div>
  <oj-button id='filterColumnsGo' on-oj-action='[[generateData]]'>Generate Data</oj-button>
</div>

在 ViewModel 中，我正在获取用户选择的列名，

self.selectedColumns = ko.observableArray(document.getElementById('columnsList'));

并使用基于选择的数据调用 Elasticsearch API。

下面是一个数据的响应，

{
  "_index": "person_data",
  "_type": "_doc",
  "_id": "moahn",
  "_score": 1,
  "_source": {
    "person_details": {
      "age": 23,
      "gender": "male",
      "mothers_name": "Jabito",
      "mainden_name": "Rosoku",
      "designation_info": {
        "designation_name": "Architect",
        "company": {
            "company_location": "Delhi",
            "experience": 4,
        }
      }
    }
  }
}

我正在寻找以用户在组合框中选择列名的相同顺序解析数据的方法。我试图循环如下，每个循环都试图循环获取的数据但没有按预期工作，

self.selectedColumns().forEach(function(col){
  tempCols.push({headerText: col, field: col});
  ...
  ...
});

由于 Elasticsearch 没有提供项目名称详细信息，因此我可以简单地获取它，并且 ES 返回的数据是嵌套的 JSON 格式的结果，它的名称与组合框中的用户选择显示的名称不同。任何帮助将不胜感激

【问题讨论】：

标签： javascript knockout.js oracle-jet

【解决方案1】：

最简单的方法是创建一个类似于“模式”的映射文件，您可以在其中指定列如何与字段一一对应。所以你可以这样做：

ColumnDataMapping: {
   "age": { field: "age", label: "Age" }
   "mothersName": { field: "mothers_name", label: "Mothers Name" },
   "designation": { field: "designation_info.designation_name", label: "Designation" }
   "location": { field: "designation_info.company.company_location", label: "Location" }
   ...
}

然后在使用该映射的视图模型中，您可以获取它们映射到的列和字段。请注意，在您的组合框中，您将不具有与标签相同的值。您的值将是 ColumnDataMapping 中的 keys，而您的标签将是 label 字段。

这样您就可以灵活地处理代码，因为您只关心“模式”的正确配置。因此，您可以从代码中解耦字段如何映射等知识。

这也允许您现在存储该“模式”并使其可自定义。您还可以添加任何您想要扩展它的字段...例如 enabled 用于字段等。

【讨论】：