Javascript 获取对象数组，然后在我的组件中显示它

我试图显示一组对象

这就是我进入组件的方式

getFiles(){
    this.fileService.getFileList().subscribe(res => {
      this.files = res;
      console.log(this.files);
    })
}

为我效劳

getFileList() {
 return this.http.get(`http://localhost:4001/files`)
}

此文件的输出为：

> {secret: Array(2)} secret: Array(2) 0: files: (2) ["file1.pdf",
> "file2.pdf"]
> __proto__: Object 1: {pass: "88VpGQAtNB"} length: 2
> __proto__: Array(0)
> __proto__: Object

JSON.stringify为我提供输出

stringify gave me {"secret":[{"files":["46544556_2.pdf","org_46544556_2.pdf"]},{"pass":"hoc1WpNj63"}]}

如何遍历这个对象数组

<li *ngFor="let file of files" >
{{file}}
</li

---

您需要使用

this.files

对象中的文件数组。 您遇到的错误是因为您正在使用

*ngFor

中的和对象

this.files

，而您需要使用对象中的files属性，该对象是一个列表，因此按以下方式更改html将起作用

<ul *ngIf="files">
    <li *ngFor="let file of files.secret.files" >
</ul>

然后，您可以执行以下操作：

 getFiles(){
    this.fileService.getFileList().subscribe(res => {
      this.files = res.secret.files; // get files from res
      console.log(this.files);
    })
    }

在你的html中

<ul>
    <li *ngFor="let file of files" >
</ul>

您需要使用

此.files

对象中的文件数组。 您遇到的错误是因为您正在使用

*ngFor

中的和对象

this.files

，而您需要使用对象中的files属性，该对象是一个列表，因此按以下方式更改html将起作用

<ul *ngIf="files">
    <li *ngFor="let file of files.secret.files" >
</ul>

然后，您可以执行以下操作：

 getFiles(){
    this.fileService.getFileList().subscribe(res => {
      this.files = res.secret.files; // get files from res
      console.log(this.files);
    })
    }

在你的html中

<ul>
    <li *ngFor="let file of files" >
</ul>

您需要更改组件中的方法

---

您需要更改组件中的方法。

您在响应中返回了一个数组。所以你需要使用类似

if (res.secret[0].files) {
   this.files = res.secret[0].files;
}

或者您可以更改来自服务器的响应

res.send({
secret: {
         files: [filesInDir],
         pass: [password]
        },
})

然后呢

this.files = res.secret.files;

---

您在响应中返回了一个数组。所以你需要使用类似

if (res.secret[0].files) {
   this.files = res.secret[0].files;
}

或者您可以更改来自服务器的响应

res.send({
secret: {
         files: [filesInDir],
         pass: [password]
        },
})

然后呢

this.files = res.secret.files;

---

注意：仅当您的响应对象不大时才使用此方法

ts文件

  objKeys = Object.keys; //reference to be used in template
  arrJSON = '{"secret":[{"files":["46544556_2.pdf","org_46544556_2.pdf"]},{"pass":"hoc1WpNj63"}]}';
  arrObj = JSON.parse(this.arrJSON);

html

<div *ngFor="let key of objKeys(arrObj)">
  <div *ngFor="let secretKeyObj of arrObj[key]">
    <div *ngFor="let secKey of objKeys(secretKeyObj)">
      <div *ngIf="secKey === 'files'">
        <p *ngFor="let file of secretKeyObj[secKey]">{{ file }}</p>
      </div>
    </div>
  </div>
</div>

