Tengo un componente Livewire en donde hago una solicitud a una API con el verbo GET, lo que busco resolver es pasar el resultado que obtengo de una variable hacia otra. Estoy utilizando la variable de $response
para guardar la respuesta, esta es la que hace la solicitud a esta API, y como podrán ver tengo una propiedad pública la cuál le asigno un array vacío, es en esta última a la que busco pasarle la respuesta de la API y utilizarla en mi vista dentro de un foreach.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Support\Facades\Http;
class SearchDropDown extends Component
{
public $search;
public $searchResults = [];
public function updatedSearch($newValue)
{
$response = Http::get('http://thvid-api.herokuapp.com/videos/game/'.$this->search)->json();
$this->searchResults = $response;
}
public function render()
{
return view('livewire.search-drop-down');
}
}
En la vista Blade y mediante un campo de texto el usuario podrá escribir algo y simultáneamente la solicitud al servidor con el método GET se disparará y así el usuario podrá obtener los resultados en tiempo real.
Si escribo dd($response)
en la función y me voy a la vista y empiezo a escribir en el campo de búsqueda obtengo los datos correspondientes pero a manera de array.
No he podido mostrar los resultados dentro de la vista utilizando el foreach.
Componente de vista: livewire.search-drop-down
<input
wire:model.debounce.300ms="search"
id="search"
type="search"
autocomplete="off"
placeholder="Type game title or THPS player"
class="relative top-2 w-full text-white pl-8 p-2 text-sm bg-gray-600 rounded-lg placeholder-gray-400 placeholder-opacity-100"
>
Vista donde implemento el foreach
<ul class="h-auto rounded-md p-2 mt-4 mb-4">
@foreach($searchResults as $result)
<li class="w-full h-20 flex items-center px-2 space-x-4 mb-4
border-b-2 rounded-sm border-gray-500 border-opacity-40
hover:border-opacity-0 hover:rounded-b-2xl hover:bg-green-500 hover:bg-opacity-70
transition ease-in-out"
>
<img
class="p-2"
src="{{ $result['Thumbnail'] }}"
alt="search results"
>
<p class="text-sm font-extrabold ">{{ $result['Title'] }}</p>
<p class="text-sm">{{ $result['Game'] }}</p>
<p class="text-sm">{{ $result['newduration'] }}</p>
</li>
@endforeach
</ul>