javascript - 使用一些逻辑在表中显示 Json 结果

Question

我需要使用 Auralia js 在 Html 表中显示一些 Json 数据。

听到的是我的Json数据

[{
    "Key": "Name",
    "value": "Sriram",
    "order": "01"
  }, {
    "Key": "Email",
    "value": "sriram@gmail",
    "order": "02"
  }, {
    "Key": "Genader",
    "value": "male",
    "order": "03"
  }, {
    "Key": "DOB",
    "value": "01-01-88",
    "order": "04"
  }, {
    "Key": "MobileNo",
    "value": "999999999",
    "order": "05"
  }, "Key": "Address", "value": "", "order": "06"
}]

现在我需要显示这张表，其中所有“订单”均数在一侧，赔率在另一侧

在使用 Aurelia js/JavaScript 时有什么简单的方法可以实现这一点

谢谢

Answer 1

在 Aurelia 中实现此目标的正确方法是使用值转换器来过滤集合。您可以创建一个既可以进行奇数也可以进行偶数的单值转换器，但我认为通过创建两个值转换器可以使代码更具可读性。我修改了@LStarky 的解决方案以展示如何执行此操作:

可运行要点:https://gist.run?id=1a66d5495314b06e378062610bd8da80 **

app.html

<template>
  <div class="container-fluid">
  <div class="container-fluid">
    <h1>Bootstrap Method (Responsive)</h1>
    <p><i>The second column will wrap down below on smaller screens... 
    if you see it in one column, try widening the screen</i></p>
    <div class="row">
      <div class="col-xs-6">
        <div repeat.for="field of myData | odds">
          <p><b>${field.Key}:</b> ${field.value}</p>
        </div>
      </div>
      <div class="col-xs-6">
        <div repeat.for="field of myData | evens">
          <p><b>${field.Key}:</b> ${field.value}</p>
        </div>
      </td>
    </div>
  </div>
</template>

app.js

export class App {
  myData = [{
      "Key": "Name",
      "value": "Sriram",
      "order": "01"
    }, {
      "Key": "Email",
      "value": "sriram@gmail",
      "order": "02"
    }, {
      "Key": "Genader",
      "value": "male",
      "order": "03"
    }, {
      "Key": "DOB",
      "value": "01-01-88",
      "order": "04"
    }, {
      "Key": "MobileNo",
      "value": "999999999",
      "order": "05"
    }, "Key": "Address", "value": "", "order": "06"
  }];
}

export class EvensValueConverter {
  toView(value) {
    return value.filter( x => parseInt(x.order) % 2 === 0 );
  }
}

export class OddsValueConverter {
  toView(value) {
    return value.filter( x => parseInt(x.order) % 2 === 1 );
  }
}