Javascript 如何使用ngFor迭代JSON嵌套对象

我有一个GET方法，它在route

localhost:3000/documents

[{
"id": "5b48bffc644fca001419769c",
"names": [{
        "name": "bob"
    },
    {
        "name": "stan"
    }
],
"cities": [{
        "city": "London"
    },
    {
        "city": "Madrid"
    }
]
}]

我想连接所有的名字和城市，并在HTML标签中显示它们

<p> id </p>
<p> concatenated names here </>
<p> concatenated cities here </>

及以下服务：

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';

import {Document} from '../document/document.model';

@Injectable({providedIn: 'root'})
export class DocumentService {

  private urlDocuments = 'localhost:3000/documents';

  constructor(private http: HttpClient) {
    }

  getDocuments() {
      return this.http.get<Document[]>(this.urlDocuments);
  }
}

---

我有解决方案，但你需要修改你的对象

您必须覆盖模型中城市和名称的toString方法：

test= [{
    "id": "5b48bffc644fca001419769c",
    "names": [{
      "name": "bob",
      toString: function(){return this.name;}
    },
      {
        "name": "stan",
        toString: function(){return this.name;}
      }
    ],
    "cities": [{
      "city": "London",
      toString: function(){return this.city;}

    },
      {
        "city": "Madrid",
        toString: function(){return this.city;}

      }
    ]
  }];

HTML部分将如下所示：

<div *ngFor="let t of test">
  <p> {{t.id}}</p>
  <p> {{t.names.join(",")}}</p>
  <p> {{t.cities.join(",")}} </p>
</div>

---

假设您的

文档

数据从服务器上没有问题，然后尝试下面的

HTML

代码：

 <div *ngFor="let d of documents">
  <p>Id: {{d.id}}</p>
  <p>Names: <span *ngFor="let dd of d.names">{{dd.name}},</span></p>
  <p>Cities: <span *ngFor="let dd of d.cities">{{dd.city}},</span></p>
</div>

Id:{d.Id}

名称：{{dd.name}}

城市：{dd.city}

您只需使用a来迭代文档，然后使用两个s来迭代

名称和
城市，如下所示（）：

ts：

  documents = [{
    "id": "5b48bffc644fca001419769c",
    "names": [{"name": "bob"},{"name": "stan"}],
    "cities": [{"city": "London"},{"city": "Madrid"}]
  },{
    "id": "5b48bffc644fca001419769cde",
    "names": [{"name": "Jon"},{"name": "Doe"}],
    "cities": [{"city": "Barcelona"},{"city": "Saragoza"}]
  }
  ];

<div *ngFor="let doc of documents; let last = last"> <!-- iterate over all documents, let last = last is optional -->
    <p>Id: {{doc.id}}</p>
     <!-- iterate over all names (n) for every document (doc) -->
    <p>Names: <span *ngFor="let n of doc.names; last as lastName">{{n.name}}{{lastName ? '': ','}} </span></p>
     <!-- iterate over all cities (c) for every document (doc) -->
    <p>Cities: <span *ngFor="let c of doc.cities; last as lastCity">{{c.city}}{{lastCity ? '': ','}} </span></p>
     <!-- optional , this will add a separator between documents-->
    <hr *ngIf="!last"/>
</div>

html：

  documents = [{
    "id": "5b48bffc644fca001419769c",
    "names": [{"name": "bob"},{"name": "stan"}],
    "cities": [{"city": "London"},{"city": "Madrid"}]
  },{
    "id": "5b48bffc644fca001419769cde",
    "names": [{"name": "Jon"},{"name": "Doe"}],
    "cities": [{"city": "Barcelona"},{"city": "Saragoza"}]
  }
  ];

<div *ngFor="let doc of documents; let last = last"> <!-- iterate over all documents, let last = last is optional -->
    <p>Id: {{doc.id}}</p>
     <!-- iterate over all names (n) for every document (doc) -->
    <p>Names: <span *ngFor="let n of doc.names; last as lastName">{{n.name}}{{lastName ? '': ','}} </span></p>
     <!-- iterate over all cities (c) for every document (doc) -->
    <p>Cities: <span *ngFor="let c of doc.cities; last as lastCity">{{c.city}}{{lastCity ? '': ','}} </span></p>
     <!-- optional , this will add a separator between documents-->
    <hr *ngIf="!last"/>
</div>


Id:{{doc.Id}

姓名：{{n.name}{{lastName？''：'，'}}

城市：{{c.city}{{lastCity？''：'，'}}



输出：

  documents = [{
    "id": "5b48bffc644fca001419769c",
    "names": [{"name": "bob"},{"name": "stan"}],
    "cities": [{"city": "London"},{"city": "Madrid"}]
  },{
    "id": "5b48bffc644fca001419769cde",
    "names": [{"name": "Jon"},{"name": "Doe"}],
    "cities": [{"city": "Barcelona"},{"city": "Saragoza"}]
  }
  ];

<div *ngFor="let doc of documents; let last = last"> <!-- iterate over all documents, let last = last is optional -->
    <p>Id: {{doc.id}}</p>
     <!-- iterate over all names (n) for every document (doc) -->
    <p>Names: <span *ngFor="let n of doc.names; last as lastName">{{n.name}}{{lastName ? '': ','}} </span></p>
     <!-- iterate over all cities (c) for every document (doc) -->
    <p>Cities: <span *ngFor="let c of doc.cities; last as lastCity">{{c.city}}{{lastCity ? '': ','}} </span></p>
     <!-- optional , this will add a separator between documents-->
    <hr *ngIf="!last"/>
</div>

是
名称
和
城市
中的对象，比如说
{“name”：“bob”}
和
{“city”：“Madrid”}
中的对象，目的是成为
文档
？我的意思是JSON与它下面的代码有什么关系？如果可能的话，编辑帖子并澄清一下。文档模型是：id:String，name:[name:String]，cities:[city:String]我不想接触API，我是一个有棱角的人。有可能在角度方面做吗？是的，正如我之前写的，你可以用两种方式添加它。收到响应或添加到模型后。您可以对所有对象迭代并添加此方法elements@RicardoMartin我只是好奇。。。您最终是如何修改API响应以添加
toString
函数的？@lealcelderio convert to model where has toString method此解决方案将在最后一个元素中添加逗号。输出看起来像名字：鲍勃，斯坦，城市：伦敦，马德里，