Ответ Symfony JQuery на HTML - PullRequest
Новая
       13

Ответ Symfony JQuery на HTML

1 голос
/ 13 марта 2019

JSON 

{"results":[{"id":"1","text":"LogiLink USB Sync-und oplaadkabel iPod und iPhone 0,15m"},{"id":"2","text":"LogiLink USB-HUB 13-Port m. Netzteil zwart kunsstof"}]}

JS 

  <script>
        $('.js-data-example-ajax').select2({
            ajax: {
                url: '/product/api/search',
                dataType: 'json',
            }
        });
    </script>

Как вернуть результаты JSON API на мою html-страницу?

Я попробовал это в JS.Я получаю Hello World в своем браузере.Но как я могу передать ответ JSON своему браузеру в виде таблицы? 

success: function (data) {
    $('#table_id').html("Hello <b>world</b>!");
}

Twig 

<table class="table table-hover table-responsive">
        <thead>
        <tr>
            <th>id</th>
            <th>Title</th>
            <th>SKU</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {% for product in products %}
            <tr>
                <td>
                    {{ product.id }}
                </td>
                <td>
                    {{ product.name }}
                </td>
                <td>
                    {{ product.sku }}
                </td>
                <td>
                    <a href="{{ path('app_product_getproduct', {'id': product.id}) }}" class="btn btn-success btn-sm" >
                        <span class="glyphicon glyphicon-pencil"></span>
                    </a>
                    <a href="{{ path('app_product_delete', {'id': product.id}) }}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
                        <span class="glyphicon glyphicon-trash"></span>
                    </a>

                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

Ответы [ 2 ]

2 голосов
/ 13 марта 2019

Это должно вернуть текстовый элемент из первой записи вашего ajax-запроса. 

$.ajax({
  url: "/product/api/search",
  success: (result) => {
    $("#table_id").html(result.results[0].text);
  }
});

Если вы получаете привет из вашей функции успеха, вам нужно использовать параметр data, который есть в вашей функции, он должен содержать ваш JSON. 

success: function (data) {
    $('#table_id').html(data.results[0].text);
}

Если вы хотите отсортировать таблицу с помощью jquery на основе входной строки, вы можете сделать это.

Я сделал mcve .У вас должен быть идентификатор для каждого продукта, который вы можете получить, используйте symphony, чтобы установить id="" с именем product + id, затем вы просто просматриваете свой ответ с данными и проверяете, содержит ли он отфильтрованную строку.

let data = {
  "results": [{
    "id": "1",
    "text": "LogiLink USB Sync-und oplaadkabel iPod und iPhone 0,15m"
  }, {
    "id": "2",
    "text": "LogiLink USB-HUB 13-Port m. Netzteil zwart kunsstof"
  }]
}

const filter = () => {
  const searchStr = document.getElementById("inputfield").value;
  data.results.forEach((result) => {
    document.getElementById("product" + result.id).style.display = "none";
    if (result.text.toLowerCase().includes(searchStr.toLowerCase())) {
      document.getElementById("product" + result.id).style.display = "block";
    }
  });
}
<input id="inputfield" />
<button onclick="filter()">filter</button>
<br /><br />

<table class="table table-hover table-responsive">
  <thead>
    <tr>
      <th>id</th>
      <th>Title</th>
      <th>SKU</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr id="product1">
      <td>
        1
      </td>
      <td>
        LogiLink USB Sync-und oplaadkabel iPod und iPhone 0,15m
      </td>
      <td>
        sku
      </td>
      <td>
        <a href="{{ path('app_product_getproduct', {'id': product.id}) }}" class="btn btn-success btn-sm">
          <span class="glyphicon glyphicon-pencil"></span>
        </a>
        <a href="{{ path('app_product_delete', {'id': product.id}) }}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
          <span class="glyphicon glyphicon-trash"></span>
        </a>

      </td>
    </tr>
    <tr id="product2">
      <td>
        2
      </td>
      <td>
        LogiLink USB-HUB 13-Port m. Netzteil zwart kunsstof
      </td>
      <td>
        sku2
      </td>
      <td>
        <a href="{{ path('app_product_getproduct', {'id': product.id}) }}" class="btn btn-success btn-sm">
          <span class="glyphicon glyphicon-pencil"></span>
        </a>
        <a href="{{ path('app_product_delete', {'id': product.id}) }}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
      </td>
    </tr>
  </tbody>
</table>
0 голосов
/ 13 марта 2019

Если ваша конечная точка поиска уже работает должным образом, то в вашем обратном вызове ajax вы можете выполнить итерации по следующим результатам: 

success: function (data) {
  for (result in data.results) {
    let newRow = '<tr><td>' + result.id + '</td><td>' + result.text + '</td></tr>';
    $('#table_id tbody').append(newRow);
  }
}
...