Как я могу отфильтровать данные JSON по номерам, выбранным в моих тегах выбора

Question

Допустим, у меня есть этот файл json:

[
  {
    "restaurantName":"name1",
    "address":"restaurant1 address",
    "lat":lat1,
    "long":long1,
    "ratings":[
       {
          "stars":4,
          "comment":"good"
       },
       {
          "stars":5,
          "comment":"excellent"
       }
     ]
  },
  {
    "restaurantName":"name2",
    "address":"restaurant2 address",
    "lat":lat2,
    "long":long2,
    "ratings":[
       {
          "stars":4,
          "comment":"good"
       },
       {
          "stars":3,
          "comment":"ok"
       }
     ]
  } 
]

И этот HTML-код:

<select id="s1">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select id="s2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<button type="button" id="btn">filter</button>

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

Answer 1

Прежде всего, я бы посоветовал проверить документы на Array.filter (...) и Array.reduce (...) .В приведенном ниже примере вы можете увидеть возможное решение вашей проблемы.

Вы можете рассчитать среднее значение ваших оценок, суммируя значения звездочек, используя Array.reduce (...) , после этого вы можете сравнить рассчитанное значение с выбранными значениями в вашем <select>, вот где приходит Array.filter (...) , короче говоря - эта функция вернет вам новыйМассив, содержащий элементы, которые удовлетворяют предопределенному условию (в нашем случае это avgRating >= minRating && avgRating <= maxRating;).

Самое короткое решение уже было предоставлено @Ele, в моем примере ниже представлен дополнительный Array.map (...) , что здесь не обязательно.Тем не менее, в случае, если вы спрашиваете, что он делает - эта дополнительная функция map вернет мне новый массив, содержащий только сами рейтинги, в случае restaurant1 это будет [4, 5]

const data = [{
    "restaurantName": "name1",
    "address": "restaurant1 address",
    "lat": 51.43434,
    "long": 51.43434,
    "ratings": [{
        "stars": 4,
        "comment": "good"
      },
      {
        "stars": 5,
        "comment": "excellent"
      }
    ]
  },
  {
    "restaurantName": "name2",
    "address": "restaurant2 address",
    "lat": 51.43434,
    "long": 51.43434,
    "ratings": [{
        "stars": 4,
        "comment": "good"
      },
      {
        "stars": 3,
        "comment": "ok"
      }
    ]
  }
];

document.getElementById('btn').addEventListener('click', () => {
  const filteredRestaurants = data.filter(entry => {
    const ratings = entry.ratings;
    const avgRating = ratings
      .map(rating => rating.stars)
      .reduce((prev, next) => {
        return prev + next;
      }, 0) / ratings.length;
    const minRating = document.getElementById('s1').value;
    const maxRating = document.getElementById('s2').value;

    return avgRating >= minRating && avgRating <= maxRating;
  });
  console.log(filteredRestaurants);
});

<select id="s1">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select id="s2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<button type="button" id="btn">filter</button>

Answer 2

Вы можете использовать функцию Array.reduce для суммирования значений звезд, функцию Array.filter, чтобы проверить интервал оценки from-to.

let data = [  {    "restaurantName":"name1",    "address":"restaurant1 address",    "lat":1,    "long":1,    "ratings":[       {          "stars":4,          "comment":"good"       },       {          "stars":5,          "comment":"excellent"       }     ]  },  {    "restaurantName":"name2",    "address":"restaurant2 address",    "lat":1,    "long":1,    "ratings":[       {          "stars":4,          "comment":"good"       },       {          "stars":3,          "comment":"ok"       }     ]  } ],
    ratingFrom = 3, // from s1 select
    ratingTo = 4, // from s2 select
    result = data.filter(d => {
      let avg = d.ratings.reduce((a, r) => a + r.stars, 0) / d.ratings.length;
      return avg >= ratingFrom && avg <= ratingTo;
    });

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }