【问题标题】:http post with json file and nested array Angularjs带有 json 文件和嵌套数组 Angularjs 的 http 帖子
【发布时间】:2016-02-24 18:35:29
【问题描述】:

我有一个应用程序,它能够使用关系数据库模型通过 http 获取和发布。我能够显示我的数据,并且 JSON 数据在 http://localhost/**/api/complaint 上看起来像这样:

{
"CHECKLISTs": [{
    "COMP_ID": 1,
    "IntOIMRec": "No"
}],
"COMP_ID": 1,
"FileNum": "case1"
}

使用角度:

<tr data-ng-repeat="complaint in complaints">
<td><strong data-ng-hide="complaint.editMode">{{ complaint.FileNum }}</strong></td>
<td>
<p data-ng-hide="complaint.editMode">{{ complaint.CHECKLISTs[0].IntIAB}}</p>
<input data-ng-show="complaint.editMode" type="text" data-ng-model="customer.Status" />
</tr>

我也可以使用这个控制器发布 http:

//Insert complaint
$scope.add = function () {
    $scope.loading = true;
    $http.post('/api/Complaint/', this.newcomplaint).success(function (data) {
        alert("Added Successfully!!");
        $scope.addMode = false;
        $scope.complaints.push(data);
        $scope.loading = false;
    }).error(function (data) {
        $scope.error = "An Error has occured while Adding complaint! " + data;
        $scope.loading = false;
    });
};

但是当我将 Checklists[0] 添加到我的表单中以添加它时,它不会添加新记录。我添加新记录的表单代码如下所示:

<div class="row">
    <div class="col-md-12">
        <strong class="error">{{ error }}</strong>
        <p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a></p>
        <form name="addComplant" data-ng-show="addMode" style="width:600px;margin:0px auto;">
            <div class="form-group">
                <label for="cid" class="col-sm-2 control-label">ID:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="cid" placeholder="please enter id" data-ng-model="newcomplaint.FileNum" required />
                </div>
            </div>
            <div class="form-group">
                <label for="cname" class="col-sm-2 control-label">Name:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="cname" placeholder="please enter your name" data-ng-model="newcomplaint.CHECKLISTs[0].IntIAB" />
                </div>
            </div>

            <br />
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="submit" value="Add" data-ng-click="add()" class="btn btn-primary" />
                    <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
                </div>
            </div>
            <br />
        </form>
    </div>
</div>

我的 console.log 输出:

console.log

谁能告诉我是否可以使用 angular http.get 和 http.post 显示它,为什么当它清楚地在 JSON 文件中并且它显示得很好时,我不能添加到清单字段中?我得到的错误是 [object object] ?

谢谢

【问题讨论】:

  • console.log 来自成功处理程序的data 并将其添加到问题中。
  • @JohannesJander 我已经添加了。

标签: javascript angularjs json http-post http-get


【解决方案1】:

仅通过查看您的代码,您似乎正在推进 $scope.complaints,而不是 $scope.complaint.CHECKLISTs

你在某处有 ng-repeat 吗?

【讨论】:

  • 我愿意,我已将它添加到我的 html 代码中,使用角度。我虽然 $scope.complaints 已经在 json 文件中有清单?
【解决方案2】:

$scope.complaints.push(data); 更改为$scope.newcomplaint = data。或者如果投诉确实应该是一个数组,那么您需要在表单上添加一个ng-repeat

【讨论】:

  • 嗨 Johannes,我的页面上确实有一个 ng-repeat,但在添加新投诉表单中没有。我还更改了 $scope.complaints.push(data);到 $scope.newcomplaint = 没有修复错误 [object Object] 但仍然有效的数据。
  • 只需 console.log 从错误处理程序中记录数据,看看里面有什么。
  • 错误处理程序中的错误显示 ::“无法将当前 JSON 对象(例如 {"name":"value"}) 反序列化为类型 'System.Collections.Generic.ICollection`1[CRAMSMVC .Models.CHECKLIST]' 因为该类型需要 JSON 数组(例如 [1,2,3])才能正确反序列化。
  • ↵要修复此错误,请将 JSON 更改为 JSON 数组(例如 [1,2,3])或更改反序列化类型,使其成为普通的 .NET 类型(例如,不是原语像整数这样的类型,而不是像数组或 List 这样的集合类型,可以从 JSON 对象反序列化。 JsonObjectAttribute 也可以添加到类型中以强制它从 JSON 对象反序列化。 ↵路径 'CHECKLISTs.0',第 1 行,第 35 位。”你有什么建议?我还在学习,不想弄乱我的代码。
  • “弄乱你的代码” - 这真的不是一个论点。作为一名编码员,你每天都会弄乱你的代码来发现问题,然后你会再次整理它。尝试$http.post('/api/Complaint/', [this.newcomplaint]).success(function (data) { - 该错误来自您的 .NET 后端,所以我不知道为什么会抛出它。
猜你喜欢
  • 2012-09-18
  • 1970-01-01
  • 2014-03-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-05-28
相关资源
最近更新 更多