Comment rendre une table dynamic sans connaître les données? en utilisant HTML et JS
Par dynamic, je veux dire que je ne sais pas quelles sont les données renvoyées par la réponse ajax. J’ai réussi à renvoyer {name:"" value:""} pair pour un effet de levier.
échantillon de données:
[ [ { "name": "_id", "value": "5a32391133425e1f5436161b" }, { "name": "Issue", "value": "Splash Screen Animations" }, { "name": "Status", "value": "Done" }, { "name": "Comment", "value": "The animation must be the same as ios" } ], [ { "name": "_id", "value": "5a32391133425e1f5436161c" }, { "name": "Issue", "value": "Live Streaming Title and Image" }, { "name": "Status", "value": "Done" }, { "name": "Comment", "value": "asdasd" } ], ]
Alors, comment rendre ces données dans un modèle de table ou de guidon? . sachant que le nom doit figurer dans
- Comment afficher la clé et la valeur d’un object Json à l’aide d’un modèle de guidon?
- Le guidon ne remplit pas le tableau
- Chargement du modèle de guidon de manière asynchrone
- Comment accéder à cet object json à partir de handlebarsjs
- limiter les résultats de chacun dans handlebars.js
J’ai également réussi à séparer les données de réponse dans des tableaux distincts (en-têtes et données) afin que je puisse restituer le tableau comme suit.
{{#each headers}} {{this}} {{/each}} {{#each data}} {{#each this}} {{this}} {{/each}} {{/each}}
S’il vous plaît noter : que la réponse que je cherche n’est pas spécifique au guidon, html / js devrait être suffisant.
Vous ne nous avez pas montré à quoi ressemblent vos données séparées (en- headers et data ), mais il est tout à fait possible que vous obteniez le résultat souhaité en ajoutant simplement la référence .value manquante dans la sortie de votre cellule:
{{#each this}} {{this.value}} {{/each}}
Cette approche peut fonctionner, mais elle suppose certaines hypothèses sur la structure de vos données. Plus important encore, il suppose que chaque object de ligne a exactement les mêmes propriétés et que les objects de propriété sont toujours dans le même ordre (“_id”, “Issue”, “Status”, “Comment”).
Si vous êtes aussi confiant dans la cohérence de vos données, je ne me soucierais même pas de la séparation des données en en- headers et data . #each simplement les en-têtes de colonne du premier object de ligne, les #each , puis #each sur l’ensemble du tableau de données pour rendre le corps. Le modèle serait:
{{#each (lookup this 0)}} {{this.name}} {{/each}} {{#each this}} {{#each this}} {{this.value}} {{/each}} {{/each}}
La seule partie intéressante de ce modèle est l’utilisation de l’aide à la recherche . Ceci est utilisé pour nous obtenir uniquement le premier tableau de notre object de données – la première “ligne” – que nous utilisons pour renseigner nos en-têtes de colonnes.
Là encore, cela ne fonctionnera que si vos données sont structurées de sorte que chaque ligne comporte le même object colonnes et que ces objects soient dans le même ordre. Si vos données sont moins prévisibles, une solution plus complexe est requirejse. Je peux fournir cela si nécessaire.
J’ai créé un violon pour votre référence.