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
1 answers
solution1
1 2015-05-12 04:02:00
I think this is what you are looking for. Fiddle
What I changed in your code :
I use
ng-changeinstead of$watch. Different between them : ReferenceI create a
changeKeyValuemethod to extract key value from$scope.volatileand append it to your@graphwhen any changes happen toinputfor (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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.