#Advanced Array Interface for complex dataset

14 messages · Page 1 of 1 (latest)

frank flint
#

Hey guys, I am trying to create a list of Button Lists and Image Lists, both of which I have created classes for.

Using an interface, I want to take in an array something like this:

[
    ["button", "header text",
        [
            "button1",
            "button2",
        ]
    ],
    ["image", "header text",
        [
            ["imageText1, "imageSrc1"],
            ["imageText2, imageSrc2"],
        ]
    ]
]

The array would be called items.
If we are mapping each item from items, then:

item[0] is going to be whether it's a "button" or "image" list.
item[1] is the header text (in an <h2></h2>).

Map all elements of the item[2].
If item[0] is a "button" list:
    Each element in item[2] is a string mapped to a button's name.

If item[0] is an "image" list:
    Each element in item[2] is an array.
        item[2][0] is mapped to an image's name.
        item[2][1] is mapped to the src path where the image comes from.

I'm trying to use the following:

{items.map(function(item) {
    // Stuff here.
})}

And also, at the top of the document:

import Button from "/src/layouts/components/skills/parts/button.astro";
import Image from "/src/layouts/components/skills/parts/image.astro";

export interface Props {
    items: Array<Array<Array<Array<string>>>>;
}

const { items } = Astro.props as Props;

Is there a better dimension or datatypes I should use for the items array? How would I set up the items.map() to pull the items from the correct locations as described above? Please share your thoughts on this.

frank flint
#

Update: I think I see a way with an example such as:

const items = [
    {name: "Awesome", header: "header", names: [1, 2]},
]
#

I still don't know how I'd set up an items.map for something like that tho

visual rune
#

Ya I would change up the dataset, I tried writing a component out for this but it is very complicated having so may nested array with different types

frank flint
visual rune
#

Yes, you can do something like this: ```tsx
{ items.map((obj) => <>
{ Object.entries(obj).map(([key, val]) => {
return <span></span>
})}
</>)}

frank flint
frank flint
#

Instead of Array<Array<string>> which is brutally bad

frank flint
visual rune
#

For the second data type you can do ```ts
interface MyObj {
name: string;
header: string;
names: number[];
}

interface Props {
items: MyObj[]
}

frank flint
#

Makes sense, ty!

visual rune
frank flint