मुझे यह तालिका प्रदर्शित करने की आवश्यकता है: तालिका प्रारूप

प्रतिक्रिया में इस तरह। मैंने एपीआई की तरह वस्तुओं की एक सरणी बनाई है

products: [
    {b: "brand1", N: "N1", M: "M1", B: "B1", S: "y1", O: "y1", A: "y1", D: "y1"},
    {b: "brand2", N: "N2", M: "M2", B: "B2", S: "y2", O: "y2", A: "y2", D: "y2"},
    {b: "brand3", N: "N3", M: "M3", B: "B3", S: "y3", O: "y3", A: "y3", D: "y3"},
    {b: "brand4", N: "N4", M: "M4", B: "B4", S: "y4", O: "y4", A: "y4", D: "y4"},
]

मैं इस डेटा को रिएक्ट का उपयोग करके अपने वांछित प्रारूप में कैसे प्रदर्शित कर सकता हूं?

यह वह कोड है जिसे मैंने चित्र के समान प्रदर्शित करने के लिए इस तरह आज़माया है।

import React, { Component } from 'react';
import './results.css'

class Results extends Component {
  constructor(props){
     super(props);
     this.state = {
      products: [
        {b: "brand1", N: "N1", M: "M1", B: "B1", S: "y1", O: "y1", A: "y1", D: "y1"},
        {b: "brand2", N: "N2", M: "M2", B: "B2", S: "y2", O: "y2", A: "y2", D: "y2"},
        {b: "brand3", N: "N3", M: "M3", B: "B3", S: "y3", O: "y3", A: "y3", D: "y3"},
        {b: "brand4", N: "N4", M: "M4", B: "B4", S: "y4", O: "y4", A: "y4", D: "y4"},

    }
  }
  renderData = () => {
    return this.state.products.map((product, index)=> {
        const {M, B, S, O, A, D} = product;
        return (
          <div>    
            <tr>
              <th>A</th>
              <td>{ O }</td>
            </tr>

            <tr>
              <th>F</th>
              <td>{ B }</td>
            </tr>

            <tr>
              <th>S</th>
              <td>{ S }</td>
            </tr>

            <tr>
              <th>O</th>
              <td>{ O }</td>
            </tr>

            <tr>
              <th>A</th>
              <td>{ A }</td>
            </tr>
            <tr>
              <th>D</th>
              <td>{ D }</td>
            </tr>
          </div>
        )
    })
  }

  renderTableHeader = () => {
    return this.state.products.map((product, index)=> {
      const { b } = product;
      return <th>{ b.toUpperCase() }</th>
    })
  }

  render() {
    if (!this.props.done) {
      return null;
    }

    if (true) {
      return (
          <React.Fragment>
            <div>
              <table id="products">
                  <tbody>
                    <tr>
                      <th></th>
                      { this.renderTableHeader() }
                    </tr>
                  { this.renderData() }
                  </tbody>
              </table>      
            </div>
          </React.Fragment>
      )
    }
  }
}

यह प्रत्येक सरणी को अलग-अलग पंक्तियों में प्रस्तुत कर रहा है।

1
user11371238 24 नवम्बर 2019, 03:27

1 उत्तर

सबसे बढ़िया उत्तर

ऐसा लगता है कि आपको अपने डेटा को अपनी इच्छानुसार प्रदर्शित करने के लिए उसे थोड़ा बदलना होगा। वर्तमान में, products उस लेआउट से ट्रांसपोज़ किया गया लगता है जिसे आप ढूंढ रहे हैं (हालाँकि शायद प्रत्येक ब्रांड को कॉलम के बजाय एक पंक्ति होना एक अच्छा विचार हो सकता है)। हम इसे constructor विधि में कर सकते हैं (या जहां भी आप products प्राप्त करना/अपडेट करना संभालते हैं)।

आपका डेटा सही प्रारूप में होने के बाद, यह अधिक स्पष्ट होना चाहिए कि आप जिस लेआउट का अनुसरण कर रहे हैं उसे कैसे प्राप्त करें। आपको अपने डेटा की प्रत्येक पंक्ति के लिए केवल एक tr तत्व बनाने की आवश्यकता है। प्रत्येक पंक्ति में प्रत्येक स्तंभ के लिए एक td तत्व होना चाहिए।

उदाहरण के लिए:

class Results extends Component {
    constructor(props) {
        super(props);
        const products = [
            {b: "brand1", N: "N1", M: "M1", B: "B1", S: "y1", O: "y1", A: "y1", D: "y1"},
            {b: "brand2", N: "N2", M: "M2", B: "B2", S: "y2", O: "y2", A: "y2", D: "y2"},
            {b: "brand3", N: "N3", M: "M3", B: "B3", S: "y3", O: "y3", A: "y3", D: "y3"},
            {b: "brand4", N: "N4", M: "M4", B: "B4", S: "y4", O: "y4", A: "y4", D: "y4"},
        ]

        const keys = Object.keys(products[0]).filter(e => e !== "b");

        const formattedProducts = keys.map(key => {
            const row = {key: key};
            for (let i = 0; i < products.length; i++) {
                const product = products[i];
                row[product.b] = product[key];
            }
            return row;
        });

        this.state = {
            products,
            formattedProducts,
        }
    }

    renderHeader() {
        const { formattedProducts } = this.state;

        const brandNames = products.map(e => e.b);

        return (
            <tr>
                <th></th>
                { brandNames.map(brandName => (
                    <th key={ brandName }>{ brandName }</th>
                )) }
            </tr>
        )
    }

    renderRows() {
        const { formattedProducts } = this.state;

        const brandNames = products.map(e => e.b);

        return (
            <React.Fragment>
                { formattedProducts.map(row => (
                    <tr key={ row.key }>
                        <td>{ row.key }</td>
                        { brandNames.map(brandName => (
                            <td key={ brandName }>{ row[brandName] }</td>
                        ))}
                    </tr>
                )) }
            </React.Fragment>
        )
    }

    render() {
        return (
            <table>
                { this.renderHeader() }
                { this.renderRows() }
            </table>
        )
    }
}
0
Henry Woody 24 नवम्बर 2019, 04:58