web-dev-qa-db-fra.com

réagit compte les propriétés de l'objet dans un tableau

Je récupère les données par une API. C'est un film, une émission de télévision, une base de données de personnes. Lorsque je recherche un mot dans la zone de recherche, il renvoie le nom du film, de la série télévisée et des noms de personnes associés dans des objets imbriqués dans un tableau. par exemple quand je cherche "combat":

    [
    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",…}
   ]

il y a plus de résultats mais je les ai coupés. Comme vous pouvez le constater, il existe des propriétés media_type dans chaque objet. Il existe 3 types de supports que vous pouvez comprendre (film, télévision, personne). Je veux compter chaque type. 

réellement; Je veux la même chose dans le lien je suppose: React: Syntaxe pour appeler setState dans Switch Return

mais ça ne marche pas pour moi. J'ai essayé de changer simplement l'état de movieCount en 3 comme ceci: 

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

mais ça ne marche pas aussi. Et j'ai fait des recherches sur Internet dans la documentation javascript et les forums. pas à propos de juste réagir. mais je ne pouvais rien faire. Je sais que c'est simple.

alors, comment puis-je compter les objets d'un tableau en fonction de leurs types de propriétés? 

javascriptarraysreactjsjavascript-objects
4
escalepion

ok j'ai trouvé la solition. merci à poohitan pour sa réponse. je l'ai résolu par sa réponse. 

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

et pendant que je restitue mes résultats tv, j’appelle simplement la méthode ci-dessus avec type. par exemple: 

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

En supposant que les données extraites de l'API soient stockées dans la variable data, vous pouvez utiliser le code suivant pour rechercher le nombre de types de média movie dans votre tableau de données:

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

Vous pouvez également calculer dynamiquement le nombre de chaque media_type dans votre tableau de données:

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
    }));

Alors counts sera quelque chose comme ceci:

[
  {
    "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