appending data to json-ld using angularjs

Question

I am newbie in angularjs and I started on the project to learn more about this framework. I make an application that puts data in a json-ld.my app can add data to the json-ld but without the format of output that i want ,this one:<<"schema:data">>.this is my html and 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>
           Your 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 the user enters something in the givenName form ,it appears in the @graph part of my json-ld like this:<<"schema:givenName":user data>>. i know that my explications are not very clear and if i can have a demo for a potential solution, it will help me a lot

score 1 · Answer 1 · edited May 23 '17 at 11:51

I think this is what you are looking for. Fiddle

What I changed in your code :

I use ng-change instead of $watch. Different between them : Reference
I create a changeKeyValue method to extract key value from $scope.volatile and append it to your @graph when any changes happen to input
```
for (var key in $scope.volatile) {

    if ($scope.volatile.hasOwnProperty(key)) {
        $scope.output["@graph"][0]["schema:" + key] = $scope.volatile[key];
    }
}
```
Basically it just loop through the object, extract key-value and append it to your output. Hope it helps.

appending data to json-ld using angularjs

1 Answers1

Linked