角类型错误：转换圆形结构，以JSON [英] angular TypeError: Converting circular structure to JSON

问题描述

您好我有一个小角度的应用程序，像这样：

Hi I have a small Angular 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

我不能完全肯定这里发生了什么。任何帮助将是非常美联社preciated。

I'm not entirely sure what is happening here. Any help would be much appreciated.

修改

所以，我可以解决的问题是这样的：

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(){
        ...
    });
}; 

这个工程，我只是实际需要的 task.project.id 更新对象。我的认为的问题是由于事实，即任务引用父项目，这反过来又引用子任务等。我不能完全肯定这个艰难。

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.

推荐答案

某处你正试图转换的目的是JSON，而且中有一个循环引用，意思是这样的：

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;

现在试图将其转换为JSON将失败，并产生您的错误。

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".

现在这显然不能被转换成JSON格式，由于循环引用。

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,
            ...
       }

只要你有展示你的angularjs应用的关系，可以用滤镜去。如果你想显示什么属于一个项目，由专案编号过滤所有任务。

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.

或者，通过请求后端有什么任务，为特定项目的ID检索只能从苍蝇后端所需的数据。

Or retrieve only the required data from your backend on the fly, by requesting what tasks the backend has for a specific project id.

这是做这件事。当然，具有后台接受适当的更新请求会被公正的工作为好，例如更新项目将要求项目的ID和任务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.

这篇关于角类型错误：转换圆形结构，以JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！