Отображение результата Json в таблице с некоторой логикой

Question

У меня есть требование отобразить некоторые данные Json в таблице Html, используя Auralia js.

Услышь мои данные 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

Thanks

Answer 1

Правильный путь для достижения этой цели в Aurelia является использование Value Converter для фильтрации коллекции. Вы можете создать единый конвертер значений, который может выполнять как коэффициенты, так и выравнивания, но я думаю, что код более читабельен, создавая два преобразователя значений. Я изменил @ решения LStarky, чтобы показать, как это сделать:

Runable сутью: 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 быть, вы можете найти подобную логику в 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> 

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>