undefined shows up on Modal while filtering data from JS object

  Kiến thức lập trình

I am learning JavaScript. I am trying to create input fields from my JS Object by iterating over its few (03 in this case) properties:

{
  "createdBy" : "System",
  "createdDate" : "2015-12-31T05:00:00.000+00:00",
  "lastModifiedBy" : "System",
  "lastModifiedDate" : "2023-12-31T05:00:00.000+00:00",
  "id" : 21,
  "softwarename" : "KeePass",
  "softwareprovider" : "KeePass",
  "softwareprovidercontactemail" : "[email protected]",
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/softwares/21"
    },
    "appSoftware" : {
      "href" : "http://localhost:8080/softwares/21"
    }
  }
}

My Modal:

<div class="modal" tabindex="-1" id="myModal">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modalBody">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

The JavaScript:

    function myEditObjIterFunction(formData) {
        let modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('myModal'));
        var target = document.querySelector("#modalBody");
        var htmlFromObj = '';
        Object.entries(formData).forEach(([key, value]) => {
            if (key == 'softwarename') {
                htmlFromObj += '<label>' + key + '</label></br><input  type="text" value="'+ value +'" id="' + key + '">' + '</br>';
            } else if (key == 'softwareprovider') {
                htmlFromObj += '<label>' + key + '</label></br><input  type="text" value="'+ value +'" id="' + key + '">' + '</br>';
            } else if (key == 'softwareprovidercontactemail'){
                htmlFromObj += '<label>' + key + '</label></br><input  type="text" value="'+ value +'" id="' + key + '">' + '</br>';
            }
        });
        target.insertAdjacentHTML('beforeend', htmlFromObj);
        modal.show();
    }

All goes well except an additional undefined is shown at the bottom of the three fields as shown in the pic.

enter image description here

What am I doing wrong here? or what I am missing here?

Any pointers/help will be greatly appreciated.

LEAVE A COMMENT