it-swarm.com.ru

реагировать на количество объектов в массиве

Я получаю данные с помощью API. Это фильм, телешоу, личная база данных. Когда я ищу слово в окне поиска, оно возвращает связанный фильм, телешоу и имена людей в объектах, вложенных в массив. например, когда я ищу "бой":

    [
    0:{original_name: "쌈 마이웨이", id: 70813, media_type: "tv", name: "Fight My Way", vote_count: 5,…}

    1:{vote_average: 8.2, vote_count: 8057, id: 550, video: false, media_type: "movie", title: "Fight Club",…}

    2:{vote_average: 6.1, vote_count: 215, id: 345922, video: false, media_type: "movie",…}

    3:{original_name: "Fight", id: 46554, media_type: "tv", name: "Fight", vote_count: 0, vote_average: 0,…}

    4:{original_name: "The Good Fight", id: 69158, media_type: "tv", name: "The Good Fight", vote_count: 22,…}

    5:{vote_average: 0, vote_count: 0, id: 158301, video: false, media_type: "movie", title: "Fight",…}
   ]

есть и другие результаты, но я их сократил. Как видите, в каждом объекте есть свойства media_type. Есть 3 типа медиа, которые вы можете понять (фильм, телевидение, человек). Я хочу посчитать каждый тип.

на самом деле; Я хочу то же самое в ссылке, я думаю: React: Синтаксис для вызова setState в Switch Return

но это не работает для меня. Я попытался просто изменить состояние movieCount на 3 следующим образом:

countType() {
        this.props.movies.map(movie => {
            return() => {
            if(movie.media_type === 'movie') {
                this.setState({ movieCount: 3});
                console.log(this.state);
            }
            }
        });
    }

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

итак, как я могу считать объекты в массиве в соответствии с их типами свойств?

4
escalepion

хорошо, я нашел решение. спасибо poohitan за ответ. я решил это через его ответ. 

countType(type) {
        const countTypes = this.props.movies.filter(movie => movie.media_type === type);
        return countTypes.length;
    }

и в то время как я рендерил свои телевизионные результаты, я просто вызываю метод выше с типом. например: 

return ( 
    <div> 
      movie count: {this.countType('movie')} 
      tv show count: {this.countType('tv')} 
    </div> 
    );
0
escalepion

Предполагая, что данные, которые вы извлекаете из API, хранятся в переменной data, вы можете попробовать следующий код, чтобы найти счетчик типа movie в вашем массиве данных:

const movies = data.filter(item => item.media_type === 'movie')),
  moviesCount = movies.length;

Вы также можете динамически рассчитывать количество каждого media_type в вашем массиве данных:

const mediaTypes = data
    .map(dataItem => dataItem.media_type) // get all media types
    .filter((mediaType, index, array) => array.indexOf(mediaType) === index), // filter out duplicates

  counts = mediaTypes
    .map(mediaType => ({
      type: mediaType,
      count: data.filter(item => item.media_type === mediaType).length
    }));

Тогда counts будет примерно таким:

[
  {
    "type": "tv",
    "count": 3
  },
  {
    "type": "movie",
    "count": 3
  }
]
3
poohitan
var data = [
    { original_name: "쌈 마이웨이", id: 70813, media_type: "tv", name: "Fight My Way", vote_count: 5 },

    { vote_average: 8.2, vote_count: 8057, id: 550, video: false, media_type: "movie", title: "Fight Club" },

    { vote_average: 6.1, vote_count: 215, id: 345922, video: false, media_type: "movie" },

    { original_name: "Fight", id: 46554, media_type: "tv", name: "Fight", vote_count: 0, vote_average: 0 },

    { original_name: "The Good Fight", id: 69158, media_type: "tv", name: "The Good Fight", vote_count: 22 },

    { vote_average: 0, vote_count: 0, id: 158301, video: false, media_type: "movie", title: "Fight" },
]

this.types = {};

data.forEach((d) => {
    if (!this.types[d["media_type"]]) {
        this.types[d["media_type"]] = 1;
    } else {
        this.types[d["media_type"]] += 1;
    }
})

console.log(this.types);
// you will get answer { tv: 3, movie: 3 }
0
manas