javascript - 从 Json 文件加载 Enum 值数组

Question

我有一个本地 JSON 文件，其中包含所有 Enum 键值对，并希望将它们加载到我可以轻松使用的数组中。

enum.json

{
  "AbsenceCode": {
    "E": "Excused",
    "U": "Unexcused"
  },
  "ActiveInactive": {
    "A": "Active",
    "I": "Inactive"
  },
  "AuthenticationLog": {
    "1": "Staff",
    "2": "ParentAccess",
    "3": "StudentAccess"
  },
  "YesNo": {
    "0": "Yes",
    "1": "No"
  }
}

在我的 Javascript 代码中，我想将所有键值对加载到一个数组或对象中，以便我可以轻松访问它们，最终目标是 (a) 进行值查找和 (b) 创建选择框.

我开始了类似的事情，但我没有正确地思考它，而且还有些不确定是否应该使用数组或对象来完成此操作，以及 JavaScript 是否允许执行此操作所需的数组类型。

// load enumData
var enumKeys = $.getJSON("enum.json", function(json) {
  var array = [];
  for (var key in json) {
    var item = json[key];
    for (var keyvalue in item) {
      var value = item[keyvalue];
    }
    array.push(parsed[key])
  }
});
// test enumData
console.log(enumKeys["YesNo"]);

// lookup value of key
console.log(enumKeys["AbsenceCode"]["U"]);

在我的 Aurelia 模板中，我想要这样的东西:

<template>
  <select ref="absencecode">
    <option repeat.for="keyvalue of enumKeys.AbsenceCode" value="${keyvalue.key}">${keyvalue.value}</option>
  </select>
</template>

我的代码受到许多其他类似案例的答案的“启发”，但我没有找到任何与此确切场景相匹配的代码。任何帮助，将不胜感激!我应该使用什么代码来加载 enumKeys？如何使用加载的数组/对象？

Answer 1

您可以使用值转换器来处理对象。事实上，[Documentation, last section] 中有一个很好的例子。 .

将上面的示例应用于您的情况，甚至可以在不进行任何事先转换的情况下处理对象。

要点演示:https://gist.run/?id=4514caa6ee7d40df2f7cfe2605451a0e

不过，我不会说这是最佳解决方案。您可能希望在将数据传递到 repeat.for 之前以某种方式转换数据。 。只是在这里展示一种可能性。

模板:

<!-- First level properties -->
<div repeat.for="mainKey of data | keys">
    <label>${mainKey}</label>

    <!-- Sublevel - Value Object properties -->
    <select>
        <option value="">---</option>
        <option repeat.for="code of data[mainKey] | keys" 
                value="${code}">${data[mainKey][code]}</option> 
    </select>        
</div>

<强> keys值转换器:

export class KeysValueConverter {
  toView(obj) {
    return Reflect.ownKeys(obj);
  }
}

更新:

But how do I target one specific item without having to iterate over all of them?

我扩展了原来的要点演示，你可以看看。

这可以工作，但不能重用

<label>Absence Code</label>

<select>
    <option value="">---</option>
    <option repeat.for="code of data.AbsenceCode | keys" 
            value="${code}">${data.AbsenceCode[code]}</option> 
</select>

更好的方法是创建自定义元素

(注意: <require> 用于演示目的。通常，您会将其添加到 globalResources 。)

使用 source 将上述模板组织到自定义元素中和name可绑定(bind)属性:

• source :您的data对象
• name :data的一级属性对象(例如 AbsenceCode)

enum-list.html

<template>

    <require from="./keys-value-converter"></require>

    <label>${name}</label>
    <select name="${name}" class="form-control">
      <option value="">---</option>
      <option repeat.for="code of source[name] | keys" value="${code}">${source[name][code]}</option> 
    </select>

</template>

您还可以使用name属性(property)与 aurelia-i18n 相关显示有意义的标签。例如。 ${name | t} .

enum-list.js

import {bindable} from 'aurelia-framework';

export class EnumList {

  @bindable source;
  @bindable name;

}

用法

单独的下拉菜单:

<enum-list source.bind="data" name="AbsenceCode"></enum-list>
<enum-list source.bind="data" name="AuthenticationLog"></enum-list>

自 <enum-list>拥有所有数据，其 name属性也可以在运行时更改! :)

<label>Type</label>
<select class="form-control" value.bind="selectedType"> 
  <option repeat.for="mainKey of data | keys" value="${mainKey}">${mainKey}</option> 
</select>
<br>
<enum-list source.bind="data" name.bind="selectedType"></enum-list>