javascript - 无法正确将json映射到数据模型

我想将以下信息建模为json，但是无法这样做。

服务器使用以下模型将操作结果发送给客户端

class Result (result:string, additional-info:string)

根据使用情况，additional-info可以包含json或string。因此，其类型为String。当我需要在其中发送json时，我只需发送具有有效json语法的字符串，并且我认为Angular客户端将能够使用json将字符串转换为JSON.parse。

我要发送给客户端的json看起来像

{
    "result": "success",
    "additional-info": {
        "list ": [{
            "tag": "sometag",
            "description": "some description"
        }]
    }
}

我检查了jsonlint（https://jsonlint.com/）的结构是否正确。

在客户端（Angular）上，我将消息处理如下：

  getQuestions(some args){
      console.log('response from server:',res)
      console.log('response body',res.body)
      let jsonResponse:ServerResponseAPI = res.body //should contain result and additional info
      console.log("result: "+jsonResponse.result+", additional info:"+jsonResponse.additionalInformation)
      let jsonList:string = jsonResponse.additionalInformation
      console.log("jsonQuestionList: "+jsonList)
      let information:Information = JSON.parse(jsonList)
      console.log("information:"+information)
    });
  }

ServerResponseAPI定义为

export class ServerResponseAPI{
  constructor ( public result:string,
               public additionalInformation:string){}
}

执行代码时，我在浏览器的控制台上看到以下打印内容，但是看到未定义additional-info的错误。

response body {result: "success", additional-info: "{"list ": [{"tag": "sometag", "description": "some description"}]}"}list-management.service.ts:46 result: success, additional info:undefined

我可以看到主体包含result和additional-info，但是将主体转换为ServerResponseAPI之后，我看到result是success，但是additional-info是不确定的。

最佳答案

在res.body中，javascript创建一个对象

{
    "result": "success",
    "additional-info": {
        "list ": [{
            "tag": "sometag",
            "description": "some description"
        }]
    }
}

该对象有两个键-result和additional-info。让我们称之为Object1

我将其分配给具有键result和additionalInfo的对象。请注意additionalInfo中命名约定的差异。在javascript中，变量名称区分大小写，因此以上两个是不同的。让我们称之为object2

现在，由于键匹配（相同名称result），object1中的result被分配给了object2中的result。
additional-info成为object2中的新密钥
additionalInfo的object2键保持未定义状态，因为object1中没有键映射到additionalInfo

为了解决该问题，我必须创建一个additional-info密钥ServerResponseAPI（或者，我也可以将JSON属性名称更改为additionalInfo，但我不想更改它）。这是在Angular中完成的

export class ServerResponseAPI{
  'additional-info':string;
  constructor ( public result:string,
               public additionalInformation:string){
    this['additional-info'] = additionalInformation;
  }
}

在我的代码中，我现在以以下方式访问密钥：

let jsonResponse:ServerResponseAPI = res.body //contains result and additional info
      console.log("result: "+jsonResponse.result+", additional info:"+jsonResponse['additional-info'])
      let jsonQuestionList:string = jsonResponse['additional-info']