在 ngForm 中解析 JSONData答案

【问题标题】：Parsing JSONData in ngForm在 ngForm 中解析 JSONData
【发布时间】：2018-02-13 14:10:21
【问题描述】：

我想在 AngularJs2 中迭代下面的 JSON JsonRawData 对象。为此，我使用以下代码：

<div *ngFor="let item of userData;">
                <tr *ngFor="let subitem of item.JsonRawData;" >

但它给我抛出了异常即错误：

找不到不同的支持对象' 'string' 类型的 [{"USER_ID":null,"firstName":"......":null}]'。吴福只支持绑定到数组等Iterables。

我的来自 Web API 的 JSON：

[
  {
    "USER_ID": "a8717928-2e87-4627-b3c3-2e2549f0dc48",
    "**JsonRawData**": " [{\"USER_ID\":null,\"firstName\":\"sumit\",\"lastName\":\"joshi\",\"landline\":\"01127850127\",\"phone\":null,\"gender\":\"Married\",\"maritalstatus\":\"D\",\"gotra\":\"Kaushik\",\"dob\":{\"date\":{\"year\":\"2017\",\"month\":\"12\",\"day\":\"24\"},\"jsdate\":\"\",\"formatted\":\"\",\"epoc\":\"\"},\"birthplace\":\"Delhi\",\"time\":{\"hh\":\"12\",\"min\":\"1\",\"sec\":\"49\"},\"password\":\"12234\",\"confirmPassword\":\"\",\"height\":\"5.7\",\"weight\":\"84\",\"incomerange\":\"10000-20000\",\"smokestatus\":\"Yes\",\"dietstatus\":\"Veg\",\"workstatus\":\"job\",\"drinkstatus\":\"No\",\"religion\":\"Hindu\",\"mothertounge\":\"Hindi\",\"rashi\":\"5\",\"education\":\"MBA\",\"profession\":\"Job\",\"address\":\"Roihini\",\"country\":\"india\",\"city\":\"delhi\",\"place\":\"delhi\",\"zip\":\"110089\",\"about\":\"about me\",\"mySubCaste\":\"joshi\",\"recaptcha\":\"\",\"email\":\"a11rtg52@a.com\",\"nativeplace\":null,\"mobile\":\"9650899699\",\"JsonRawData\":null}]",
    "USER_PEROFILE_ID": 1
  },
  {
    "USER_ID": "c007dfca-f478-4794-b190-97fb1d5667c3",
    "JsonRawData": "[{\"USER_ID\":null,\"firstName\":\"sumit\",\"lastName\":\"joshi\",\"landline\":\"01127850127\",\"phone\":null,\"gender\":\"Married\",\"maritalstatus\":\"D\",\"gotra\":\"Kaushik\",\"dob\":{\"date\":{\"year\":\"2017\",\"month\":\"12\",\"day\":\"24\"},\"jsdate\":\"\",\"formatted\":\"\",\"epoc\":\"\"},\"birthplace\":\"Delhi\",\"time\":{\"hh\":\"12\",\"min\":\"1\",\"sec\":\"49\"},\"password\":\"12234\",\"confirmPassword\":\"\",\"height\":\"5.7\",\"weight\":\"84\",\"incomerange\":\"10000-20000\",\"smokestatus\":\"Yes\",\"dietstatus\":\"Veg\",\"workstatus\":\"job\",\"drinkstatus\":\"No\",\"religion\":\"Hindu\",\"mothertounge\":\"Hindi\",\"rashi\":\"5\",\"education\":\"MBA\",\"profession\":\"Job\",\"address\":\"Roihini\",\"country\":\"india\",\"city\":\"delhi\",\"place\":\"delhi\",\"zip\":\"110089\",\"about\":\"about me\",\"mySubCaste\":\"joshi\",\"recaptcha\":\"\",\"email\":\"a1138412@a.com\",\"nativeplace\":null,\"mobile\":\"9650899699\",\"JsonRawData\":null,\"USER_PEROFILE_ID\":0}]",
    "USER_PEROFILE_ID": 2
  }
]

【问题讨论】：

为了更清楚，我有 2 个单独的类：class jsonArray { constructor(public USER_ID: string, public firstName: string, public lastName: string){} } class arrayData { constructor(public USER_ID:编号，公共 JsonRawData：jsonArray[]，公共 USER_PEROFILE_ID：编号）{} }

标签： angular angular2-forms angular2-services angular2-directives

【解决方案1】：

您需要将其转换为 JSON。您需要将其解析为 JSON。

toJson(data) {
  data.JsonRawData = JSON.parse(data.JsonRawData.replace(/\//g, ""));
  return data;
}

【讨论】：

【解决方案2】：

您的对象具有反斜杠，因此 ng-repeate 不会将值作为数组获取。所以你应该删除\ 并重新分配对象。像这样

在打字稿中，您需要使用循环替换反斜杠。

for (let i = 0; i <= this.userData.length; i++) {
            this.userData[i].JsonRawData = this.userData[i].JsonRawData.replace(/\//g, "");

        }

【讨论】：

这是一个非常缓慢的过程，并且会降级整个过程。

【解决方案3】：

您必须在循环之前解析 JsonRawData。 https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

toObject(items) {
   return JSON.parse(items);
}

【讨论】：

【解决方案4】：

按如下方式解析您的 Json 数据

*ngFor="let item of userData;   
  *ngFor="let subitem of toJson(item.JsonRawData)

在component.ts文件中添加一个方法 toJson()

toJson(data){
JSON.parse(data)
}

Json parsed data

【讨论】：

它向我抛出异常“无法读取未定义的属性'解析'”。请告诉我如何解析它。
我们可以使用 toJson(item.JsonRawData) 方法，在 JSON.parse(item.JsonRawData) 方法中执行相同的操作
在此之后，我收到此错误，错误错误：找不到不同的支持对象' [{"USER_ID":null,"firstName":"sumit","lastName":"joshi", “座机”：“01127850127”，“电话”：null，“性别”：“1”，“确认密码”：“”，“身高”：“5.7”，“体重”：“84”，“收入范围”：“ 10000-20000","smokestatus":"Yes","dietstatus":"Veg","workstatus":"job","drinkstatus":"No","religion":"Hindu","mothertounge":"印地语","rashi":"5","教育":"MBA","职业":"工作","地址":"Roihini","国家":"印度","城市":"德里" 'string' 类型的 "place":"delhi"}]'。 NgFor 只支持绑定到 Arrays 等 Iterables。