Symfony JQuery response to HTML

Question

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>

How can I return the results of the JSON API to my html page ?

I tried this in the JS. I get the Hello World in my browser. But how can I pass the JSON response to my browser in a table form?

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>

Stephan Vierkant · Accepted Answer · 2021-07-22 13:27:03Z

2

This should return the text element from the first entry from your ajax request.

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

If you get hello world from your success function, you need to use the data parameter that your function has, that should contain your JSON.

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

If you want to sort the table with jquery based on an input string you can do this.

i have made a mcve. You need to have an id for every product that you can grab, use symfony to set an id="" called product + id then you just loop through your data response and check if it includes the filtered string.

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>

edited Jul 22, 2021 at 13:27

Stephan Vierkant

10.3k8 gold badges67 silver badges102 bronze badges

answered Mar 12, 2019 at 21:55

Nils Kähler

3,0211 gold badge24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user8928150 Over a year ago

Thx, it showing the first results but how can I show all the results? The API response is also showing all results of the table but I only want to get the selected/searched results not everything. For example, I can see in the console.log this id: "3" selected: true text: "LevelOne Switch 8x FE FEP-0811 123W 8xPoE+"

Nils Kähler Over a year ago

How would you like it to render out? you can use a for loop to iterate over all the responses, and add them to your html.

user8928150 Over a year ago

For example I have 100 results and want to only get the results which is selected or has the name 'iphone' in it. The results should be visible in HTML format. How can I iterate in JQuery ? I also have the table see the update, please.

Nils Kähler Over a year ago

if you only want the things that are selected, you need an variable that says they are selected in some form. and then you put an if (selected) {**do stuff**} inside your loop. if you want to test for "iPhone" you can test it by data.results[i].text.includes("iPhone"); that will be true if the text has "iPhone" in it.

user8928150 Over a year ago

Could you provide me an example for the selected stuf how to show and one for the results which shows results of some string?

programmer-man · Accepted Answer · 2019-03-13 08:13:28Z

0

If your search endpoint already works properly, then, in your ajax callback, you can iterate thru the results like this:

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);
  }
}

edited Mar 13, 2019 at 8:13

answered Mar 13, 2019 at 8:06

programmer-man

3851 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Symfony JQuery response to HTML

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related