从Json文件加载Enum值的数组

时间:2016-11-07 13:55:41

标签: javascript arrays enums aurelia

我有一个包含所有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?如何使用加载的数组/对象?

2 个答案:

答案 0 :(得分: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。)

将上述模板整理到具有sourcename可绑定属性的自定义元素中:

  • source:您的data对象
  • namedata对象的第一级属性(例如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>

答案 1 :(得分:0)

您可以使用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);
  });