J'ai tableau JSON chargé dans l'APIComment puis-je supprimer des objets JSON indéfinis
Je les ai appelés à l'aide
categories.map((i,j) =>{
return (<Tab label={'' + i.Name} key={j}/>);
})
Il affiche comme la mode, la santé, non défini, non défini, non défini, depuis les nombres de 141 à 321 sont indéfinis.
Comment puis-je empêcher undefined d'imprimer dans la réponse? Je vous remercie.
Vous pouvez retourner conditionnellement il:
categories.map((i,j) =>{
return (i.svcName && <Tab label={'' + i.svcName} key={j}/>);
})
MISE À JOUR
React exemple:
const arr = [{
val: 1
},
{
val: 2
},
{
val: false
},
{
val: ''
},
{
noval: 'blahh'
},
{
val: 3
},
{
val: undefined
},
{
val: 4
},
]
const Tab = ({ value }) => <div className="tab">{value}</div>;
class App extends React.Component {
render() {
return(
<div>
{
arr.map((obj, i) => obj.val && <Tab value={obj.val} key={i} />)
}
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));.tab{
height: 50px;
width: 100px;
display:inline-block;
background-color: #333;
color:#fff;
text-align:center;
border: 1px solid #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>EDIT
Comme mentionné dans sa @ Chris réponse, mon approche exclura falsy values tels que null, undefined, "", 0, NaN etc.
Cela devrait être la réponse acceptée imo. – Chris
Vous devez d'abord vérifier si la valeur est définie pour chaque élément du tableau:
categories.map((i,j) =>{
return (i.svcName !== undefined && <Tab label={'' + i.svcName} key={j}/>);
});
Cette vérifie explicitement que svcName n'est pas undefined, mais null, chaîne vide ou toute autre valeur falsy passerait l'évaluation.
Si vous voulez vérifier les valeurs falsifiées, optez pour la suggestion de @ Sag1v.
oui, je l'ai fait vérifier la falsification que ce nom de propriété 'svcName' implique qu'il devrait contenir une chaîne (pas vide) et par l'exemple de l'OP je suppose qu'il veut rendre un onglet avec un titre dessus.donc pas de point sur le rendu des valeurs falsifiées. mais vous avez écrit une explication importante à ce sujet. je pense que je devrais l'ajouter sur ma réponse aussi bien –
Oui, il dit. TypeError: Impossible de lire la propriété 'props' de null – PremKumar
@ Sag1v, correct. Mais étant donné la question OP, j'ai pensé ajouter une réponse qui vérifie explicitement 'undefined' puisque vous avez déjà couvert les valeurs falsifiées. Les futurs lecteurs potentiels pourraient être à la recherche d'indéfini et non de falsification, d'où la raison pour laquelle j'ai posté ceci. – Chris
Si vous ne voulez pas le résultat de la fonction de carte comme [el, el, el, false, el, el] vous devez utiliser un filtre avant:
categories.filter(el => el.svcName !== undefined).map((i,j) =>{
return (<Tab label={'' + i.svcName} key={j}/>);
})
Bien que cela produise la sortie désirée, vous effectuez une double boucle sur le tableau, ce qui n'est probablement pas souhaitable. – Chris
Mais vous n'aurez pas un résultat de carte comme '[el, el, el, faux, el, el]' – Andrew
Vous allez retourner des valeurs falsifiées comme 'false' et des chaînes vides etc + vous faites une double itération –
Avec Array#Filter & Array#Map
categories.filter(i => i.svcName !== undefined).map((x,i) => <Tab label={'' + x.svcName} key={i}/>);
Vous allez retourner des valeurs falsifiées comme des chaînes vides etc + vous faites une double itération –
@ Sag1v. OK merci. Tu as raison. Mais je n'arrive toujours pas à comprendre pourquoi ma réponse est dépréciée? –
je ne sais pas, n'était pas moi de toute façon. –
Que voulez-vous imprimer à la place? Chaîne vide pour le nom ou pas d'onglet du tout? – Chris
Aucun onglet du tout. Juste la mode santé. – PremKumar
Quelqu'un a rabaissé toutes les réponses sans ajouter d'explication que ce soit ... agréable. – Chris