在 rxjs ajax 回调中解析 JSON 不起作用

Posted 2023-03-13

【中文标题】在 rxjs ajax 回调中解析 JSON 不起作用

【英文标题】：Parsing JSON in rxjs ajax callback not working

【发布时间】：2018-03-19 03:57:55

【问题描述】：

我正在尝试在 Angular2 的 ajax 回调中解析 JSON 字符串。 在我致电response.json()) 并执行console.log() 之后，它工作正常。

这是我要解析的 JSON：

  "success": true,
  "data": 
    "id": "14cf4717-f5b6-4002-96b2-321324fc4077",
    "number": "1234",
    "sections": [
      
        "id": "53f43dd7-4c93-4925-a51d-c6f81f314275",
        "description": "Test",
        "created_at": "2017-10-07 15:08:01",
        "updated_at": "2017-10-07 15:08:01",
        "lines": [
          
            "id": "73fab07f-4401-43a4-99a4-13c891907ea7",
            "product_id": "62aa5388-712d-4ab1-9e64-6849889194d1",
            "product_name": "Product",
            "product_description": "test",
            "product_type": "product",
            "quantity": "1.00",
            "product": 
              "id": "62aa5388-712d-4ab1-9e64-6849889194d1",
              "name": "Product",
              "description": "test"
            
          
        ]
      
    ],
    "notes": []
  

在这个函数中：

 public getQuotation(quotationId: string, callback: Function) 
    this.http.get('/quotation/' + quotationId).subscribe((response) => 

      const responseJson = response.json();
      console.log(responseJson);

      callback(null);
    , () => 
      callback(null);
    );
  

结果如预期：

但是当我在console.log()下方添加这一行时： const quotation = <FinBaseModel>(responseJson.data);

public getQuotation(quotationId: string, callback: Function) 
    this.http.get('/quotation/' + quotationId).subscribe((response) => 

      const responseJson = response.json();
      console.log(responseJson);

       const quotation = <FinBaseModel>(responseJson.data);

      callback(quotation);
    , () => 
      callback(null);
    );
  

那么lines数组为空...

我不明白这是怎么可能的，因为我在尝试将其转换为 FinBaseModel 之前先执行了 console.log()

有谁知道这是怎么可能的，我该如何解决？

【问题讨论】：

提供minimal reproducible example

猜你是在对某个 AJAX 请求的回调中解析它？

@llama 是的，我更新了我的帖子

请在尝试解析之前显示字符串的打印调试器版本或实际字符串。这个 json，如果字符串化，将毫无问题地解析。

【参考方案1】：

使用 HttpClient。 Documentation 应该这样做：

http.get<ItemsResponse>('/api/items').subscribe(data => 
// data is now an instance of type ItemsResponse, so you can do this:
   this.results = data.results;
);

 getQuotation(quotationId: string, callback: Function) 
    this.http.get<FinBaseModel>('/quotation/' + quotationId).subscribe((data) => 

 // call your callback here and pass 'data'
 // callback(data)
 // or return the value and consume it no need to json to
    return data

【参考方案2】：

宽度您现在提供的信息我无法帮助您解决问题。但我可以帮助您正确调试代码： 要查看实际值，如果值在您记录时发生更改，您必须记录其克隆以确保回调不会更改它。因此，将您的 console.log(response.data) 更改为 console.log(JSON.parse(JSON.stringify(response.data)))。更改两个日志并比较结果。我认为这将帮助您了解它并没有在那里改变，但是您的任何回调都在改变它。因为 TypeScript 类型实际上并没有做任何事情，只是为您提供类型保险和准确性。

【参考方案3】：

console.log 通过引用打印对象。它在打印发生时发生了变异，可能是回调。

console.log(responseJson.data) 
const quotation = <FinBaseModel>(responseJson.data);
callback(quotation);

【讨论】：

你是对的！我看错了地方。我将对象绑定到 html 中的另一个组件，并且在该组件中，对象发生了变异。

【参考方案4】：

您可以这样做，而不是使用 JSON.parse：

this.http.get('/quotation/' + quotationId)
    .map(response=> response.json())
    .subscribe((responseData) => 
         console.log(responseData);
    );