JSFiddle - React, Tailwind, and code Playground

by infiniteloops

HTML

<input type='button' value='Add' data-bind='click: add' />
<p data-bind='text: jsonData'>

JavaScript

var str = '[{"one":"onevalue"}, {"two":"twovalue"}, {"three":"threevalue"}]';
var obj = JSON.parse(str);
var i = 3;

var Model = function (initArr) {
    var self = this;
    self.objArr = ko.observableArray(initArr || []);
    self.jsonData = ko.computed(function () {
        return ko.toJSON(self.objArr);
    });
    self.add = function () {
        i++;
        var value = 'newVal' + i;
        self.objArr.push({
            name: value
        });
    };
};

var vm = new Model(obj);
ko.applyBindings(vm)