钻取obj以获取JavaScript中的数据

Question

从本质上来说，我很难将数据从数据类型导入DOM。我想要的是数组中的src值来填充DOM中的img标签

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>