how to wrap html into javascript variable and pass to blade?

Question

In an ajax on success function I am receiving some value and I want to pass that value into a div

here is the div in blade view where I want to pass value

<div id = "demo">
</div>

here is my javascript code where I am receiving values

            success: function (data) {
            var getsellerreport = data.getsellerreport;
            var output = '<tbody>
            @foreach($getsellerreport as $preport)
              <tr>
                <td>{{ $preport['product_id'] }}</td>
                </tr>
           @endforeach
           </tbody>';
            document.getElementById("demo").innerHTML = output;
             }

According to this code I am using output= 'html' to store html and trying to pass output in demo but it is not working.

Can someone help me? how can I pass html from script to blade view?

George Wang · Accepted Answer · 2021-01-15 14:14:06Z

1

The thing is Blade is not what you can use in JavaScript or HTML directly. It won't work. If you need them in JavaScript, you need to write code in JavaScript way.

Here's an example how it can work with mock data.

$(document).ready(function() {
  $.get({
    url: 'https://gorest.co.in/public-api/users',
    success: function (data) {
      // var getsellerreport = data.getsellerreport;
      var getsellerreport = [{
        product_id: 1, product_name: 'Product 1',
      }, {
        product_id: 2, product_name: 'Product 2',
      }, {
        product_id: 3, product_name: 'Product 3',
      }];
      var output = `<tbody>
        ${getsellerreport.map(function(preport) {
          return `<tr><td>${preport.product_id} - ${preport.product_name}</td><tr>`;
        }).join('\n')}
      </tbody>`;
      document.getElementById("demo").innerHTML = output;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="demo">
</table>

If you need production id and name at the same time then

$(document).ready(function() {
  $.get({
    url: 'https://gorest.co.in/public-api/users',
    success: function (data) {
      // var getsellerreport = data.getsellerreport;
      var getsellerreport = [{
        product_id: 1,
      }, {
        product_id: 2,
      }, {
        product_id: 3,
      }];
      var output = `<tbody>
        ${getsellerreport.map(function(preport) {
          return `<tr><td>${preport.product_id} - ${preport.product_name}</td><tr>`;
        }).join('\n')}
      </tbody>`;
      document.getElementById("demo").innerHTML = output;
    }
  });
});

edited Jan 15, 2021 at 14:14

answered Jan 14, 2021 at 8:06

George Wang

4512 silver badges12 bronze badges

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

2 Comments

Hamza Qureshi Over a year ago

i am also getting product name using model preport->product->name do u have any experience how i can gat taht product name into script?

George Wang Over a year ago

no problem. just do whatever you want written inside of map function.

Collectives™ on Stack Overflow

how to wrap html into javascript variable and pass to blade?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related