如何将 JSON 条记录作为单个元素 [Angular] 推入空数组

Question

我最近开始研究 Angular。我正在为我的 Angular 应用程序创建一个过滤器。场景是，我有 100（比方说）用户及其 JSON 格式的个人详细信息。为此，我正在使用 JSONPlaceholder，假休息 API。我正在使用 fetch() 方法获取所有这些用户记录，所有这些记录都必须位于我的本地数组 usres=[]; 中。我想要这个，以便稍后我可以在卡片上显示这些用户，而且我想根据姓名、位置、技能等应用过滤器。我的问题是我无法将 push 值放入我的 users数组。我尝试从以下方面寻求帮助：

JSON arrays: w3school
How to convert JSON object to JavaScript array?

Here 就是我所说的整个 JSON。

我会自己过滤，请帮我填充 users=[]; 数组。从那里我可以负责。

这是代码。

card.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  ...
})
export class CardComponent implements OnInit {

  text='';

  users=[];

  filteredUsers=[];

  constructor() { }

  ngOnInit() {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(json => this.users.push(json))
  }

  SearchFunction(text) {
    this.filteredUsers=(this.users.filter(e => {
      return e.name.toLocaleLowerCase() === text.toLocaleLowerCase ||
      e.name.toLowerCase().indexOf(text.toLowerCase()) >= 0
    }));
    console.log(this.filteredUsers);
  }
}

但我认为这stackblitz会节省大家的时间和精力。请纠正我。

Answer 1

问题是您将数组推入数组。您应该 push 单个元素和 concat 数组。

应该是：

this.users = json;

或者：

this.users.concat(json);

或者：

this.users.push(...json); // Destructure the array first

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

此外，可能应该使用 Angular HttpClient 来获取数据。

Answer 2

get 请求正在返回一个数组。所以你正在将一个数组推入另一个数组。您可以将用户列表设置为等于 json 结果，或者您可以将每个元素推入数组："this.users.push(...json)"

如何将 JSON 条记录作为单个元素 [Angular] 推入空数组

How to push JSON records into an empty array as individual elements [Angular]

javascript

json

typescript

angular

jsonplaceholder