Using blade components and javascript

Question

I'm using Laravel, and I'm trying to use javascript to fill a list of users. The problem is that each entry of the list is based on a view, which I made in a Blade component:

pro_list_entry.blade.php:

@if( isset($pro_id) && isset($pro_avatar) && isset($pro_name))
 <a onclick='selectProfessional( {{ $pro_id }} , {{ $pro_avatar }}, {{ $pro_name }} )' style='cursor: pointer'>
 <div class='row'>
 <div class='col-4'>
 <img class='u-avatar rounded-circle' src='{{ $pro_avatar }}'>
 </div>
 <div class='col-8 d-flex align-items-center'>
 <h6 class='fm-wrapped-text'>{{ $pro_name }}</h6>
 </div>
 </div>
 </a>
 @endisset

Then I would like to feed all those components to the list using Javascript:

var listOfPhysicians = buildProfessionalListFromData(jsonData.professionals);
$('#pc_new_app_med_list').empty();
$('#pc_new_app_med_list').html(listOfPhysicians);

...

function buildProfessionalListFromData(data) {
 var list = "";
 if (data != null) {
 for (i = 0; i < data.length; i++) {
 var entry =
 "@component('patrons.clinic.shared.pro_list_entry')"
 + "@slot('pro_id')" + data[i].professional_id + "@endslot"
 + "@slot('pro_avatar') ../../user_uploads/avatars/" + data[i].avatar + "@endslot"
 + "@slot('pro_name')" + data[i].prefix + " " + data[i].first_name + " " + data[i].last_name + "@endslot"
 + "@endcomponent";
 list = list + entry;
 }
 }
 return list;
}

After a little research, I found that what I am trying to do is simply impossible.

Is there any other way to do this? Adding list entries, which are based on a view, and filling their data with javascript? Maybe I'm just not seeing the obvious solution.

Any help?

Thank you.

• Joe: You cannot do this using a blade component. Blade components are rendered on the server to HTML, you're trying to use client side dom manipulation to append server side rendered code to your page, this will never work.
• Luís Henriques: @Joe Yes. I know that :( As I said, "I found that what I am trying to do is simply impossible". I still need to solve the problem, though. Any alternatives?
• Rwd: For this I would suggest using something like vue.js (or angular or react). Where are you getting jsonData.professionals from? Is it something the user has uploaded?
• Luís Henriques: No. I'm retirving it with an Ajax call to the server (in PHP), which, in turn, retrieves and shapes the data from the database.

Answer 1

You can write your blade as usual like normal and render it using render() function.

In your controller method

 function foo()
 {
 $yourView= SELF::returnYourView();
 return json_encode(['yourView' => $yourView]);
 }
functionv returnYourView()
{
 return view('yourview')->render();
}

In your jquery

$('your-parent-dev').html(response.yourview);

• Luís Henriques: It's a good ideia, but not for this case in particular. You see, I want the controller to return just the data, not views, since this request is used for other purposes as well. But thank you for the suggestion.
• Luís Henriques: I ended up using this concept. It is, by far, the best way to solve this problem. Thanks.