用一些逻辑在表格中显示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

完成在奥里利亚这一目标的正确方法是使用值转换器来过滤集合。你可以创建一个单一的值转换器，它可以兼顾赔率和均值，但我认为通过创建两个值转换器，代码更具可读性。我修改@ 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

如果你可以使用angularJS，这里是一个solution..may是你可能会发现在奥里利亚类似的逻辑也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> 

Answer 3

这里的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>