كيفية عرض محتوى ملف JSON في React.js؟

طالب علم3 · 31 يوليو 2022

السلام عليكم ،

انا اتعلم حاليا ReactJs و احتاج مساعدتكم ، اريد ان اعرض البيانات من ملف Persons.json في جدول مكون من ثلاثة اعمدة ( treeview table,collapse) كما هو موضح في الصورة المرفقة.

كيف يمكنني استعراض البيانات من ملف Persons.json في الجدول كما في الصورة ارجو المساعدة

كود ملف App.js

import React, { Component } from "react";

import Persons from "./Persons";

export class App extends Component {
  render() {
    return (
      <>
        <div>
          <table border="2">
            <tbody>
              <tr>
                <th>Column1</th> <th>Column2</th> <th>Column3</th>
              </tr>
              {Persons.persons.map((item, i) => (
                <tr key={(i = "1")}>
                  <td>{item.name}</td> <td>{item.name}</td> <td>{item.name}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </>
    );
  }
}
export default App;

و هنا ملف بياناتات Persons.json

{
  "persons": [
    {
      "id": "1",
      "name": "Anna",
      "children": [
        {
          "id": "1.1",
          "name": "Mary",
          "children": [
            {
              "id": "1.1.1",
              "name": "Tim"
            },
            {
              "id": "1.1.2",
              "name": "Bob"
            }
          ]
        },
        {
          "id": "1.2",
          "name": "Max",
          "children": [
            {
              "id": "1.2.1",
              "name": "Mark"
            }
          ]
        }
      ]
    },
    {
      "id": "2",
      "name": "Jack",
      "children": [
        {
          "id": "2.1",
          "name": "Tia"
        },
        {
          "id": "2.2",
          "name": "Carla"
        }
      ]
    },
    {
      "id": "3",
      "name": "David",
      "children": [
        {
          "id": "3.1",
          "name": "Sara"
        },
        {
          "id": "3.2",
          "name": "Ralf"
        }
      ]
    }
  ]
}

تم التعديل في 31 يوليو 2022 بواسطة سامح أشرف
تنسيق السؤال

سامح أشرف · 31 يوليو 2022

يمكنك عمل مكون باسم Children على سبيل المثال وإستخدامه لعرض أبناء كل شخص:

const Children = ({ person }: any) => {
  if (person.children) {
    return (
      <details style={{ marginLeft: '24px' }}>
        <summary>{person.name}</summary>
        {person.children &&
          person.children.map((child: any) => <Children person={child} />)}
      </details>
    );
  }

  return <div style={{ marginLeft: '24px' }}>{person.name}</div>;
};

ما يقوم به المكون السابق هو عرض اسم الشخص والتحقق مما إذا كان لديه الخاصية children، وفي حالة وجود هذه الخاصية سوف يتم إضافة عنصر details (العنصر المسئول عن السهم الأسود لإغلاق وفتح العنصر)، وفي داخله نقوم بعرض مكون children لكل ابن كذلك

أيضًا ستحتاج إلى المرور على كل شخص في المصفوفة persons وعرض المعلومات في جدول:

const app = () => {
  
  return (
    <div>
      <table border="2">
        <tbody>
          <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
          </tr>
          <tr>
            {persons.map((item, i) => (
              <td key={i}>
                <Children person={item} />
              </td>
            ))}
          </tr>
        </tbody>
      </table>
    </div>
  );
}

كيفية عرض محتوى ملف JSON في React.js؟

السؤال

طالب علم3

1 جواب على هذا السؤال

Recommended Posts

سامح أشرف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية