从 Json 文件加载枚举值数组

Question

我有一个本地 JSON 文件，其中包含我的所有 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);
  }
}

更新：

但是我如何定位一个特定的项目而不必遍历所有项目呢？

我已经扩展了原来的 gist demo，你可以看看。

这可行，但不可重复使用

<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 可绑定属性的自定义元素：

• source：你的data对象
• name：data 对象的一级属性（例如 AbsenceCode）

枚举列表.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 属性与aurelia-i18n 结合使用来显示有意义的标签。例如。 ${name | t}.

枚举列表.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>

Answer 2

您可以使用aurelia-fetch-client，如此处所述http://aurelia.io/hub.html#/doc/article/aurelia/fetch-client/latest/http-services/2

例如：

import {HttpClient} from 'aurelia-fetch-client';

let client = new HttpClient();

client.fetch('package.json')
  .then(response => response.json())
  .then(data => {
    console.log(data.description);
  });