Jadi saya perlu menunjukkan objek seperti dalam daftar html. Saya memiliki objek yang mirip dengan ini:

    {
  "top": 123,
  "left": 456,
  "right": 789,
  "bottom": 100,
  "m1": 123,
  "m2": 456,
  "m3": 789,
  "m4": 100,
  "patterns": [1, 2, 3],
  "dimension": {
    "width": 123,
    "length": 456
  },
    }

Saya menggunakan reaksi dan ketika saya mengambil objek itu saya menguraikannya ke dalam fungsi ini:

  createHtmlList = (obj) => {
    let output = '';
    Object.keys(obj).forEach((k) => {
      if (typeof obj[k] === 'object' && obj[k] !== null) {
        output += `<li>${k}<ul>`;
        output += this.createHtmlList(obj[k]);
        output += '</ul></li>';
      } else {
        output += `<li>${k} : ${obj[k]}</li>`;
      }
    });
    this.setState({
      output,
    });
  }

Dan setelah itu saya menyimpan output itu dalam keadaan dan output adalah string yang terlihat seperti ini:

<li>top : 123</li><li>left : 456</li><li>right : 789</li><li>bottom : 100</li><li>m1 : 123</li><li>m2 : 456</li><li>m3 : 789</li><li>m4 : 100</li><li>patterns<ul><li>0 : 1</li><li>1 : 2</li><li>2 : 3</li></ul></li><li>dimension<ul><li>width : 123</li><li>length : 456</li></ul></li>

Dan saya menguraikannya ke tag div html

              <div dangerouslySetInnerHTML={{ __html: this.state.output }} />

Jadi saya tertarik bagaimana saya bisa menghilangkan nomor dalam nomor array di depan nilai di hasil akhir saya

Keluaran sekarang:

    patterns:
     0 : 1
     1 : 2
     2 : 3
    dimension
     width: 123
     lenght: 456
     top: 123
     left: 456
     right: 789
     bottom: 100
     m1: 123
     m2: 456
     m3 789
     m4: 100

Output yang diharapkan (versi yang lebih baik jika memungkinkan :)):

    patterns: 1,2,3
    dimension
     width: 123
     lenght: 456
     top: 123
     left: 456
     right: 789
     bottom: 100
     m1: 123
     m2: 456
     m3 789
     m4: 100

Atau

    patterns: 1,2,3
    dimension
     width: 123
     lenght: 456
     top: 123
     left: 456
     right: 789
     bottom: 100
     m1: 123
     m2: 456
     m3 789
     m4: 100
0
userXYZ 11 Mei 2021, 22:36

1 menjawab

Jawaban Terbaik

Anda tidak perlu menyimpan jsx Anda dalam status. hanya melakukan sesuatu seperti ini.

  const createHtmlList = (obj) => {
    return Object.keys(obj).map((item) => (
      <li>
        {item} :
        {typeof obj[item] !== "object" ? (
          obj[item]
        ) : Array.isArray(obj[item]) ? (
          obj[item].join(", ")
        ) : (
          <ul>{createHtmlList(obj[item])}</ul>
        )}
      </li>
    ));
  };

Dan kemudian output seperti ini

return <div>{createHtmlList(obj)}</div>
2
Pouria Rezaei 11 Mei 2021, 20:14