在数组中反应计数对象属性

我正在通过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

在数组中反应计数对象属性

回答

相关问题