使用 angularjs 将数据附加到 json-ld [英] appending data to json-ld using angularjs
问题描述
我是 angularjs 的新手，我开始了这个项目以了解有关此框架的更多信息.我制作了一个将数据放入 json-ld 的应用程序.我的应用程序可以将数据添加到 json-ld 但没有我想要的输出格式，这个:<<"schema:data">>.这是我的 html 和 angular 文件:
<头><标题>reelyActive:角度测试<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"><script type="text/javascript" src="watch.js"><link rel="stylesheet" href="style.css"/><body ng-app="手表"><ul><li><a href="product.html">Product</a></li><li><a href="place.html">Place</a></li></ul><br/><br/><div ng-controller="ctrl"><表格>给定的名称:<input type="text" ng-model="volatile.givenName"><br/>姓:<input type="text" ng-model="volatile.familyName"><br/>性别:<input type="text" ng-model="volatile.gender"><br/>国籍:<input type="text" ng-model="volatile.nationality"><br/>效劳于:<input type="text" ng-model="volatile.worksFor"><br/>职称:<input type="text" ng-model="volatile.jobTitle"><br/>网址:<input type="text" ng-model="volatile.url"><br/>图片:<input type="text" ng-model="volatile.image"><br/></表单><h1>你的 JSON<p>{{输出}}</p></html>
angular.module("watch", []).controller("ctrl", function($scope) {$scope.output = {@语境": {架构":http://schema.org/"},@graph":[{"@id": "人","@type": "模式:人",}]}$scope.volatile = {};$scope.output["@graph"][0]["schema:givenName"] = "";$scope.$watch(function(scope) {返回范围.volatile},功能(新值，旧值){$scope.output = newValue;});})例如，如果用户以 givenName 形式输入某些内容，它会出现在我的 json-ld 的 @graph 部分中，如下所示:<<"schema:givenName":user data>>.我知道我的解释不是很清楚，如果我能有一个潜在解决方案的演示，它将对我有很大帮助
我认为这就是您要寻找的.小提琴
我在您的代码中更改的内容:
我使用
ng-change而不是$watch.它们之间的区别:参考我创建了一个
发生任何变化时的图表changeKeyValue方法来从$scope.volatile中提取 键值 并将其附加到您的@当inputfor (var key in $scope.volatile) {如果 ($scope.volatile.hasOwnProperty(key)) {$scope.output["@graph"][0]["schema:" + key] = $scope.volatile[key];}}基本上它只是遍历对象，提取键值并将其附加到您的
输出.希望能帮到你.
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
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.
这篇关于使用 angularjs 将数据附加到 json-ld的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
