Home > Mobile >  How to generate an array of objects in Alpine.data with Livewire Eloquent collection and Adding prop
How to generate an array of objects in Alpine.data with Livewire Eloquent collection and Adding prop

Time:03-29

and thanks for your attention and help,

I have a Collection in my livewire controller. This collection contains a list of players, with some properties : here we will just focus on id and name. So we can imagine that we have 3 players in the collection :

Players[0] : 'id'=>1, 'name'=>'Yann';
Players[1] : 'id'=>2, 'name'=>'Robert';
Players[2] : 'id'=>3, 'name'=>'Jessica';

I need to get these players in my alpine data. I can easily get these players in Alpine with the @js method :

window.addEventListener('alpine:init', () => {
        Alpine.data('data', () => ({
            players: @js($players),
        }))
    })

So, now I have in my alpine.data :

players: [
               { id: 1, name: 'Yann' },
               { id: 2, name: 'Robert' },
               { id: 3, name: 'Jessica' },
    ]

Now I can easily display the players in my html with a template x-for :

<template x-for="player in players">
    <p x-text="player.name"></p>
</template>

But I want to add some additionnal properties in each player object. Those properties will be updated in front depending user's actions. I would like to get something like this :

players: [
              { id: 1, name: 'Yann', touched20: 0, touched15: 0 },
              { id: 2, name: 'Robert', touched20: 0, touched15: 0 },
              { id: 3, name: 'Jessica', touched20: 0, touched15: 0 },
   ]

All additionnal properties are the same for each object in the array, so I imagine i could use a foreach loop to put them in the objects. But I can't see and don't understand how i can include a loop in my alpine.data script to do this.

Anyone could help me ?

CodePudding user response:

I edit my question because I found a solution :

I just make a loopPlayers function outside of my alpine data and call this function in the alpine data :

function loopPlayers() {
            let players = [];
            const livewirePlayers = @js($players);
            livewirePlayers.forEach(element => {
                players.push(element);
            });

            players.forEach(function(element) {
                element.touched15 = 0;
                
            })
            return players;
        }

And in alpine.data :

players: loopPlayers(),

Now I have my collection of players from my livewire controller & I have new properties for each element of the collection in the js data

That was easy, as usual I guess :)

  • Related