angularJs TypeError:将圆形结构转换为 JSON [英] angularJs TypeError: Converting circular structure to JSON
问题描述
我有一个像这样的小型 AngularJs 应用程序:
//html<div ng-repeat="项目中的项目"><h3>{{ project.id }}</h3><h3>{{ project.title }}</h3><div ng-repeat="project.tasks 中的任务">{{ task.id }}.{{ task.title }}
<button class="btn btn-default" ng-click="showEditTask=true">编辑任务</button><div class="box row animate-show-hide" ng-show="showEditTask"><h2>创建新任务</h2><form name="newTaskForm" class="form-horizontal">标题:<br/><input ng-model="new_task.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required/><br/>项目:<br/><select ng-model="new_task.project" ng-options="project.title for project in projects" class="form-control"></select><br></表单><button class="btn btn-success" ng-click="createTask(new_task)" ng-disabled="!newTaskForm.title.$valid">create</button>//app.js关注App.factory('关注服务'，功能($http，$q){...更新:函数(obj_url，obj){var defer = $q.defer();控制台日志(对象)$http({方法: 'POST',url: api_url + obj_url + obj.id + '/',数据:对象}).成功(功能(数据，状态，标题，配置){defer.resolve(数据);}).error(function (data, status, headers, config) {延迟拒绝(状态)；});返回 defer.promise;},});关注App.controller('ProjectsCtrl', 函数($scope, $http, ConcernService) {$scope.updateTask = function(obj) {ConcernService.update('tasks/', obj).then(function(){...}});
问题在于更新任务并保持父项目不变.如果我更改父项目，一切正常.如果我使用相同的父项目，那么我得到:
TypeError: 将循环结构转换为 JSON我不完全确定这里发生了什么.
编辑
所以，我可以这样解决问题:
$scope.updateTask = function(obj) {parentProject = {'id': obj.project.id};obj.project = parentProject;ConcernService.update('tasks/', obj).then(function(){...});};这有效，因为我实际上只需要 task.project.id 来更新对象.我认为问题是由于该任务引用了一个父项目，而该父项目又引用了子任务等.我不完全确定这是否困难.
但是，这个解决方案对我来说似乎有点笨拙，我很想看到更好的解决方案.
在某个地方您尝试将对象转换为 JSON，并且其中包含循环引用，含义如下:
var myObj = new Object();myObject.reference = myObj;现在尝试将其转换为 JSON 将失败，并产生您的错误.
看看你编辑过的帖子，你的数据结构是这样的:
task.parent ->{项目}project.tasks ->[{task1},{task2},...]这应该模拟项目有多个任务"和任务属于一个项目"的关系.
现在这显然不能转换成json格式，因为循环引用.
对于数据结构，为什么不去:
project = { "id": 42,任务":[123, 124, 127, ... ],}任务 = {id":123，idproject":42，...}每当您必须在 angularjs 应用程序中显示关系时，您都可以使用过滤器.如果要显示属于某个项目的内容，请按 projectid 过滤所有任务.
或者通过请求后端针对特定项目 ID 的任务，仅从后端动态检索所需数据.
这是一种方法.当然，让后端接受适当的更新请求也可以正常工作，例如更新项目需要项目 ID 和一组任务 ID.
I have a small AngularJs app like so:
// html
<div ng-repeat="project in projects">
<h3>{{ project.id }}</h3>
<h3>{{ project.title }}</h3>
<div ng-repeat="task in project.tasks">
<h4>{{ task.id }}. {{ task.title }}</h4>
<button class="btn btn-default" ng-click="showEditTask=true">Edit Task</button>
<div class="box row animate-show-hide" ng-show="showEditTask">
<h2>Create a New Task</h2>
<form name="newTaskForm" class="form-horizontal">
Title: <br />
<input ng-model="new_task.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required /><br />
Project: <br />
<select ng-model="new_task.project" ng-options="project.title for project in projects" class="form-control"></select><br>
</form>
<button class="btn btn-success" ng-click="createTask(new_task)" ng-disabled="!newTaskForm.title.$valid">create</button>
</div>
</div>
</div>
// app.js
concernsApp.factory('ConcernService', function ($http, $q) {
...
update: function (obj_url, obj) {
var defer = $q.defer();
console.log(obj)
$http({method: 'POST',
url: api_url + obj_url + obj.id + '/',
data: obj}).
success(function (data, status, headers, config) {
defer.resolve(data);
}).error(function (data, status, headers, config) {
defer.reject(status);
});
return defer.promise;
},
});
concernsApp.controller('ProjectsCtrl', function ($scope, $http, ConcernService) {
$scope.updateTask = function(obj) {
ConcernService.update('tasks/', obj).then(function(){
...
}
});
The problem is with updating a task and leaving the parent project as is. If I change the parent project, it all works fine. If I use the same parent project then I get:
TypeError: Converting circular structure to JSON
I'm not entirely sure what is happening here.
Edit
So, I can solve the problem like this:
$scope.updateTask = function(obj) {
parentProject = {'id': obj.project.id};
obj.project = parentProject;
ConcernService.update('tasks/', obj).then(function(){
...
});
};
This works as I only actually need the task.project.id to update the object. I think the problem is due to that fact that the task references a parent project, which in turn references the child tasks etc. I'm not entirely sure about this tough.
However, this solution seems a little hacky to me and I would love to see a better solution.
Somewhere you are trying to convert an object to JSON, and that has a circular reference in it, meaning something like this:
var myObj = new Object();
myObject.reference = myObj;
Now trying to convert this to JSON will fail, and produce your error.
Looking at the your edited post, your data structure is something like this:
task.parent -> {project}
project.tasks -> [{task1},{task2},...]
This is supposed to model the relation "project has multiple tasks" and "task belongs to a project".
Now this can obviously not be converted to json format, due to circular referencing.
For the data structure, why not go with:
project = { "id": 42,
"tasks": [123, 124, 127, ... ],
}
task = { "id": 123,
"idproject": 42,
...
}
Whenever you have to show the relationships in your angularjs app, you could go with filters. If you want to show what belongs to a project, filter all tasks by projectid.
Or retrieve only the required data from your backend on the fly, by requesting what tasks the backend has for a specific project id.
That is one way to do it. Of course, having the backend accept appropriate update requests would be working just as well, e.g. updating a project would require the project id, and an array of task ids.
这篇关于angularJs TypeError:将圆形结构转换为 JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
