display axios data in svelte

Question

I have two questions:

The first is, after fetching data from an API with axios, how do I display it in my frontend and how do I play with it to look how I want ? For example I call a bulk of data and I want it to fit in a dropdown menu.

And second question, related to the first, let's say I have a route file(for a sapper project) that has a component <Dashboard />. Inside this dashboard component I have two components called <BestOf /> and <History />. I need to call the api in the route file, but display the data in the component that is not on the route file. How can I do this ?

If I try to do <Dashboard {...variableWithAxiosData} /> in the route file how do I get the data to reach the right component inside of dashboard between <BestOf /> and <History /> ?

I'm not sure it is clear, but if you understood please feel free to give any advice, and if it is not clear let me know what I can clarify.

Cheers

Answer 1

If you know what are the data you are getting from variableWithAxiosData and what to be used in BestOf and History, you can do the following:

// Dashboard.svelte
<script>
  export let best;
  export let history;
  export let otherProps;
</script>

<BestOf {best} />
<History {history} />

On the other hand, you could pass down everything from the props, or some of the props to <BestOf /> and <History />

// Dashboard.svelte
// if variableWithAxiosData = { foo: 1, bar: 2 }
<script>
  export let foo;
</script>

<BestOf {...$$props} />
<!-- equivalent to -->
<BestOf foo={1} bar={2} />

<History {...$$restProps} />
<!-- equivalent to -->
<BestOf bar={2} />