Невозможно получить данные, отправленные черезметод - PullRequest
Новая
       16

Невозможно получить данные, отправленные черезметод

0 голосов
/ 04 июня 2019

Я пишу код интерфейса для базового сайта о моде, используя данные JSON (полученные из URL), пакеты jQuery и Handlebars.Я довольно новичок в javascript и Handlebars, и это мои первоначальные попытки фронт-энда разработки, поэтому я публикую этот вопрос, так как не могу найти дальнейшего решения.

В моем предыдущем вопросе Почему я не могу правильно перебрать элементы руля? , я использовал x-handlebars-template для тега в моем HTML.На этот раз я использую другой шаблон с именем 'template2', который я использую для другого тега в том же файле HTML (index.html), используя x-handlebars-template2, чтобы использовать итерацию {{#each}}.

Ссылка:

В этом коде я пытаюсь получить данные JSON из URL-адреса и отобразить их в моей корзине (используя модальное представление / всплывающее окно).Корзина создается с использованием формы, как показано в коде (который передает данные JSON).

<script id="cartTemp" type="text/x-handlebars-template2">


                  {{#each cart}}
                  <p id ="cartBell">
                         My Cart: <button  id = "cartBtn" class ="openBtn">
                         <img src="https://cdn2.iconfinder.com/data/icons/web/512/Shopping_Cart-512.png" style="max-height:25px;" />
                         </button>  My Total : $
                  </p>

                      <!-- The Modal -->
                      <div class="modal2" id="myModal2">
                          <!-- Modal content -->
                          <div class="modal-content2">
                              <span class="closeBtn" id="close2">&times;</span>
                              <h2>Cart Items</h2>

                              <table id="cartTable">
                                  <tr>
                                      <th>Product ID</th>
                                      <th>Product Name</th>
                                      <th>Quantity </th>
                                      <th>Cost</th>
                                  </tr>

                                  <tr>
                                      <td>#{{id}}</td>
                                      <td>{{name}}</td>
                                      <td>{{quantity}}</td>
                                      <td>${{cost}}</td>
                                  </tr>
                              </table>
                  {{/each}}

                              <form action="/cart" method="post" >
                                  <fieldset>
                                      <legend>This form will update the cart with a given product id, or remove if quantity=0</legend>
                                      <ul>
                                          <li>Product: <input type="number" name="productid"></li>
                                          <li>Quantity: <input type="number" name="quantity"></li>
                                          <li><input type="submit"></li>
                                      </ul>
                                      <input type="hidden" name="update" value="1">
                                  </fieldset>
                              </form>
                          </div>
                      </div>


</script>

И это мой файл .js , где я получаю данные JSON, созданные в '/ cart', и анализирую их. 

var myRequest2 = new XMLHttpRequest()
    myRequest2.open('GET' , 'http://127.0.0.1:8010/cart' )

    myRequest2.onload = function() {

            var myData2 = JSON.parse(myRequest2.responseText)

            createCart(myData2)


                  var cartBtnEls = document.getElementsByClassName("openBtn")
                  var closeBtnEls = document.getElementsByClassName("closeBtn")[0]

                    cartBtnEls.onclick = function(){

                     var modal2 = document.getElementById("myModal2")
                      modal2.style.display = "block"
                    }

                    closeBtnEls.onclick = function(){

                     var modal2 = document.getElementById("myModal2")
                      modal2.style.display = "none"
                    }
    }
            myRequest2.send()

Я ожидаю увидеть все элементы, которые я добавил в свою корзину, для отображения, когда я нажму 'cartBtn', но вместо этого я смогу увидеть только первый элемент.Почему итерация не проходит через все элементы, добавленные в корзину?

Я попытался удалить любой отображаемый элемент, указав его количество = 0. Затем появляется второй элемент, добавленный в корзину.

Также , можно ли где-нибудь отобразить общее количество товаров в корзине?(может быть подсчет количества итераций, но как?)

Любое возможное решение?Заранее спасибо!

...