2013-11-28 15 views
11

に円形構造の変換こんにちは、私はそうのような小さな角度のアプリがあります。角度はTypeError:JSON

// 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 

私はここで何が起こっているのか分かりません。どんな助けでも大歓迎です。私は実際にオブジェクトを更新するtask.project.idを必要と

$scope.updateTask = function(obj) { 
    parentProject = {'id': obj.project.id}; 
    obj.project = parentProject; 
    ConcernService.update('tasks/', obj).then(function(){ 
     ... 
    }); 
}; 

これは動作します:

EDIT

だから、私はこのような問題を解決することができます。 I thinkこの問題は、タスクが親プロジェクトを参照し、子タスクなどを参照するという事実によるものです。私はこの厳しいことについて完全にはわかりません。

しかし、この解決法は私にとってはちょっとハックしたようで、私はより良い解決策を見たいと思っています。

答えて

14

どこかにあなたがJSONにオブジェクトを変換しようとしている、そしてそれはそれで循環参照を持って、このような何か意味:

var myObj = new Object(); 
myObject.reference = myObj; 

今すぐJSONにこれを変換しようが失敗し、あなたのエラーが生成されます。これは、「タスクがプロジェクトに属している」「このプロジェクトは、複数のタスクを持っている」との関係をモデル化することになっている

task.parent -> {project} 

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

:編集した記事を見てみると

は、あなたのデータ構造は、このようなものです。

これは、循環参照のために、明らかにjson形式に変換できません。データ構造については

、なぜ一緒に行くではない:あなたはangularjsアプリ内の関係を表示する必要があるときはいつでも、あなたがフィルターに行くことができる

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

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

。プロジェクトに属するものを表示する場合は、すべてのタスクをprojectidでフィルタします。

バックエンドが特定のプロジェクトIDに対してどのようなタスクを要求しているかによって、必要なデータだけをバックエンドから取得します。

これはその方法の1つです。もちろん、バックエンドが適切な更新要求を受け入れることは、まったく同様に働くであろう。プロジェクトを更新するには、プロジェクトIDとタスクIDの配列が必要です。

+0

hmmm。まあ、私は自分のコードでJSON.stringifyを使用していません。 'ConcernService.update'メソッドで失敗するようです。 –

+0

興味深いのは、選択フィールドでプロジェクトを変更するとすべてが機能するということです。ですから、 'new_task.project'に循環参照があることはわかっていますが、どこにあるのかは分かりません。 –

+0

Chromeブラウザをお持ちの場合は、開発ツールを使用してjavascriptをデバッグすることができます。これはMozillaのFirebugアドオンでも同様です。実行中にコード内のオブジェクトを検査し、問題のケースで作業中のケースと比較することができます。 – bgse