如何在另一个对象数组上调用值

Question

json

[
    {
        "PROFILEUSERS_ID": "PTOKE000007",
        "ALAMATUMKM": "Komp.Srijaya Abadi",
        "dataTrouble": [
            {
                "NO": 1,
                "IDMASALAH": "PTOmsl000001",
                "IDNARASUMBER": "Marfua000100",
                "IDUMKM": "PTOKE000007",
                "NAMANARASUMBER": "Marfuah, S.SI, M.Kom",
                "NAMAUMKMPMT": "PT OKE",
                "GAMBARNARASUMBER": "4dwuwHmmHeCGuEv2LQqOmhXxvnoRTZTi08hqYz2C.jpeg",
                "KETERANGANPMT": "kami ingin seminar/workshop pembahasan untuk AI di bidang pengelolaan ekonomi untuk mengetahui lebih lanjut peran AI,\r\nDan Belajar UI/UX\r\n\r\nTerima Kasih",
                "TLPUMKM": "077845877",
                "STATUSPMT": "WAIT",
                "created_at": "2019-12-07 14:55:04",
                "updated_at": "2019-12-07 14:59:22",
                "listSkills": [
                    {
                        "NO": 1,
                        "IDMASALAHJP": "PTOmsl000001",
                        "JKMASALAH": "Artificial Intelligence",
                        "created_at": "2019-12-07 14:55:04",
                        "updated_at": null
                    },
                    {
                        "NO": 2,
                        "IDMASALAHJP": "PTOmsl000001",
                        "JKMASALAH": "UI/UX",
                        "created_at": "2019-12-07 14:55:04",
                        "updated_at": null
                    }
                ]
            }
        ]
    }
]

我已经尝试过这样的：

let content = ``;
data.forEach(item => {
  item.dataTrouble.forEach(child => {
    console.log(child);
    let customDate = child.created_at;
    let subsString = customDate.substring(0, 10);
    let newDate = subsString.split("-").reverse().join("-");
    content += `
      <div class="panel panel-default panel-post">
          <div class="panel-heading">
              <div class="media">
                  <div class="media-left">
                      <a href="#">
                          <img src="http://localhost/Project_Web/laravel/project/Development/ppu-web/public/assetLogin/img/profile/${child.GAMBARNARASUMBER}" alt="Siostium Activity Image" />
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">
                          <a href="#">${child.NAMANARASUMBER}</a>
                        </h4>
                          Tanggal Registrasi Acara: ${newDate}
                    </div>
              </div>
          </div>
          <div class="panel-body">
              <div class="post">
                  <div class="post-heading">
                      <p style="text-align: justify;">${child.KETERANGANPMT}</p>
                  </div>
                  <div class="post-content">

                  </div>
              </div>
          </div>
          <div class="panel-footer">
              <ul>
                  <li>
                      <a href="#">
                          <p>Permasalahan:</p>
                          <small><span class="label bg-red">${child.listSkills.JKMASALAH}</span></small>
                      </a>
                  </li>
                  <li></li>
                  <li></li>
              </ul>
                  <div class="form-group">
                      <div class="form-line">

                      </div>
                  </div>
          </div>
      </div>
      `
  });
  document.getElementById('activity').innerHTML = content;
});

但是在<small><span class="label bg-red">${child.listSkills.JKMASALAH}</span></small> ，数据是未定义的。

我已经尝试在孩子之后添加循环，但数据的结果是 3 个而不是 2 个数据。

Answer 1

listSkills是一个数组，您可以通过其索引访问它。 像： child.listSkills[index].JKMASALA 。

您可以映射和显示如下值：

child.listSkills.map(obj => (
  <small>
    <span class="label bg-red">
      {obj.JKMASALAH}
    </span>
  </small>
))