Currently, I am working on a project involving AngularJS. The main goal of this project is to create a dynamic JSON generator using AngularJS. I have already developed the initial version and it works well. However, there is a minor issue with my application that needs addressing. Whenever a user enters information, it is automatically added to the object with <> as the key. Even if the user modifies or clears the input form, the key remains in place even when the form is empty. Does anyone have suggestions on how to resolve this particular problem?
Here is the HTML code:
<div ng-controller="ctrl">
<form>GivenName:
<input type="text" ng-model="person.givenName" ng-change='change()'/>
<br>FamilyName:
<input type="text" ng-model="person.familyName" ng-change='change()' />
<br>Gender:
<input type="text" ng-model="person.gender" ng-change='change()' />
<br>Nationality:
<input type="text" ng-model="person.nationality" ng-change='change()' />
<br>WorksFor:
<input type="text" ng-model="person.worksFor" ng-change='change()' />
<br>JobTitle:
<input type="text" ng-model="person.jobTitle" ng-change='change()' />
<br>Url:
<input type="text" ng-model="person.url" ng-change='change()' />
<br>Image:
<input type="text" ng-model="person.image" ng-change='change()' />
<br>
</form>
<h1>Your JSON</h1>
<pre>{{output | json}}</pre>
</div>And here is my Angular file:
angular.module("watch", [])
.controller("ctrl", function($scope) {
$scope.output = {
"@context": {
"schema": "http://schema.org/"
},
"@graph": [{
"@id": "person",
"@type": "schema:Person"
}
]
}
$scope.person = {};
function changeKeyValue() {
for (var key in $scope.person) {
if ($scope.person.hasOwnProperty(key)) {
$scope.output["@graph"][0]["schema:" + key] = $scope.person[key];
}
else if
}
}
$scope.change = function () {
changeKeyValue();
}
})