javascript - appending data to json-ld using angularjs -
i newbie in angularjs , started on project learn more framework. make application puts data in json-ld.my app can add data json-ld without format of output want ,this one:<<"schema:data">>.this html , angular files:
<!doctype html> <html> <head> <title> reelyactive: angular test </title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"> </script> <script type="text/javascript" src="watch.js"> </script> <link rel="stylesheet" href="style.css" /> </head> <body ng-app="watch"> <ul> <li><a href="product.html">product</a></li> <li><a href="place.html">place</a></li> </ul><br/><br/> <div ng-controller="ctrl"> <form> givenname: <input type="text" ng-model="volatile.givenname"> <br/> familyname: <input type="text" ng-model="volatile.familyname"> <br/> gender: <input type="text" ng-model="volatile.gender"> <br/> nationality: <input type="text" ng-model="volatile.nationality"> <br/> worksfor: <input type="text" ng-model="volatile.worksfor"> <br/> jobtitle: <input type="text" ng-model="volatile.jobtitle"> <br/> url: <input type="text" ng-model="volatile.url"> <br/> image: <input type="text" ng-model="volatile.image"> <br/> </form> <h1> json </h1> <p> {{output}} </p> </div> </body> </html>angular.module("watch", []) .controller("ctrl", function($scope) { $scope.output = { "@context": { "schema": "http://schema.org/" }, "@graph": [{ "@id": "person", "@type": "schema:person", } ] } $scope.volatile = {}; $scope.output["@graph"][0]["schema:givenname"] = ""; $scope.$watch(function(scope) { return scope.volatile }, function(newvalue, oldvalue) { $scope.output = newvalue; }); })for example,if user enters in givenname form ,it appears in @graph part of json-ld this:<<"schema:givenname":user data>>. know explications not clear , if can have demo potential solution, me lot
i think looking for. fiddle
what changed in code :
i use
ng-changeinstead of$watch. different between them : referencei create
changekeyvaluemethod extract key value$scope.volatile, append@graphwhen changes happeninputfor (var key in $scope.volatile) { if ($scope.volatile.hasownproperty(key)) { $scope.output["@graph"][0]["schema:" + key] = $scope.volatile[key]; } }basically loop through object, extract key-value , append
output. hope helps.
Comments
Post a Comment