Pass a parameter into a template file when an index is clicked

Question

I have a table populated from some JSON in a JS file.

data.js looks like this:

var data = [
  {
    title: "Avengers Endgame Trailer",
    year: 2019,
    type: "MOV",
    file: "video1.mp4"
  },
  {
    title: "Avengers Infinity War Poster",
    year: 2018,
    type: "PNG",
    file: "image1.png"
  }
];

The data is read in a JS function in my functions.js file (which writes the actual table rows).

function populateTable() {
  for (var i = 0; i < data.length; i++) {
    if (data[i].type == "MOV") {
      var row = '<tr><td><a href="video.html?=' + data[i].file + '">' + data[i].title + "</a></td>";
      row += "<td>" + data[i].year + "</td></tr>";
      $("#contents").append(row);
    } else {
      var row = '<tr><td><a href="image.html?=' + data[i].file + '">' + data[i].title + "</a></td>";
      row += "<td>" + data[i].year + "</td></tr>";
      $("#contents").append(row);
    }
  }
}

What I'm trying to figure out is how to allow the link offs for each item to use a different template file. I wrote some dummy code in the HREF above but that's obviously not correct.

For templates, I have two: video.html and image.html. I'd like to pass the filename of the index tapped as a parameter into the template files so it can display the correct file, but I'm unsure what to do?

As an example the video.html template file looks like this:

<html>
    <body>
        <div class="container">
            <video autoplay muted loop id="main">
              <source src="{filenameGoesHere?}" type="video/mp4">
              Your browser does not support HTML5 video.
            </video>
        </div>
    </body>
</html>

Praveen Kumar Purushothaman · Accepted Answer · 2020-11-08T22:02:40.390

1

There are multiple things that you're repeating here making it non-optimised. If you can use functions, please use them! If not, the better way is:

function populateTable() {
  for (var i = 0; i < data.length; i++) {
    // Look how I have made the file addition here.
    var row = '<tr><td><a href="' + (data[i].type == "MOV" ? "video" : "image") + ".html?=" + data[i].file + '">' + data[i].title + "</a></td>";
    row += "<td>" + data[i].year + "</td></tr>";
    // Do the MOV vs. PNG thing/
    row += "<tr><td>";
    if (data[i].type == "MOV") {
      row += `<div class="container">
            <video autoplay muted loop id="main">
              <source src="${data[i].file}" type="video/mp4" />
              Your browser does not support HTML5 video.
            </video>
        </div>`;
    } else {
      row += `<div class="container">
            <img src="${data[i].file}" alt="${data[i].title}" />
        </div>`;
    }
    row += "</td></tr>";
    $("#contents").append(row);
  }
}

In the above code:

Look how I have made the file addition here on Line 4.
Do the MOV vs. PNG thing on Line 7.

For the templating thing using How to read GET data from a URL using JavaScript?, what you can do is:

<html>
    <body>
        <div class="container">
            <video autoplay muted loop id="main">
              <source src="" id="src" type="video/mp4" />
              Your browser does not support HTML5 video.
            </video>
        </div>
    </body>
    <script>
        var params = new URLSearchParams(location.search);
        document.getElementById("src").setAttribute("src", params.get('file'));
    </script>
</html>

edited Nov 08 '20 at 22:02

answered Nov 08 '20 at 21:26

Praveen Kumar Purushothaman

164,888
24
203
252

Thanks, but I'm not trying to add the videos themselves to the table, as you have here, I'm trying to open New Pages, using one of two template files, where the associated file name of the clicked row is available. – Fuego DeBassi Nov 08 '20 at 21:38
@FuegoDeBassi Got it. What kind of templating engine are you using? Opening in the sense? Are you opening as a new window or a modal window? Are you using any client side libraries like React (which I don't think so as you're using jQuery), but wanted to clarify. – Praveen Kumar Purushothaman Nov 08 '20 at 21:39
No templating engine, I'd just like to set both my video.html and image.html templates to be able to receive a parameter, and then I'd like to deliver custom hrefs for each item in the index e.g. video.html?=video4.mov and then have it display with that. – Fuego DeBassi Nov 08 '20 at 21:42
I'd like these opened as new pages. – Fuego DeBassi Nov 08 '20 at 21:43
@FuegoDeBassi You can't have a nameless parameter. You're doing `?=` that's wrong. You have to have something like `?file=filename.mp4`. – Praveen Kumar Purushothaman Nov 08 '20 at 21:48
@FuegoDeBassi Please check this: **[parsing - How to read GET data from a URL using JavaScript?](https://stackoverflow.com/questions/814613/how-to-read-get-data-from-a-url-using-javascript)** – Praveen Kumar Purushothaman Nov 08 '20 at 21:49
@FuegoDeBassi Let me know if you need help in implementing the other answer's technique in your code. – Praveen Kumar Purushothaman Nov 08 '20 at 21:51
Got it. If you don't mind doing an example amending my video.html page to read a url param and set that as the src for the video tag that would be amazing. I can amend my populateTable function to have a link with a named parameter myself. – Fuego DeBassi Nov 08 '20 at 21:57

Pass a parameter into a template file when an index is clicked

1 Answers1