Фильтровать API по его ключу - PullRequest
Новая
       6

Фильтровать API по его ключу

0 голосов
/ 21 апреля 2020

Эй, ребята, у вас есть JSON данные и API, пытающиеся выяснить, что такое API, чтобы фильтровать свою категорию, в настоящее время есть только «продукты питания и предметы». здесь данные. 

{
  "id": 1587428052314,
  "_id": "5e9e5599a3f3e540e9c6553c",
  "Title": "Home Cleaning Sanitiser Box",
  "Description": "This box has everything you need - right now!"
  "Phone": "021881821921",
  "Category": "food"
}

Вот API: localhost:4000/api/user-listing/

Могу ли я как-то отфильтровать его в моей .then цепочке обещаний? 

Axios.get("localhost:4000/api/user-listing")
  .then((res) => {
    // in here ?? this.setState({ listings: res.data });
  });

Приветствия

1 Ответ

0 голосов
/ 21 апреля 2020

Есть несколько способов сделать это, как вы и ожидали. Если вы ожидаете, что должна существовать одна конечная точка для извлечения всех данных с помощью "Category": "food", вы ничего не сможете с этим сделать с помощью инструментов внешнего интерфейса (на самом деле есть несколько способов, но они больше не исходят из внутреннего интерфейса).

Иллюстрация проблемы

Итак, мы предполагаем, что когда мы вызываем localhost:4000/api/user-listing/, мы получим массив объектов, который включает в себя несколько объектов с "Category": "food", тогда мы предполагаем, что мы получили следующие данные из выше конечной точки. 

[{
    "id": 1,
    "_id": "5e9e5599a3f3e540e9c6553c-1",
    "Title": "coke",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "drink"
  },
  {
    "id": 2,
    "_id": "5e9e5599a3f3e540e9c6553c-2",
    "Title": "salmon",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "food"
  },
  {
    "id": 3,
    "_id": "5e9e5599a3f3e540e9c6553c-3",
    "Title": "soda",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "drink"
  },
  {
    "id": 4,
    "_id": "5e9e5599a3f3e540e9c6553c-4",
    "Title": "rice",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "food"
  }
]

ПРИМЕЧАНИЕ: Я только что сделал этот пример массива данных для дополнительной иллюстрации. Вы должны заменить его на res.data в своем коде.

Фильтрация данных

Чтобы получить все данные с помощью "Category": "food", мы можем просто сделать следующее: 

const arrayOfData = [{
    "id": 1,
    "_id": "5e9e5599a3f3e540e9c6553c-1",
    "Title": "coke",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "drink"
  },
  {
    "id": 2,
    "_id": "5e9e5599a3f3e540e9c6553c-2",
    "Title": "salmon",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "food"
  },
  {
    "id": 3,
    "_id": "5e9e5599a3f3e540e9c6553c-3",
    "Title": "soda",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "drink"
  },
  {
    "id": 4,
    "_id": "5e9e5599a3f3e540e9c6553c-4",
    "Title": "rice",
    "Description": "This box has everything you need - right now!",
    "Phone": "021881821921",
    "Category": "food"
  }
]

const newArray = arrayOfData.filter(data => data.Category === "food")

console.log(newArray)

ОБНОВЛЕНИЕ

Итак, если вы обновите вопрос, хотите ли вы работать с вашими данными в .then, это будет что-то как это: 

Axios.get("localhost:4000/api/user-listing")
  .then((res) => {
    this.setState({
      listing: res.data.filter(data => data.Category === "food")
    })
  });
...