CODEWITHSUNDEEP
javascript
stevenpepe
stevenpepe

Reputation: 267

How can I grab the title from object and apply it to my video?

enter image description hereI am creating a video page in pure Javascript ( I have no other options) and I'm trying to assign the video title to the appropriate video. I have the category, image, and url working the way I need to but stuck on the title part. Where is my code lacking? Below is a sample of the object and my code.

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);
    });
});

Upvotes: 1

Views: 61

Answers (2)

Seth McClaine
Seth McClaine

Reputation: 10040

Based on the comment above, I'm assuming you want the title that correlates to the current code in the foreach.

Inside the foreach you can add the index as a param as well (https://www.w3schools.com/jsref/jsref_forEach.asp)

So you can update your code like so:

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);
});

Upvotes: 1

Seth McClaine
Seth McClaine

Reputation: 10040

I think you are sending an array of titles...

"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)"],

.. So you would need to use join.

titlebox.textContent = allcats.titles.join(', ');

This should set your title to: 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)

If you want to set it to the first title you could do

titlebox.textContent = allcats.titles[0];

This would give you

American Academy of Pediatrics 10 Year Tribute - Stronger Together

Upvotes: 1

Related Questions