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

Question

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

<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 中，正在获取 select 用户

的列名称

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

并使用基于 selection 的数据调用 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,
        }
      }
    }
  }
}

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

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

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

Answer 1

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

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

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

这样您就可以灵活地使用您的代码，因为您只关心 "schema" 的正确配置。所以你从代码中解耦字段如何映射等知识

这还允许您现在存储 "schema" 并使其可自定义。您还可以添加任何要扩展的字段...例如 enabled 字段等

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

populate dynamic columns based on the user column selection using oracle jet + knockout JS + elasticsearch

javascript

knockout.js

oracle-jet