How can I call value on another object array

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
                    }
                ]
            }
        ]
    }
]

I already tried like this:

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;
});

But on the <small><span class="label bg-red">${child.listSkills.JKMASALAH}</span></small> , the data is undefined.

I already tried to add looping after the child but the result of data are 3 not 2 data.

Answer 1

listSkills is an array you can access it through its index. like: child.listSkills[index].JKMASALA .

you can map and show values like:

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