Детализация объекта для получения данных в JavaScript

Question

По сути, мне трудно получить данные из типа данных в DOM.Я хочу, чтобы значения src из массивов заполняли теги img в DOM

HTML:

<div id="container-fluid--secondary" class="container-fluid container-fluid--secondary">
   <section class="a">
      <div class="video-container">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px" alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
      </div>
   </section>
   <section class="b">
      <div class="video-container">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
      </div>
   </section>
</div>

JS:

var videos = {
    'a': [
        {
            'name': 'a',
            'src': 'https://foo/video/'
        },
        {
            'name': 'b',
            'src': 'https://bar/video/'
        },
        {
            'name': 'c',
            'src': 'https://baz/video/'
        }
    ],
    'b': [
        {
            'name': 'a',
            'src': 'https://fizz/video/'
        },
        {
            'name': 'b',
            'src': 'https://buzz/video/'
        },
        {
            'name': 'c',
            'src': 'https://blargh/video/'
        }
    ]
},

 containerFluidSecondary = document.getElementById('container-fluid--secondary'),
   videoNames = Object.keys(videos);     

        containerFluidSecondary.querySelectorAll('section')
        .forEach(function(section, i){
         if (section.className == videoNames[i]) {
            var videoContainer = Array.prototype.slice.call(section.getElementsByClassName('video-container')[0].children);

            videoContainer.forEach(function(img, i){
              for (var videoCategory in videos){
                console.log('videoCategory', videoCategory[i][i])
              }
            })
         }})

Answer 1

videoCategory имеет значение "a" или "b".Таким образом, videoCategory[i][i] не имеет смысла.

Похоже, что вы хотите:

containerFluidSecondary.querySelectorAll('section').forEach(function(section){
  section.querySelectorAll('img').forEach(function(img, i) {
    img.src = videos[section.className][i].src;
  });
});

var videos = {
    'a': [
        {
            'name': 'a',
            'src': 'https://foo/video/'
        },
        {
            'name': 'b',
            'src': 'https://bar/video/'
        },
        {
            'name': 'c',
            'src': 'https://baz/video/'
        }
    ],
    'b': [
        {
            'name': 'a',
            'src': 'https://fizz/video/'
        },
        {
            'name': 'b',
            'src': 'https://buzz/video/'
        },
        {
            'name': 'c',
            'src': 'https://blargh/video/'
        }
    ]
};

document.querySelectorAll('section').forEach(function(section){
  section.querySelectorAll('img').forEach(function(img, i) {
    img.src = videos[section.className][i].src;
  });
});

document.querySelectorAll('section').forEach(function(section){
  section.querySelectorAll('img').forEach(function(img, i) {
    img.src = videos[section.className][i].src;
  });
});

<div id="container-fluid--secondary" class="container-fluid container-fluid--secondary">
   <section class="a">
      <div class="video-container">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px" alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
      </div>
   </section>
   <section class="b">
      <div class="video-container">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
      </div>
   </section>
</div>