Javascript 如何通过Ajax调用创建可点击链接的动态列表

我想在名为img_list的div中创建一个链接的动态列表，当我单击任何一个链接时，它将通过Ajax调用在相邻的iframe中打开

因此，我做了以下工作：

 <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <div id="img_list">
        </div>
        <iframe id="img_loc" width="300" class="modal-content"
            height="500"
            allowfullscreen data-token="3Az3ki"></iframe>
        <div id="caption"></div>
  </div>

---

这个代码不起作用

返回对象数组的API，需要通过索引进行访问

        modal.style.display = "block";
        imageList(1, 'G11').done(function (data) {
            var appenddata;
            for(var i =0 ; i<data.length; i++){
                appenddata += "<a href = '" + data[i].loc_path + " '>" + data[i].description + " </a>";
            }
            $('#img_list').html(appenddata);

        });

---

根据@SILENT，我做了以下工作：

imageList(1, 'G11').done(function (data) {
                let appenddata = '';
                data.d = JSON.parse(data.d); //Fix the problem
                $.each(data.d, function (key, value) {
                    if (typeof value !== 'undefined' && value) {
                        appenddata += "<a href = '#' id = '" + value.loc_serial + "'" + ">" + "<img border='0' alt= '" + value.description + "'" + " src= '" + value.thumbnail + "'" + " width='100' height='100' > " + " </a> ";
                        appenddata += " <input id = '" + value.loc_serial + "'" + " type='hidden' " + " value= '" + value.loc_path + "'" + "> "
                    }
                });
                $('#img_list').html(appenddata);

            });

将数据解析为JSON对象修复了我的问题：

data.d=JSON.parsedata.d

---

控制台中出现了什么错误？@programmatchell没有错误，只有值。loc_path，value.description未定义，尽管imageList函数返回Json数据值的输出是什么？@ChrisSatchell:udefined，我尝试遍历Json对象并设置href和链接名properties@AnynameDonotcare你的data.d是一个严格的响应吗？如果是，请使用JSON.parse。另外，我建议使用let或const代替var，以防出现范围问题。你确定吗？据我所知，这也适用于数组，因为我使用了`data:JSON.stringify{projId:projId，locCode:locCode}`所以不能像这样处理数据，您能推荐一些方法来解决这个问题吗

[{"description":"demo","loc_path":"https://en.wikipedia.org/wiki/Computer#/media/File:DM_IBM_S360.jpg"},{"description":"demo","loc_path":"https://en.wikipedia.org/wiki/Computer#/media/File:Eniac.jpg"},{"description":"demo","loc_path":"https://en.wikipedia.org/wiki/Computer#/media/File:Cray_2_Arts_et_Metiers_dsc03940.jpg"}]

        modal.style.display = "block";
        imageList(1, 'G11').done(function (data) {
            var appenddata;
            for(var i =0 ; i<data.length; i++){
                appenddata += "<a href = '" + data[i].loc_path + " '>" + data[i].description + " </a>";
            }
            $('#img_list').html(appenddata);

        });

imageList(1, 'G11').done(function (data) {
                let appenddata = '';
                data.d = JSON.parse(data.d); //Fix the problem
                $.each(data.d, function (key, value) {
                    if (typeof value !== 'undefined' && value) {
                        appenddata += "<a href = '#' id = '" + value.loc_serial + "'" + ">" + "<img border='0' alt= '" + value.description + "'" + " src= '" + value.thumbnail + "'" + " width='100' height='100' > " + " </a> ";
                        appenddata += " <input id = '" + value.loc_serial + "'" + " type='hidden' " + " value= '" + value.loc_path + "'" + "> "
                    }
                });
                $('#img_list').html(appenddata);

            });