Svelte – matching two multidimensional arrays
It is more convenient to do data comparison on the backend – there will be no code clutter at the front. There are also advantages for the user – the result will appear on the page faster. However, at the front, you can also compare data from two multidimensional arrays. An example of how to map two arrays of data on Svelte…
Let’s start with two data arrays:
let allOperations = getFetch(‘get-all-operations /’);
let portfolio = getFetch(‘get-portfolio /’);
Let’s match the name from the first array with the name in the second array directly in the table:
{#await allOperations}
{:then allOperations}
{#each allOperations as operation}
<div class=“cell”>
{#await portfolio}
{:then portfolio}
{#each portfolio as share}
{#if operation.name === share.name}
<span>{share.price}span>
{/if}
{/each}
{/await}
div>
{/each}
{/await}
div>
What’s going on above:
#await allOperations – waiting for the first data array to be received from the backend
: then allOperations – if the data above is received, then
#each allOperations as operation – we break the data into components
#await portfolio – similarly expect the second data array
: then portfolio – if the data above is received, then
#each portfolio as share – we break the data into components
#if operation.name === share.name – we iterate over both arrays of data, comparing the names in them. If they match, print the current value of one of the arrays.
