第５代血統表が作成できない：テーブル構造

[Maruse1006]

一行ずつデータが表示される

import React, { useEffect, useState } from 'react';
import { View, ScrollView, StyleSheet, Text } from 'react-native';
import axios from 'axios';
import { Table, Row, Rows } from 'react-native-table-component';

// Pedigreeデータの型を定義
type PedigreeData = {
  generation_1: string;
  generation_2: string;
  generation_3: string;
  generation_4: string;
  generation_5: string;
};

const PedigreeTable = () => {
  const [pedigreeData, setPedigreeData] = useState<PedigreeData[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('http://192.168.3.160:8000/api'); // サーバーのURLを設定
        setPedigreeData(response.data);
        setError(null); // エラーをリセット
      } catch (error) {
        console.error('Error fetching data:', error);
        setError('データの取得に失敗しました。再度お試しください。');
      }
    };
    fetchData();
  }, []);

  const tableHead = ['Generation 1', 'Generation 2', 'Generation 3', 'Generation 4', 'Generation 5'];
  const tableData = pedigreeData.map((row) => [
    row.generation_1,
    row.generation_2,
    row.generation_3,
    row.generation_4,
    row.generation_5,
  ]);

  return (
    <View style={styles.container}>
      {error ? (
        <Text style={styles.errorText}>{error}</Text>
      ) : (
        <ScrollView horizontal>
          <View>
            <Table borderStyle={{ borderWidth: 1, borderColor: '#ccc' }}>
              <Row data={tableHead} style={styles.head} textStyle={styles.headText} />
              <Rows data={tableData} textStyle={styles.text} />
            </Table>
          </View>
        </ScrollView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 16, paddingTop: 30, backgroundColor: '#fff', flex: 1 },
  head: { height: 50, backgroundColor: '#f1f8ff' },
  headText: { fontWeight: 'bold', textAlign: 'center', color: '#333' },
  text: { margin: 6, textAlign: 'center', color: '#333' },
  errorText: { color: 'red', textAlign: 'center', marginTop: 20 },
});

export default PedigreeTable;

[Maruse1006]

import React, { useState } from "react";

