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 );
  }
}

Answer 2

这是Aurelia解决方案：

工作演示： https://gist.run/?id=20495ff4f507472936b0ae5c99058bac

<强> 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"}];
}

<强> app.html：

<h1>Table Method</h1>
<table width="100%">
  <td>
    <div repeat.for="field of myData" if.bind="field.order % 2">
      ${field.Key}: ${field.value}
    </div>
  </td>
  <td>
    <div repeat.for="field of myData" if.bind="!(field.order % 2)">
      ${field.Key}: ${field.value}
    </div>
  </td>
</table>

Answer 3

如果你可以使用angularJS，这里有一个解决方案..你可能会在Aurelia js中找到类似的逻辑： -

在您的控制器中 -

app.controller("myController", function($scope){
  $scope.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"}];
});

和你的HTML -

<div style="display: inline;">
  <div ng-repeat="(k,v) in myData" ng-if="$index % 2 == 0" style="float:left">
     {{k}}:{{v}}
  </div>
  <div ng-repeat="(k,v) in myData" ng-if="$index % 2 == 1" style="float:right">
     {{k}}:{{v}}
  </div>
</div>

使用某些逻辑在表中显示Json结果

3 个答案: