Django for 循环仅在按钮单击时捕获最后一次迭代

Question

I am building a Django movie app which makes use of the TMDB API. The way I have it set up currently is that I have a function in my main.js which is run when the page is loaded which makes the call to the API based on which media_id is clicked from the search results, which saves to local storage. This works fine in this regard.

I implemented a review functionality where logged in users are able to leave reviews on whichever title they wish and it saves to the DB, and then on the user account page I have a list displayed of all the reviews a logged in user has left. Up till here everything works as intended but this is where my error lies.

Next to each review in the users account page I have a button I want to take the user to the page in which they left the review, however I can only seem to get it to link me to the final title in the list of reviews.

The code I have in my account.html file is as follows:

<tbody>
    {% for review in reviews %}
        <script type="text/javascript">
            function resetValues() {
                localStorage.setItem('movieId', "{{review.media_id}}");
                localStorage.setItem('title', "{{review.media_title}}");
              }
          </script>
          <tr>
            <td>{{ review.media_title }}</td>
            <td>{{ review.review_title }}</td>
            <td>
              <button type="button" class="btn btn-light" style="float: right;" onclick='resetValues()' href="{% url 'result' %}">View Title</button>
            </td>
          </tr>
    {% endfor %}
</tbody>

And the code in main.js for getting the result from the API call:

function getTitle() {
    let movieId = localStorage.getItem('movieId');
    axios.get('https://api.themoviedb.org/3/movie/'+movieId+'?api_key={API_KEY}&language=en-US&append_to_response=credits').then((response) => {
        let movie = response.data;
        ...

All reviews display as they should, just the button will always take me to the page of the final review in the list.

Ideally I would like to fix this issue in here rather than change any of the result views as its currently working from the homepage or from user search, but of course if it cannot be avoided I am happy to change it.

I am still relatively new to Django and web development so please forgive me if this seems trivial or messy. Thank you.

Answer 1

Why use the localStorage to store the movie id? Also you set it in each iteration of the loop overriding all previous values. You can easily set the movie id on your button and get it in the function.

In your HTML :

<button type="button" class="btn btn-light" style="float: right;" onclick='getTitle(this)' data-movie-id="{{ review.media_id }}" href="{% url 'result' %}">View Title</button>

Notice getTitle(this) and the extra attribute data-movie-id .

Now in your JavaScript :

function getTitle(elem) {
    let movieId = elem.getAttribute("data-movie-id");
    ...

Answer 2

Indeed you're overriding the definition of the resetValues function at every cycle in the for-loop.

A quick and ugly fix would be to use the id of a review in the definition of the function:

function resetValues{{review.media_id}}() {

Then for the button:

<button type="button" class="btn btn-light" style="float: right;" onclick="resetValues{{review.media_id}}()" href="{% url 'result' %}">
    View Title
</button>

But I suggest following @abdul-aziz-barkat answer !