0
votes

Comment analyser dynamiquement les données JSON à l'aide de ReactJS

J'ai une obligation de déterminer une approche standard générique pour lire les données JSON (doit être en mesure de lire n'importe quelle structure JSON) et d'afficher la page ReactJS. Je sais que si nous connaissons la structure JSON, nous pouvons le traverser et afficher les données de la page en conséquence. Mais ici Structure JSON Doit être déterminé de manière dynamique via le code et nous ne devrions pas coder spécifiquement pour chaque structure JSON.

Par exemple, j'ai donné des fichiers Sample1.json et Sample2.json ci-dessous. Mon programme devrait pouvoir analyser Sample1.json si je l'utilise et affiche eux sur la page. Si j'utilise Sample2.json, il devrait toujours pouvoir les analyser et afficher les données de manière dynamique. Nous ne devrions pas avoir code spécifiquement comme archive_header.tracking_id ou stock_ledger_sales_key.ke.version_number ... etc. p>

Quelqu'un peut-il me permettre de gérer ce scénario? p>

Sample1.json strong > p>

{ "stock_ledger_sales_key": { "version_number": "12", "account_month_number": "01", "account_year_number": "2016" }, "stock_ledger_sales_detail": { "mature_increase_mtd_percentage": "1.2", "mature_increase_stdt_percentage": "2.3", "mature_increase_ytd_percentage": "2" } }

reactjs

2 commentaires

Quelles informations voulez-vous afficher du JSON?

Je veux afficher toutes les informations de JSON. Par exemple, si j'utilise Sample1.json, je voudrais afficher tracking_id = 914553536-frm01-20163609140455-000000001, emplacement_number = 389234, Dept_Number: 28822, financier_from_item_number = 771, financier_to_item_number = 771

3 Réponses :

1
votes

Vous pouvez simplement itérer sur les clés récursives: xxx

0 commentaires

0
votes

Pour afficher les informations Comme vous l'avez dit, nous pouvons faire quelque chose comme ceci:

const jsonDOM = json => {
  return Object.keys(json).map(key => {
    return Object.keys(json[key]).map(child => {
      return (<div>
        <p>{child}</p>
        <p>{json[key][child]}</p>
        </div>
      );
    });
  });
};

return (<div>
  <h2>JSON 1</h2>
  {jsonDOM(json1)} 
  <h2>JSON 2</h2>
  {jsonDOM(json2)} 
  </div>
);

2 commentaires

Penseur, vraiment génial !!! Cela fonctionne vraiment bien. Merci pour votre réponse rapide...

Content d'avoir aidé :)

0
votes

Vous pouvez utiliser json.stringify code> et code> étiquette pour sortir n'importe quel Json que vous aimez.

p>



<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

0 commentaires