1
votes

Élément de rendu basé sur la valeur de clé de JSON

Disons que j'ai un fichier json,

import myJSON from 'file.json'

....
myJSON.map(({ page, title }) => (
   <h1 key={page}>{title}</h1>
))
....

Ici, vous voyez une clé order , lorsque je mappe ce fichier json, je veux rendre celui avec moins la valeur de order en premier. Par exemple,

[
    {"page":"about","title":"About","order":"0"},
    {"page":"another-test","title":"Another Test"},
    {"page":"how-to","title":"How To","order":"1"},
    {"page":"test-page","title":"Test page","order":"2"}
]

Comment puis-je utiliser la clé order et afficher celle avec la valeur order la moins élevée ou en ordre croissant commande?

javascript json next.js

4 commentaires

Utilisez .sort pour trier le tableau avant le rendu?

Si c'est tout le contenu de votre fichier json, je ne sais pas comment vous allez pouvoir l ' importer comme ça. En général, les importations impliquent le fichier source export quelque chose

@Taplar, il est probablement converti par webpack lors de l'importation dans un objet JS.

@evolutionxbox, oui, le tri a fait le travail, bravo!

3 Réponses :

4
votes

Vous pouvez les trier en fonction de leur ordre.

myJSON.sort((a, b) => parseInt(a.order) - parseInt(b.order))

myJSON.map(({ page, title }) => (
   <h1 key={page}>{title}</h1>
))

0 commentaires

2
votes

La solution de Rahul a un défaut! Toute solution orthodoxe à cela aura ce même défaut.

Que faire si la propriété "order" n'est pas définie comme dans l'enregistrement 2 dans myJSON?

  if ( !a.order ){
    return -1;
  }

Alors cette approche sera par défaut le cas 0 (valeurs égales). Il pensera que la valeur non définie et la valeur à laquelle elle la compare sont égales.

Voici un exemple:

   {"page":"about","title":"About","order":"100"},
   {"page":"another-test","title":"Another Test"},
   {"page":"test-page","title":"Test page","order":"10"},
   {"page":"how-to","title":"How To","order":"50"}

Les enregistrements qui sont avant le L'enregistrement avec le prop "order" non défini ne sera pas trié par rapport aux enregistrements suivants. Ainsi, les enregistrements 1 et 2 dans le json ci-dessus conserveront leur place et seuls les enregistrements 3 et 4 seront triés correctement l'un par rapport à l'autre et changeront de place. Le résultat sera:

let myJSON = [
   {"page":"about","title":"About","order":"100"},
   {"page":"another-test","title":"Another Test"},
   {"page":"how-to","title":"How To","order":"50"},
   {"page":"test-page","title":"Test page","order":"10"}
]

function myCompareFunc( a, b ) {
  // if a.order or b.order is undefined this is false
  if ( a.order < b.order ){
    return -1; 
  }
  // if a.order or b.order is undefined this is false
  if ( a.order > b.order ){
    return 1;
  }
  // will default to this
  return 0; 
}
myJSON.sort(myCompareFunc);

Ce n'est pas tout à fait un trieur n'est-ce pas?

Comment y remédier? Une façon est d'ajouter ceci au début de la fonction de comparaison:

{"page":"another-test","title":"Another Test"}

Cela triera tous les enregistrements avec un prop "order" non défini au début du tableau et ne se mêlera pas avec les enregistrements qui ont un accessoire "ordre" défini.

1 commentaires

Merci pour la mise en garde, mais j'ai déjà filtré le json s'il n'avait aucune commande du tout. Et je l'ai fait avec un si dans le rendu, cela semble plus simple.

0
votes

Cette structure pourrait être optimisée pour un accès plus rapide.

J'essaierais de la dénormaliser un peu et de créer quelque chose comme l'exemple ci-dessous. Cela vous permet d'utiliser Object.keys () pour obtenir rapidement tous les identifiants de page.

pageData.json

import pageData from '...'

const pageKeys = Object.keys(pageData);
const pagesThatHaveOrder = pageKeys.filter(key => !pageData[key].order)

La solution à la question initiale de savoir quelles pages avaient l'ordre serait

{
  "about": {
    "id": "about",
    "title": "About",
    "order":100
  },
  "another-test": {
    "id": "another-test",
    "title": "Another Test"
  }
}

4 commentaires

Je génère ce json lors de la construction, à chaque fois. Ce qui se passe en fait, c'est que je collecte des données yaml à partir de certains fichiers et la structure n'est pas importante ici.

Cela ne répond pas à la question. Pour critiquer ou demander des éclaircissements à un auteur, laissez un commentaire sous sa publication. - De l'avis

Merci pour les informations supplémentaires @Hasan. Si j'étais vous et qu'il n'y avait pas de contraintes d'ailleurs, j'optime qui génère json pour l'accès. J'ai mis à jour la réponse ci-dessus avec un code permettant de trouver les pages sans ordre dans cette structure. J'espère que c'est utile! 🙌

@alanionita, super, mais j'utilise en fait un if avant le rendu pour vérifier si order existe. Cela semble plus simple. Vous pouvez vérifier ici au repo