Как сделать pu sh JSON записей в пустой массив как отдельные элементы [Angular] - PullRequest
Новая
       22

Как сделать pu sh JSON записей в пустой массив как отдельные элементы [Angular]

0 голосов
/ 15 января 2020

Я недавно начал работать над Angular. Я создаю фильтр для моего Angular приложения. Сценарий такой: у меня 100 (скажем) пользователей и их личные данные в формате JSON. Для этого я использую JSONPlaceholder, API ложного отдыха. Я использую метод fetch(), чтобы получить все эти пользовательские записи, и все эти записи должны находиться в моем локальном массиве usres=[];. Я хочу, чтобы позже я мог отображать этих пользователей на карточках, а также я хотел бы применить фильтр на основе имени, местоположения, навыков и т. Д. c. Моя проблема в том, что я не могу push значения в мой users массив. Я пытался получить помощь от:

  1. JSON массивов: w3school
  2. Как преобразовать JSON объект в JavaScript массив?
  3. Как поместить sh JSON объект в массив, используя javascript

Здесь - это все 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 сэкономит всем время и усилия. Пожалуйста, поправьте меня.

Ответы [ 2 ]

1 голос
/ 15 января 2020

Запрос на получение возвращает массив. Итак, вы помещаете массив в другой массив. Либо вы можете установить список пользователей равным вашему json результату, либо вы можете добавить sh каждый элемент в массив: "this.users.pu sh (... json)"

1 голос
/ 15 января 2020

Проблема в том, что вы помещаете массив в массив. Вы должны 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 для извлечения данных.

...