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

Question

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

<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 格式的结果，它不会与组合框中为用户选择显示的名称相同。任何帮助将不胜感激

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

然后在 View 模型中使用该映射，您可以获得列及其映射到的字段。请注意，在组合框中，您不会具有与标签相同的值。您的值将是 ColumnDataMapping 中的键，您的标签将是label 字段。

这样您就可以灵活地使用您的代码，因为您所关心的只是“架构”的正确配置。因此，您可以将字段如何映射等知识与代码分离。

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