在數組中反應計數對象屬性

我正在通過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: Syntax for calling setState in Switch Return

但它不適合我。我試圖movieCount的狀態，只要切換到3這樣的：

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

，但它不工作too.and我在互聯網上研究這個東西的JavaScript文件和論壇英寸不僅僅是反應。但我什麼都做不了。我知道這很簡單。

因此，如何根據數據類型對數組中的對象進行計數？

來源

2017-06-21 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> 
    );

來源

2017-06-21 10:36:53 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 
    } 
]

來源

2017-06-21 09:42:21 poohitan

在這段代碼中，數據參數是我的電影數組嗎？所以我不需要地圖功能？ – escalepion

是的，'data'是你在問題中發佈的數組。我編輯了答案。 – poohitan

謝謝你。我只是解決它： const countTypes = this.props.movies.filter（movie => movie.media_type === type）; const movieCounted = countTypes.length; – escalepion

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 }

來源

2017-06-21 09:52:30 manas

在數組中反應計數對象屬性

回答

相關問題