Как соотнести индекс массива со свойством объекта?

Question

[ghost3ds]

Всем привет. На бэкэнде хранится массив с объектами

[
{
"id": 0,
"imageUrl": "https://thumb.tildacdn.com/tild3132-3935-4530-b137-396535386334/-/format/webp/amsterdam_pie_1.jpg",
"title": "Амстердамский пирог",
"sizes": [
300,
600,
900
],
"price": 295,
"category": 1,
"rating": 4
},

Подскажите пожалуйста, как соотнести свойства объекта "title", "price", "rating" с индексом массива list?

function Sort() {
  const { selectedSort, setSelectedSort } = useContext(Context);
  const [openPopup, setOpenPopup] = useState(false);
  const list = ['По популярности', 'По цене', 'По названию'];
  const onClickSort = (i) => {
    setSelectedSort(i);
    setOpenPopup(false);
  };

Это нужно для сортировки элементов на странице.



Запрос выглядит так:

fetch(
      `https://636f5291f2ed5cb047daa480.mockapi.io/items?${
        active > 0 ? `category=${active}` : ''
      }&sortBy=${selectedSort}&order=asc`,
    )

Спасибо.

Answer 1

[historydev]

const list = new Map([
	['rating', 'По популярности'],
  ['price', 'По цене'],
  ['title', 'По названию'],
]);

const onClickSort = (item) => {
  setSelectedSort(list.get(filter[0]));
  setOpenPopup(false);
}

onClickSort('rating');

{[...list].map(item => (
              <li
                key={i}
                onClick={() => onClickSort(item[0])}
                className={selectedSort === i ? 'activeSort' : ''}
              >
                {value}
              </li>
            ))}

Comments

[ghost3ds]

Спасибо за ответ!
Вижу, что используя метод forEach возвращается свойство и значение объекта. Но я не пойму, как это всё прикрутить в fetch, чтобы работала фильтрация? В selectedSort у меня хранится индекс массива list. Как объяснить браузеру, чтобы он понял, что при выборе типа сортировки "по цене" в параметр sortBy передавалось свойство "price" с бэкэнда, а при выборе типа сортировки "по названию" передавалось свойство "title"?

[historydev]

ghost3ds, звучит как какой-то бред, зачем вам эти индексы? Обращайтесь по ключу. Покажите что приходит с сервера и из чего состоит ваш фильт, я покажу как нужно было сделать. Объект с бэка и объект фильтра

[historydev]

ghost3ds, поправил ответ, не используйте индекс в html, передайте нужный фильтр

[ghost3ds]

В компоненте Home находится фильтр:

const Home = () => {
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const { active, setActive, selectedSort, setSelectedSort } = useContext(Context);
  useEffect(() => {
    setIsLoading(true);
    fetch(
      `https://636f5291f2ed5cb047daa480.mockapi.io/items?${
        active > 0 ? `category=${active}` : ''
      }&sortBy=${selectedSort}&order=asc`,
    )
      .then((res) => res.json())
      .then((arr) => {
        setItems(arr);
        setIsLoading(false);
      });
  }, [active, selectedSort]);
  window.scrollTo(0, 0);

Компонент Sort, отвечающий за сортировку элементов:

function Sort() {
  const { selectedSort, setSelectedSort } = useContext(Context);
  const [openPopup, setOpenPopup] = useState(false);
  const list = ['По популярности', 'По цене', 'По названию'];
  const onClickSort = (i) => {
    setSelectedSort(i);
    setOpenPopup(false);
  };
  return (
    <div className="nav__sort">
      <IconContext.Provider
        value={{
          size: '16px',
          style: { verticalAlign: 'middle' },
          className: 'react-icon',
        }}
      >
        <RiArrowDownSFill />
      </IconContext.Provider>

      <span onClick={() => setOpenPopup(!openPopup)} className="activeSort">
        {list[selectedSort]}
      </span>

      {openPopup && (
        <div className="nav__sort__popup">
          <ul>
            {list.map((value, i) => (
              <li
                key={i}
                onClick={() => onClickSort(i)}
                className={selectedSort === i ? 'activeSort' : ''}
              >
                {value}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

Объекты на бэке:

[
{
"id": 0,
"imageUrl": "https://thumb.tildacdn.com/tild3132-3935-4530-b137-396535386334/-/format/webp/amsterdam_pie_1.jpg",
"title": "Амстердамский пирог",
"sizes": [
300,
600,
900
],
"price": 295,
"category": 1,
"rating": 4
},
{
"id": 1,
"imageUrl": "https://thumb.tildacdn.com/tild3862-3735-4463-b961-353539376137/-/resize/720x/-/format/webp/siberian_russian_pie.jpg",
"title": "Сибирский пирог",
"sizes": [
300,
600,
900
],
"price": 315,
"category": 5,
"rating": 2
}
]

[ghost3ds]

Запросы при выборе типа сортировки

[historydev]

ghost3ds, поправил ответ,

&sortBy=${selectedSort}

сюда нужны rating, title и т.д. да?

[ghost3ds]

Владимир, Да, верно. При клике на тип сортировки в selectedSort записывается выбранное значение

[ghost3ds]

Что-то я накрутил, теперь вообще не рендерится компонент сортировки) В любом случае большое вам спасибо, общую мысль с ключем, кажется, уловил.

[historydev]

ghost3ds, покажите

[historydev]

ghost3ds, замените:

{value} => {item[1]}

[ghost3ds]

Владимир,