{{file}

注意：仅当您的响应对象不大时才使用此方法

ts文件

  objKeys = Object.keys; //reference to be used in template
  arrJSON = '{"secret":[{"files":["46544556_2.pdf","org_46544556_2.pdf"]},{"pass":"hoc1WpNj63"}]}';
  arrObj = JSON.parse(this.arrJSON);

html

<div *ngFor="let key of objKeys(arrObj)">
  <div *ngFor="let secretKeyObj of arrObj[key]">
    <div *ngFor="let secKey of objKeys(secretKeyObj)">
      <div *ngIf="secKey === 'files'">
        <p *ngFor="let file of secretKeyObj[secKey]">{{ file }}</p>
      </div>
    </div>
  </div>
</div>

{{file}

我是根据@Jazib-answer做的

正确的方法是：

 getFiles() {
    this.fileService.getFileList().subscribe(res => {
      this.files = res;
      this.test = this.files.secret.files
      console.log(this.files.secret.files);
    })
  }

和html

<ul>
    <li *ngFor="let file of test" >
</ul>

我是根据@Jazib-answer做的

正确的方法是：

 getFiles() {
    this.fileService.getFileList().subscribe(res => {
      this.files = res;
      this.test = this.files.secret.files
      console.log(this.files.secret.files);
    })
  }

和html

<ul>
    <li *ngFor="let file of test" >
</ul>

错误消息清楚地表明您的响应不是数组。你能试试

console.log（JOSN.stringify（this.files））

并在这里发布你的问题。@Manish stringify给了我{“secret”：[{“files”：[“46544556_2.pdf”，“org_46544556_2.pdf”]，{“pass”：“hoc1WpNj63”}根据您的响应结构，您可以相应地更新

this.files

的分配方式如下

this.files=res.secret[0]。files

。试试这个，它会解决您的问题。@Manish仍然错误：类型“Object”上不存在属性“secret”，您可以在stackblitz上创建一个可复制的错误演示。将能够更好地帮助错误消息清楚地表明您的响应不是数组。你能试试

console.log（JOSN.stringify（this.files））

并在这里发布你的问题。@Manish stringify给了我{“secret”：[{“files”：[“46544556_2.pdf”，“org_46544556_2.pdf”]，{“pass”：“hoc1WpNj63”}根据您的响应结构，您可以相应地更新

this.files

的分配方式如下

this.files=res.secret[0]。files

。试试这个，它会解决您的问题。@Manish仍然错误：类型“Object”上不存在属性“secret”，您可以在stackblitz上创建一个可复制的错误演示。将能够帮助betterGot errorL属性“文件”在类型“Object”上不存在Get errorL属性“文件”在类型“Object”上不存在Get ERROR:FileListComponent.html:4错误类型错误：无法读取Object.eval上未定义的属性“文件”[作为updateDirectives]@MarcinDomorozki这是因为html是在api返回任何响应之前呈现的，只需在容器上添加一个

*ngIf=“files”

。我已经更新了我的答案检查出来没有错误，但仍然没有。我做了JSON.stringify，这里是输出{“secret”：[{“files”：[“46544556_2.pdf”，“org_46544556_2.pdf”]}，{“pass”：“hoc1WpNj63”}]}@MarcinDomorozki没有必要做JSON.stringify。我错过了你的文件数组在秘密属性中，所以我更新了我的答案。在第二种解决方案中，您也不需要

*ngIf

，我尝试了类似的方法，但我不知道为什么类型“Object”上不存在属性“secret”。。它是！hmmGot erro:FileListComponent.html:4错误类型错误：无法读取Object.eval[as updateDirectives]@MarcinDomorozki处未定义的属性“files”，这是因为html在api返回任何响应之前呈现，只需在容器上添加一个

*ngIf=“files”

。我已经更新了我的答案检查出来没有错误，但仍然没有。我做了JSON.stringify，这里是输出{“secret”：[{“files”：[“46544556_2.pdf”，“org_46544556_2.pdf”]}，{“pass”：“hoc1WpNj63”}]}@MarcinDomorozki没有必要做JSON.stringify。我错过了你的文件数组在秘密属性中，所以我更新了我的答案。在第二种解决方案中，您也不需要

*ngIf

，我尝试了类似的方法，但我不知道为什么类型“Object”上不存在属性“secret”。。它是！hmmI尝试了第二种解决方案，但类型“Object”上不存在属性“secret”。我尝试了第二种解决方案，但类型“Object”上不存在属性“secret”。