How to get each array value outside loop to modal?

Question

I have this in JS and the code below. I want to send the data-id into modal and also when closing the modal to dismiss the data-id. how can I do that using javaScript???

fetch("https://data.uk/api/" + $searchValue).then(
            res => {
                res.json().then(
                    data => {
                        if (data.length > 0) {

                            var temp = "";
                            temp += "<thead>";
                            temp += "<tr>";
                            temp += "<th>ID</th>";
                            temp += "<th>Force Name</th>";
                            temp += "<th>Details</th>";
                            temp += "</tr>";
                            temp += "</thead>";
                            temp += "<tbody>";

                            data.forEach((itemData) => {
                                temp += "<tr><td>" + itemData.id + "</td>";
                                temp += "<td>" + itemData.name + "</td>";
                                temp += "<td><a href='#' data-id='" + itemData.id + "' data-toggle='modal' data-target='#myModal'>More Detail</a></td></tr>";
                            });
                            temp += "</tbody>";
                            document.getElementById('data').innerHTML = temp;
                        }
                    }
                )
            }
        )

and I want to get each data-id value into modal using this

$("myModal").on("show.bs.modal", function(e) {
    var b = $(e.relatedTarget);
    var r = b.data("id");
    var modal = $(this);
    modal.find("#me").text(r);
})

and this is my modal, I want when I open the modal to be able to capture the data-id and display it in id="me"

<div class="modal-body" id="modal-body">
                    <div class="row m-0">
                        <div class="col-4">
                            People name & twitter
                        </div>
                        <div class="col-8">
                            Descriptions
                            <h2 id="me"></h2>
                        </div>
                    </div>
                </div>

Hi, did you resolve this or still looking for answer ?

Swati
– Swati

2021-10-23 04:27:04 +00:00
Commented Oct 23, 2021 at 4:27 — Swati
– Swati, Commented Oct 23, 2021 at 4:27

Emzaw · Accepted Answer · 2021-10-22 12:05:15Z

1

You can access data-... attribute with dataset property, e.g. given

<div id="my-element" data-id="myData"></div>

you can get it with

document.getElementById("my-element").dataset.id

answered Oct 22, 2021 at 12:05

Emzaw

7787 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris24578 Over a year ago

that did not work because the link tag is in js and I want when I open the modal to be able to send the data-id of that link into the h2 id="me"

Collectives™ on Stack Overflow

How to get each array value outside loop to modal?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related