Looping with JSON data-CodePudding

I currently got a loop which looks like this:

$("#formen").on("submit", function(e) {
  e.preventDefault();
  $("#result").html('');
  var request = gapi.client.youtube.search.list({
    order: "viewCount",
    part: "snippet",
    type: "video",
    q: encodeURIComponent($("#search").val()).replace(/ /g, " "), //encode ändrar mellanslag( ) till    istället..
    maxResults: 15
  });

  request.execute(function(response) {
    var results = response.result;
    console.log(results);

    $.each(results.items, function(index, item) {

      var tidId = item.id.videoId;
      var tid = gapi.client.youtube.videos.list({
        part: "contentDetails",
        id: tidId
      });

      tid.execute(function(response) {
        var svaret = response.result;
        console.log(svaret);

        $.each(svaret.items, function(index, item) {
          var dur = moment.duration(item.contentDetails.duration);
          var timeHTML = '<p >'   dur.format('HH:mm:ss', {
            trim: false
          })   "</div>";
          $("#result > div").eq(index).append(timeHTML);
        });
      });
      $.get("item.php", function(data) {
        $("#result").append(tplawesome(data, [{
          "title": item.snippet.title,
          "yturl": item.snippet.thumbnails.high.url,
          "videoid": item.id.videoId,
          "channelTitle": item.snippet.channelTitle
        }]));
      });
    });
  });
});

From this i get 8 different types of numbers. They get appended inside my result div, however inside my result div i got 8 children that I would want the data inside instead. But if I append it directly into the children I get 8 data in each children which I dont want.

<div id = "result">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

I've tried multiple things but none of them have seem to work since if I remove JSON.data to .children the data gets undefined. Has anyone solved something simular?

CodePudding user response：

You should index the child divs in result.

const jsonData = [1, 2, 3, 4, 5, 6, 7, 8];

$.each(jsonData, function(index, item) {
    $("#result > div").eq(index).append(item);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "result">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>