angularJs TypeError:将循环结构转换为JSON

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularJs TypeError:将循环结构转换为JSON相关的知识,希望对你有一定的参考价值。

我有一个像我这样的小型AngularJs应用程序:

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

问题是更新任务并保持父项目不变。如果我更改父项目,一切正常。如果我使用相同的父项目,那么我得到:

TypeError: Converting circular structure to 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}

project.tasks -> [{task1},{task2},...]

这应该建模关系“项目有多个任务”和“任务属于一个项目”。

由于循环引用,现在显然不能转换为json格式。

对于数据结构,为什么不选择:

project = { "id": 42,
            "tasks": [123, 124, 127, ... ],
          }

task = { "id": 123,
         "idproject": 42,
            ...
       }

每当您必须在angularjs应用程序中显示关系时,您可以使用过滤器。如果要显示属于项目的内容,请按projectid过滤所有任务。

或者通过请求后端对特定项目ID具有哪些任务,即时检索后端所需的数据。

这是一种方法。当然,让后端接受适当的更新请求也可以正常工作,例如更新项目需要项目ID和一系列任务ID。

以上是关于angularJs TypeError:将循环结构转换为JSON的主要内容,如果未能解决你的问题,请参考以下文章

TypeError:将循环结构转换为 mongodb/mongoose 的 JSON

实现数据表时遇到错误-TypeError:将循环结构转换为 JSON

如何解决 NodeJS 中的“TypeError:将循环结构转换为 JSON”

TypeError:将循环结构转换为 JSON --> 从具有构造函数“ClientRequest”的对象开始

python3错误之TypeError: 'dict_items' object is not callable

尽管函数执行正确,但“将循环结构转换为 JSON”错误