JSFiddle - React, Tailwind, and code Playground

by dzul1983

HTML

<div data-bind="foreach: people">
    <p data-bind="foreach: property">
        <span data-bind="text: value"></span>
    </p>
</div>

JavaScript

var people = [
    {
        firstName: 'Barack',
        lastName: 'Obama',
        //checked: ko.observable(false)
    },
    {
        firstName: 'Albert',
        lastName: 'Einstein',
        //checked: ko.observable(false)
    },
    {
        firstName: 'Mahathir',
        lastName: 'Mohammad',
        //checked: ko.observable(false)
    },
    {
        firstName: 'Ryan',
        lastName: 'Giggs',
        //checked: ko.observable(false)
    }
];

function person(data){
    this.property = [];
    for(var i in data){
        if(data.hasOwnProperty(i)){
            this.property.push({ key: i, value: data[i] });
        }
    }
}

var newVM = [];
for(var i =0;i<people.length;i++){
    newVM.push(new person(people[i]));
}
console.log(newVM);


var myViewmodel = {
    people: newVM
};

ko.applyBindings(myViewmodel);