web-dev-qa-db-ja.com

配列内のcountオブジェクトのプロパティを反応させる

APIでデータをフェッチしています。映画、テレビ番組、人物データベースです。検索ボックスで単語を検索すると、関連する映画、テレビ番組、人物の名前が配列にネストされたオブジェクトで返されます。たとえば、「fight」を検索すると、次のようになります。

    [
    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：Switch ReturnでsetStateを呼び出すための構文

しかし、それは私にはうまくいきません。私はmovieCountの状態を次のように3に変更しようとしました：

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

しかし、それはあまりにも機能しません。私は、JavaScriptのドキュメントやフォーラムでインターネット上でこれについて調査しました。ただ反応するだけではありません。でも何もできませんでした。私はそれが簡単であることを知っています。

それでは、プロパティタイプに従って配列内のオブジェクトをどのようにカウントできますか？

javascriptarraysreactjsjavascript-objects
5
escalepion

わかりました、solitionを見つけました。回答をありがとうございます。私は彼の答えを通してそれを解決しました。

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

テレビの結果をレンダリングしている間、上記のメソッドをtypeで呼び出すだけです。例えば：

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
  }
]
5
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