CODEWITHSUNDEEP
jquery
ORCos
ORCos

Reputation: 99

How to concatenate URL in an image src attribute?

I'm trying to populate a table from an array of objects. The html is a simple table that get's populated from the following piece of code.

The image that corresponds to each row has the same URL and is in the same folder ,however it has a different id (I simply call them 1.png, 2.png 3.png.... and so on ).

Basically, I'm trying to construct each URL by concatenating the id. to the same URL over and over for each new row.

All works well except the video part where the URL construction fails. Am I missing something here while concatenating the URL?

$(function() {
  var content = [{
    title: 'My-title',
    date: '22.10.2020',
    manager: 'John Doe',
    certification: 'no',
    language: 'English ',
    description: 'Ipsum dolor sit..',
    video: 55
  }];

  $.each(content, function(index, v) {
    var nTr = "<tr>"
    var url_ =
      nTr += "<td><p>" + v.title + "</p></td>";
    nTr += "<td><p>" + v.date + "</p></td>";
    nTr += "<td><p>" + v.manager + "</p></td>";
    nTr += "<td><p>" + v.certification + "</p></td>";
    nTr += "<td><p>" + v.language + "</p></td>";
    nTr += "<td><p>" + v.description + "</p></td>";
    nTr += "<td><p><img src = 'https://myftp.link.com/TPS/media/' + v.content[0].video + '.png'></p></td>";
    nTr += "</tr>";
    console.log(nTr, typeof nTr, "yolo");
    $(nTr).appendTo('#toc_');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-striped table-bordered table-hover" id="sample_1">
  <thead>
    <tr>
      <th>
        Title
      </th>
      <th>
        Date
      </th>
      <th>
        Manager
      </th>
      <th>
        Certification
      </th>
      <th>
        Language
      </th>
      <th>
        Description
      </th>
      <th>
        Video
      </th>
    </tr>
  </thead>
  <tbody id="toc_"></tbody>
</table>

Upvotes: 0

Views: 802

Answers (1)

Johannes
Johannes

Reputation: 67748

The line containing the img should be:

nTr += "<td><p><img src = 'https://myftp.link.com/TPS/media/" + v.content[0].video 
  + ".png'></p></td>";

Note: I changed the quotes - double quotes before and after the JS part, single quotes only at beginning and end of URL.

Upvotes: 2

Related Questions