我有一个包含所有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?如何使用加载的数组/对象?
答案 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
。)
将上述模板整理到具有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>
答案 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);
});