Svelte input bind JSON array - arrays

Question

I followed this svelte tutorial and I wonder if I could do this group binding to a JSON array instead of simple array, for example I would like to do a planets selector:
<script>
let planets = [{
name: 'Jupiter',
enable: false
},
{
name: 'Saturn',
enable: false
},
{
name: 'Uran',
enable: false
},
{
name: 'Neptun',
enable: false
},
{
name: 'Pluto',
enable: true
},
];
$: planets, console.log(planets)
</script>
{#each planets as planet}
<label>
<input type=checkbox bind:group={planets} name={planet.name} value={planet}>
{planet.name}
</label>
{/each}
This is a REPL. I wonder if there is a way how to properly bind JSON array (enable array field with inputs value) in svelte each loop. Now it pops out with each item as you click as you can see in REPL's console.log and I would like just to uncheck it.
With bind:checked property displays proper way
<input type=checkbox bind:checked={planet.enable} value={planet}>
But this does not change array.enable value on click. Can I achieve responsibility of planets array here?

Answer 1

I think the problem is that you set the value to planet. When you remove this and only use the checked property, then the array updates with the proper value.
<script>
let planets = [{
name: 'Jupiter',
enable: false,
},
{
name: 'Saturn',
enable: false
},
{
name: 'Uran',
enable: false
},
{
name: 'Neptun',
enable: false
},
{
name: 'Pluto',
enable: true
},
];
$: planets, console.log(planets)
</script>
{#each planets as planet}
<label>
<input type=checkbox bind:checked={planet.enable}>
{planet.name}
</label>
{/each}
You can checkout my REPL.
Here is a screenshot from the update: