将 json 对象传播到可迭代对象中答案

【问题标题】：Spreading a json object into an iterable将 json 对象传播到可迭代对象中
【发布时间】：2022-01-03 15:47:22
【问题描述】：

在我的 Angular 服务脚本中（在 sn-p 之后），我通过 Django 从我的 MongoDB 数据库中接收到客户数据字典：

getConsumersMongodb(): Observable<any> {
    return this.httpClient.get(`${this.baseMongodbApiUrl}`);
}

返回的字典是这样的：

{
    "message": "Got all consumers' info successfully!",
    
    "consumers": {
        "id": 8, 
        "age": "51 - 60", 
        "gender": "Female"
        ...
    },
    
    "error": "Error!"
}

我只对消费者数据感兴趣，所以我在我的 Angular 组件 TypeScript 代码中解析它，如下所示：

ngOnInit(): void {

    this.dbService.getConsumersMongodb()
      .subscribe(responseData => {
        this.loadedConsumersDict = responseData;
        this.consumersInfo = this.loadedConsumersDict["consumers"]);
        console.log(this.consumersInfo);
      });
}

当然，在我的开发控制台中，我得到了这个：

{id: 8, age: '51 - 60', gender: 'Female', …}

到目前为止，一切都很好......

现在，我需要将这个 json 对象转换成一个可迭代对象，例如一个数组，这样我就可以遍历它的字段并将它们显示在我的 Angular html 模板中。

所以，我将代码修改为：

ngOnInit(): void {

    this.dbService.getConsumersMongodb()
      .subscribe(responseData => {
        this.loadedConsumersDict = responseData;
        this.consumersInfo = this.loadedConsumersDict["consumers"]);
        let temp = this.loadedConsumersDict["consumers"];
        this.loadedConsumersArray = Object.keys(temp).map(function (key) {
          return { [key]: temp[key] };
        });
        console.log(this.loadedConsumersArray);
      });
}

但这给了我以下信息：

{id: 8}
{age: '51 - 60'}
{gender: 'Female'}
...

这不是我想要的。如何将内容放入可迭代对象中，以便我可以简单地在我的 html 模板代码中使用以下 sn-p 来显示字段？

<li class="list-group-item" *ngFor="let consumer of loadedConsumersArray">
    <p><i>Id:</i> {{ consumer.id }}</p>
    <p><i>Gender:</i> {{ consumer.gender }}</p>
    <p><i>Age Group:</i> {{ consumer.age }}</p>
    ...

我已经走了很长的路来实现这一目标，但现在我很困惑，需要帮助。我将不胜感激。

编辑：

这是我在 Django 的 views.py 脚本中写的：

@csrf_exempt
@api_view(['GET', 'POST', 'DELETE'])
def handle_consumer(request):

    if request.method == 'GET':
        try:
            consumers = ConsumerModel.objects.all()
            consumers_serializer = ConsumerModelSerializer(consumers, many=True)
            # Fetch consumer data from MongoDB.
            print(consumers_serializer.data)
            # end fetch region
            response = {
                'message': "Got all consumers' info successfully!",
                'consumers': consumers_serializer.data[0],
                'error': "Error in GET try"
            }
            return JsonResponse(response, status=status.HTTP_200_OK)
        except:
            error = {
                'message': "Fail! Cannot get all consumers!",
                'consumers': "[]",
                'error': "Error in GET except"
            }
            return JsonResponse(error, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

print 语句打印如下：

[OrderedDict([('id', 8), ('age', '51 - 60'), ('gender', 'Female'), ...])]

因为它总是包含这个 Python 列表中的一项，所以我这样做：

consumers_serializer.data[0]

确保我得到的响应是这样的：

{'id': 8, 'age': '51 - 60', 'gender': 'Female', ...}

【问题讨论】：

有no such thing as a JSON-'object'
如果来自数据库的 JSON 是字典，则您无法将其转换为数组，并且由于字典中没有重复的键，因此这没有意义。你有来自数据库的多个 id 吗？你确定你的“字典”实际上不是一个字典数组，在这种情况下你不需要做更多的操作。
数据已经是你想要的格式了...为什么要转换成数组并在ngFor中使用呢？
你没有一个对象数组，只是一个唯一的对象。你可以使用KeyValue pipe来“拆分”并显示属性和值，但我不知道这是否是你要找的
您确定consumers 是一个对象，如果是，它如何承载多个消费者？

标签： javascript json django angular typescript

【解决方案1】：

consumers 在响应中是一个对象而不是一个数组。因此，您不需要将任何内容转换为数组，如果不需要，当然也不需要使用*ngFor。

只需确保consumersInfo 是公共属性，然后在您的模板中写入以下内容：

<li class="list-group-item">
    <p><i>Id:</i> {{ consumersInfo.id }}</p>
    <p><i>Gender:</i> {{ consumersInfo.gender }}</p>
    <p><i>Age Group:</i> {{ consumersInfo.age }}</p>
    ...

【讨论】：