JSFiddle - React, Tailwind, and code Playground

by themyth92

HTML

<div ng-app='watch' ng-controller="ctrl">
    <form>GivenName:
        <input type="text" ng-model="volatile.givenName" ng-change='change()' />
        <br/>FamilyName:
        <input type="text" ng-model="volatile.familyName" ng-change='change()' />
        <br/>Gender:
        <input type="text" ng-model="volatile.gender" ng-change='change()' />
        <br/>Nationality:
        <input type="text" ng-model="volatile.nationality" ng-change='change()' />
        <br/>WorksFor:
        <input type="text" ng-model="volatile.worksFor" ng-change='change()' />
        <br/>JobTitle:
        <input type="text" ng-model="volatile.jobTitle" ng-change='change()' />
        <br/>Url:
        <input type="text" ng-model="volatile.url" ng-change='change()' />
        <br/>Image:
        <input type="text" ng-model="volatile.image" ng-change='change()' />
        <br/>
    </form>
     <h1>Your JSON</h1>

    <p>{{output}}</p>
</div>

JavaScript

angular.module("watch", [])
    .controller("ctrl", function ($scope) {

    $scope.output = {
        "@context": {
            "schema": "http://schema.org/"
        },
            "@graph": [{
            "@id": "person",
                "@type": "schema:Person",
        }]
    }

    $scope.volatile = {};

    function changeKeyValue() {

        for (var key in $scope.volatile) {
            if ($scope.volatile.hasOwnProperty(key)) {
                $scope.output["@graph"][0]["schema:" + key] = $scope.volatile[key];
            }
        }
    }

    $scope.change = function () {
        changeKeyValue();
    }
});