如何在Aurelia JS中绑定Web API中的数据？

我有json数据，这是我从调用Web API得到的。代码如下

export class App {

constructor() {

    this.empRecords = null;
    this.fetchEmployees();
}

fetchEmployees() {
    httpClient.fetch('http://localhost:61517/odata/emps')
        .then(response => response.json())
        .then(data => {
            this.empRecords = data;
        });
}

}

当我在html表中绑定这个json数据时。html代码如下：

 <table border="1">
    <thead>
        <tr>
            <td><b>First Name</b></td>
            <td><b>Last Name</b></td>
            <td><b>Age</b></td>
            <td><b>Gender</b></td>
            <td><b>Department</b></td>
        </tr>
    </thead>
    <tbody>
        <tr repeat.for="emp of empRecords">

            <td>${emp.fname}</td>
            <td>${emp.lname}</td>
            <td>${emp.age}</td>
            <td>${emp.gender}</td>
            <td>${emp.department}</td>
        </tr>
    </tbody>
</table>

名字
姓
年龄
性别
部门
${emp.fname}
${emp.lname}
${emp.age}
${emp.gender}
${emp.department}

无法绑定html表中的数据。它显示以下错误：

未捕获错误：“empRecords”的值不可重复

---

如何在aurelia js中绑定html表中的数据。

在内部调用时，此

不是引用

类App（）

.then(data => {
    this.empRecords = data;
});

我不确定，但请尝试使用：

export class App {

    constructor() {
        this.empRecords = null;
        this.fetchEmployees();
    }

    fetchEmployees() {
        var self = this;

        httpClient.fetch('http://localhost:61517/odata/emps')
            .then(response => response.json())
            .then(data => {
                self.empRecords = data;
            });
    }

---

JSON不是数组，而是包含一个

值

，该值包含要绑定到的数组。像这样的事情应该可以做到：

httpClient.fetch('http://localhost:61517/odata/emps')
    .then(response => response.json())
    .then(data => {
        this.empRecords = data.value;
    });

编辑：正如另一个答案中所建议的，您还应该通过设置

this.empRecords = []

在构造函数中

httprequest返回的JSON：

{
  "odata.metadata":"localhost:61517/odata/$metadata#emps",
  "va‌​lue": [
    {
      "id":1004,
      "fn‌​ame":"jai",
      "lname":"‌​pundir",
      "age":23,
      "ge‌​nder":"Male",
      "depart‌​ment":"IT"
    },
    {
      "id":10‌​05,
      "fname":"ram",
      "ln‌​ame":"singh",
      "age":2‌​4,
      "gender":"male",
      "d‌​epartment":"HR"
    }
  ]
}

---

问题是，在响应到达之前，数组为null，正如错误所说，这是不可重复的。您可以使用

if

保护

repeat.for

元素，或者将

empRecords

属性设置为空数组，而不是

null

。你甚至可以两者兼用

方法1：

<tbody if.bind="empRecords && empRecords.length">
  <tr repeat.for="emp of empRecords">
    <td>${emp.fname}</td>
    <td>${emp.lname}</td>
    <td>${emp.age}</td>
    <td>${emp.gender}</td>
    <td>${emp.department}</td>
  </tr>
</tbody>
<tbody if.bind="!empRecords || !empRecords.length">
  <tr>
    <td colspan="5">No data</td>
  </tr>
</tbody>

通过将

empRecords

设置为

[]

而不是

null

，它将变得可重复，只是它将为空

此外，根据您的反馈，您的响应结构包含嵌入属性中的值。修改fetchData方法，如下所示：

fetchEmployees() {
  var self = this;

  httpClient.fetch('http://localhost:61517/odata/emps')
    .then(response => response.json())
    .then(data => {
      self.empRecords = data.value;
    });
}

---

zeropublix error remove，但仍然没有将数据绑定到表Hey至少有一件事没有了：DArrow函数与常规函数不同，不修改

。transpiler将为您进行分类，因此手动捕获
此
@Balázs是多余的，谢谢您提供的信息。我不知道。那么我认为你的回答是错误的。将其记录到控制台，您可以将其分配给
this。empRecords
请查看它是什么。我的猜测是数组被包装在一个对象中。如果是这样的话，只需从那里提取数组。我有json数据，我称之为odata apita，它返回什么？{“odata.metadata”：“{”id:1004，“fname”：“jai”，“lname”：“pundir”，“age”：23，“gender”：“Male”，“department”：“IT”}，{”id:1005，“fname”：“ram”，“lname”：“singh”，“age”：24，“gender”：“Male”，“department”：“HR”}您需要将其绑定到
值
this.empRecords=data.value；
我已经更新了答案。
fetchEmployees() {
  var self = this;

  httpClient.fetch('http://localhost:61517/odata/emps')
    .then(response => response.json())
    .then(data => {
      self.empRecords = data.value;
    });
}