javascript - 如何从对象中获取标题并将其应用到我的视频中？

Question

我正在用纯 Javascript 创建一个视频页面(我没有其他选择)，我正在尝试将视频标题分配给适当的视频。我有类别、图像和 url 按我需要的方式工作，但停留在标题部分。我的代码哪里缺少？下面是对象和我的代码的示例。

var all_videos = {

    "cats": [
    {"cat": "Obstetrics and Pediatrics",
    "titles":[ "American Academy of Pediatrics 10 Year Tribute - Stronger
    Together",
    "Preterm Birth Facts - How are you training to prepare for premature
    births?",
    "Born Too Soon","Preparing for the Unexpected (SimMom/Maternal
    Promo)"],
    "codes":[ "PH1O54WuJ88","pp9vqoyQ9xU","JjZj8D7yx00"]},

    {"cat": "Nursing and Patient Care",
    "titles":[ "National Nurses Week and National Hospital Week 2017",
    "The July Effect",
    "Raising the Bar for Simulation in Nursing Education (Nursing Anne .
    [![enter image description here][1]][1]Simulator Teaser)",
    "Simulation for Nursing Education - A Better Way to Train (Nursing
    Anne Simulator Teaser)],
    "codes":[ "tTBXDqgJCXU","sRp6Ui5ibC8","7cMZ19aSTX8","wXLKyUMXGNI"]}
    ]
}

all_videos.cats.forEach(function(allcats) {

    var main = document.createElement("div");

    var catdiv = document.createElement("div");

    catdiv.textContent = allcats.cat;

    main.appendChild(catdiv);

    allcats.codes.forEach(function(code) {

        var viddiv = document.createElement("div");

        main.appendChild(viddiv);

        var titlebox = document.createElement("div");

        titlebox.textContent = allcats.titles;

        var images = document.createElement("img");
        images.setAttribute("src", "vids/"+code+".png");
        images.setAttribute("style", "width: 300px;");

        viddiv.appendChild(images);

        var link = document.createElement('a');
        link.setAttribute("href", "video.html?"+code+"&source=youtube");
        link.appendChild(images);

        viddiv.appendChild(link);
        viddiv.appendChild(titlebox);

        document.getElementById("showvids").appendChild(main);
    });
});

Answer 1

根据上面的评论，我假设您想要与 foreach 中的当前 code 相关的 title。

在 foreach 中，您也可以添加 index 作为参数 ( https://www.w3schools.com/jsref/jsref_forEach.asp )

所以你可以像这样更新你的代码:

allcats.codes.forEach(function(code, index) { //Add Index
    var viddiv = document.createElement("div");

    main.appendChild(viddiv);

    var titlebox = document.createElement("div");

    titlebox.textContent = allcats.titles[index]; //Add index - Note: this does assume that titles is the same length or longer than codes
    var images = document.createElement("img");
    images.setAttribute("src", "vids/"+code+".png");
    images.setAttribute("style", "width: 300px;");

    viddiv.appendChild(images);

    var link = document.createElement('a');
    link.setAttribute("href", "video.html?"+code+"&source=youtube");
    link.appendChild(images);

    viddiv.appendChild(link);
    viddiv.appendChild(titlebox);

    document.getElementById("showvids").appendChild(main);
});