// サンプルデータ
const originalData = [

    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Old Trieste  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "A.P. Indy  1989 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Seattle Slew  1974 黒鹿毛",
      "generation_5": "Bold Reasoning"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Old Trieste  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "A.P. Indy  1989 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Seattle Slew  1974 黒鹿毛",
      "generation_5": "My Charmer"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Old Trieste  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "A.P. Indy  1989 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Weekend Surprise  1980 鹿毛",
      "generation_5": "Secretariat"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Old Trieste  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "A.P. Indy  1989 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Weekend Surprise  1980 鹿毛",
      "generation_5": "Lassie Dear"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Old Trieste  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "Lovlier Linda  1980 栗毛  [  血統  ][  産駒  ]",
      "generation_4": "Vigors  1973 芦毛",
      "generation_5": "Grey Dawn"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Old Trieste  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "Lovlier Linda  1980 栗毛  [  血統  ][  産駒  ]",
      "generation_4": "Vigors  1973 芦毛",
      "generation_5": "Relifordie"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Old Trieste  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "Lovlier Linda  1980 栗毛  [  血統  ][  産駒  ]",
      "generation_4": "Linda Summers  1967 鹿毛",
      "generation_5": "Crozier"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Old Trieste  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "Lovlier Linda  1980 栗毛  [  血統  ][  産駒  ]",
      "generation_4": "Linda Summers  1967 鹿毛",
      "generation_5": "Queenly Gift"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Sweet Minister  1997 鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "The Prime Minister  1987 鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Deputy Minister  1979 黒鹿毛",
      "generation_5": "Vice Regent"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Sweet Minister  1997 鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "The Prime Minister  1987 鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Deputy Minister  1979 黒鹿毛",
      "generation_5": "Mint Copy"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Sweet Minister  1997 鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "The Prime Minister  1987 鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Stick to Beauty  1973 黒鹿毛",
      "generation_5": "Illustrious"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Sweet Minister  1997 鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "The Prime Minister  1987 鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Stick to Beauty  1973 黒鹿毛",
      "generation_5": "Hail to Beauty"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Sweet Minister  1997 鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "Sweet Blue  1985 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Hurry Up Blue  1977 鹿毛",
      "generation_5": "Mr. Leader"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Sweet Minister  1997 鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "Sweet Blue  1985 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Hurry Up Blue  1977 鹿毛",
      "generation_5": "Blue Baroness"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Sweet Minister  1997 鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "Sweet Blue  1985 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Sugar Gold  1980 黒鹿毛",
      "generation_5": "Mr. Prospector"
    },
    {
      "generation_1": "シニスターミニスター  Sinister Minister(米)  2003 鹿毛  [  血統  ][  産駒  ]  Seattle Slew系",
      "generation_2": "Sweet Minister  1997 鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "Sweet Blue  1985 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Sugar Gold  1980 黒鹿毛",
      "generation_5": "Miss Ironside"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "マンハッタンカフェ  1998 青鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "サンデーサイレンス  Sunday Silence(米)  1986 青鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Halo  1969 黒鹿毛",
      "generation_5": "Hail to Reason"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "マンハッタンカフェ  1998 青鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "サンデーサイレンス  Sunday Silence(米)  1986 青鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Halo  1969 黒鹿毛",
      "generation_5": "Cosmah"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "マンハッタンカフェ  1998 青鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "サンデーサイレンス  Sunday Silence(米)  1986 青鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Wishing Well  1975 鹿毛",
      "generation_5": "Understanding"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "マンハッタンカフェ  1998 青鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "サンデーサイレンス  Sunday Silence(米)  1986 青鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Wishing Well  1975 鹿毛",
      "generation_5": "Mountain Flower"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "マンハッタンカフェ  1998 青鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "サトルチェンジ  Subtle Change(愛)  1988 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Law Society  1982 黒鹿毛",
      "generation_5": "Alleged"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "マンハッタンカフェ  1998 青鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "サトルチェンジ  Subtle Change(愛)  1988 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Law Society  1982 黒鹿毛",
      "generation_5": "Bold Bikini"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "マンハッタンカフェ  1998 青鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "サトルチェンジ  Subtle Change(愛)  1988 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Santa Luciana  1973 黒鹿毛",
      "generation_5": "Luciano"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "マンハッタンカフェ  1998 青鹿毛  [  血統  ][  産駒  ]",
      "generation_3": "サトルチェンジ  Subtle Change(愛)
  1988 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Santa Luciana  1973 黒鹿毛",
      "generation_5": "Suleika"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "カフェピノコ  2000 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "ジェイドロバリー  Jade Robbery(米)  1987 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Mr. Prospector  1970 鹿毛",
      "generation_5": "Raise a Native"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "カフェピノコ  2000 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "ジェイドロバリー  Jade Robbery(米)  1987 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Mr. Prospector  1970 鹿毛",
      "generation_5": "Gold Digger"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "カフェピノコ  2000 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "ジェイドロバリー  Jade Robbery(米)  1987 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Number  1979 鹿毛",
      "generation_5": "Nijinsky"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "カフェピノコ  2000 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "ジェイドロバリー  Jade Robbery(米)  1987 黒鹿毛  [  血統  ][  産駒  ]",
      "generation_4": "Number  1979 鹿毛",
      "generation_5": "Special"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "カフェピノコ  2000 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "ピノシェット  Pinochet(米)  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_4": "Storm Cat  1983 黒鹿毛",
      "generation_5": "Storm Bird"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "カフェピノコ  2000 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "ピノシェット  Pinochet(米)  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_4": "Storm Cat  1983 黒鹿毛",
      "generation_5": "Terlingua"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "カフェピノコ  2000 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "ピノシェット  Pinochet(米)  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_4": "ピンクタートル  1988 栗毛",
      "generation_5": "Blushing Groom"
    },
    {
      "generation_1": "マキシムカフェ  2007 黒鹿毛  [  血統  ][  産駒  ]  FNo.[1-l]",
      "generation_2": "カフェピノコ  2000 栗毛  [  血統  ][  産駒  ]",
      "generation_3": "ピノシェット  Pinochet(米)  1995 栗毛  [  血統  ][  産駒  ]",
      "generation_4": "ピンクタートル  1988 栗毛",
      "generation_5": "Turtle Cove"
    }

];

// データをツリー構造に変換する関数
const formatData = (data) => {
  const result = {};

  data.forEach((entry) => {
    const { generation_1, generation_2, generation_3, generation_4, generation_5 } = entry;

    if (!result[generation_1]) result[generation_1] = {};
    if (!result[generation_1][generation_2]) result[generation_1][generation_2] = {};
    if (!result[generation_1][generation_2][generation_3]) result[generation_1][generation_2][generation_3] = {};
    if (!result[generation_1][generation_2][generation_3][generation_4]) {
      result[generation_1][generation_2][generation_3][generation_4] = [];
    }

    result[generation_1][generation_2][generation_3][generation_4].push(generation_5);
  });

  return result;
};

// 変換されたデータ
const treeData = formatData(originalData);

// 再帰的なノードコンポーネント
const TreeNode = ({ label, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div style={{ marginLeft: 20 }}>
      <div onClick={() => setIsOpen(!isOpen)} style={{ cursor: "pointer" }}>
        {isOpen ? "▼" : "▶"} {label}
      </div>
      {isOpen && (
        <div style={{ marginLeft: 20 }}>
          {children}
        </div>
      )}
    </div>
  );
};

// ツリーを構築するコンポーネント
const PedigreeTree = ({ data }) => {
  const renderTree = (node) => {
    return Object.keys(node).map((key) => {
      if (typeof node[key] === "object" && node[key] !== null) {
        return (
          <TreeNode key={key} label={key}>
            {renderTree(node[key])}
          </TreeNode>
        );
      } else {
        return <TreeNode key={key} label={node[key]} />;
      }
    });
  };

  return <div>{renderTree(data)}</div>;
};

// メインコンポーネント
const App = () => {
  return (
    <div style={{ padding: 20 }}>
      <h1>Pedigree Tree Structure</h1>
      <PedigreeTree data={treeData} />
    </div>
  );
};

export default App;

木構造