Question

我有一个包含所有Enum键值对的本地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是否允许执行此操作所必需的数组类型。 / p>

// 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]中有一个很好的例子。

将上述示例应用于您的案例，甚至可以在没有任何先前转换的情况下处理对象。

Gist演示：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演示，你可以查看它。

这样可行，但不可重复使用

<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）

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

<强>枚举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>

Answer 2

您可以使用http://aurelia.io/hub.html#/doc/article/aurelia/fetch-client/latest/http-services/2

中所述的aurelia-fetch-client

例如：

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

let client = new HttpClient();

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

从Json文件加载Enum值的数组

2 个答案:

更新

这样可行，但不可重复使用

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

用法