Javascript для цикла с .appendchild () добавляет значения последнего объекта из [объекта объекта] в HTML дом

Question

$(document).ready(function () {
    GetDetails();
});

function GetDetails() {
    let albumlist = document.getElementById("album-list");



    $.ajax({
        url: '/Store/browseajax',
        type: 'GET',
        data: { id: '@ViewBag.genreid' },
        contentType: 'application/json;charset=utf-8',
        success: function (data) {

            console.log(data);


            for (x in data) {

                    let li = document.createElement("li");
                    console.log(li);
                    let a = document.createElement("a");
                    a.id = "refdetails";
                    a.href = "";


                    let img = document.createElement("img");
                    img.alt = "";
                    img.src = "";
                    img.id = "image";

                    let span = document.createElement("span");
                    span.id = "title";

                    a.appendChild(img);
                    a.appendChild(span);
                    li.appendChild(a);
                    albumlist.appendChild(li);

                    let url = '@Url.Action("Details", "Store")?id=' + data[x].albumid;

                    $('#refdetails').attr("href", url);
                    $('#image').attr("src", data[x].albumarturl);
                    $('#image').attr("alt", data[x].albumtitle);
                    $('#title').text(data[x].albumtitle);                   
            }
        },
        error: function (err) {
            alert(err.statusText);
        }
    });


}

Пожалуйста, кто-нибудь объяснит мне, где я делаю это неправильно.Я хочу отобразить оба объекта внутри моих данных, но вместо этого он показывает только последние значения объекта, хотя он выполняет итерации надлежащим образом.

это изображение показывает мои данные console.log

Answer 1

Привет и добро пожаловать в SO!

Позвольте мне попытаться дать некоторые идеи, проходящие через ваш код ...

Здесь вы создаете новые элементы DOM:

let li = document.createElement("li");
console.log(li);
let a = document.createElement("a");

a.id = "refdetails";
a.href = "";

let img = document.createElement("img");
img.alt = "";
img.src = "";

Теперь обратите внимание на следующие строки.Вы присваиваете уникальный идентификатор элементам, в данном случае « image » и « title »

img.id = "image";

let span = document.createElement("span");
span.id = "title";

a.appendChild(img);
a.appendChild(span);
li.appendChild(a);
albumlist.appendChild(li);

И затем вы пытаетесь присвоить некоторые значенияэти элементы:

$('#refdetails').attr("href", url);
$('#image').attr("src", data[x].albumarturl);
$('#image').attr("alt", data[x].albumtitle);
$('#title').text(data[x].albumtitle);

Вы пытаетесь добавить в дом точно такие же элементы (#image и #title) в каждом цикле. Элементы должны иметь уникальный идентификатор, поэтому, если вы попытаетесь вставить новый узел с тем же идентификатором, предыдущий будет удален до вставки нового .

Если вы хотитечтобы увидеть все названия альбомов в DOM, вы должны добавлять новый элемент к DOM в каждом цикле.

Вы можете играть с этой идеей:

for (let i = 0; i < data.length; i++){             
    let span = document.createElement("span");
    span.id = "title" + i;

Answer 2

Вместо a.id используйте a.className для ваших элементов, которые вы создали динамически, смотрите здесь: fiddle https://jsfiddle.net/designtocode/15yozn24/15/

Вам также необходимо добавить уникальные данные, чтобы элемент был a.className = "refdetails" + data[x].id; идобавление будет выглядеть так: $('.refdetails'+ data[x].id).attr("href", url);

Проблема возникает из-за того, что вы пытаетесь вставить данные в идентификатор, и это будет работать только для первого идентификатора, найденного в DOM, так как он неочевиден.

Jquery:

    $(document).ready(function () {
    GetDetails();
});

function GetDetails() {
    let albumlist = document.getElementById("album-list");



    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/albums',
        type: 'GET',
        /* data: { id: '@ViewBag.genreid' }, */
        contentType: 'application/json;charset=utf-8',
        success: function (data) {

            console.log(data);


            for (x in data) {

                    let li = document.createElement("li");
                    /* console.log(li) */;
                    let a = document.createElement("a");
                    a.className = "refdetails" + data[x].id;
                    a.href = "";


                    let img = document.createElement("img");
                    img.alt = "";
                    img.src = "";
                    img.className = "image" + data[x].id;

                    let span = document.createElement("span");
                    span.className = "title" + data[x].id;

                    a.appendChild(img);
                    a.appendChild(span);
                    li.appendChild(a);
                    albumlist.appendChild(li);

                    let url = 'http://yourwebsite.com/?id=' + data[x].id;

                    $('.refdetails'+ data[x].id).attr("href", url);
                    $('.image' + data[x].id).attr("src", 'https://via.placeholder.com/150');
                    $('.image' + data[x].id).attr("alt", data[x].title);
                    $('.title' + data[x].id).text(data[x].title);                   
            }
        },
        error: function (err) {
            alert(err.statusText);
        }
    });


}