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 :

  1. i use ng-change instead of $watch. different between them : reference

  2. i create changekeyvalue method extract key value $scope.volatile , append @graph when changes happen input

    for (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

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -