从Json文件中加载枚举值数组

Load array of Enum values from Json file

本文关键字：枚举 数组 加载 Json 文件      更新时间：2023-09-26

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

您可以使用值转换器来处理对象。事实上，在[文档，最后一节]中有一个很好的例子。

将上面的例子应用到你的案例中，甚至可以在没有任何预先转换的情况下处理对象。

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)

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属性与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>

您可以使用这里描述的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);
  });
相关文章：