add support for looping over translations

[ivanhofer]

request from discord:

Hi, I'm using the sdk-js plugin with the json plugin. How can I loop through an array of objects in my markup? Say for example we have this locale file:

{
    "faqs": [
        {
            "question": "Question 1?",
            "answer": "Answer 1"
        },
        {
            "question": "Question 2?",
            "answer": "Answer 2"
        },
        {
            "question": "Question 3?",
            "answer": "Answer 3"
        }
    ]
}

And I want to display them like this:

<script>
    import { i } from '@inlang/sdk-js'

    let FAQs = i('faqs')
</script>

<Accordion>
    {#each FAQs as { question, answer }, i}
        <AccordionItem open={i === 0}>
            <svelte:fragment slot="summary">
                <h3>{question}</h3>
            </svelte:fragment>
            <svelte:fragment slot="content">
                <p>{answer}</p>
            </svelte:fragment>
        </AccordionItem>
    {/each}
</Accordion>

The thing is, this doesn't work. Is there a way to access the length of an array of locales? I might not know how many items are.

[NilsJacobsen]

Our plugins are not supporting arrays. That would produce several challenges:

• How to display it in keys
• How to access a particular message
• How to show inline annotations/ extract this?
• Is it the right way to add a translation to inlang to have an additional iteration in the frontend?

You could also have like a data array in the frontend that consumes the translations.

<script>
    import { i } from '@inlang/sdk-js'

    let FAQs = [
        { 
            question: i('faq1_question'),
            answer: i('faq1_answer')
        },
        {
            question: i('faq2_question'),
            answer: i('faq2_answer')
        }
    ]
</script>

<Accordion>
    {#each FAQs as { question, answer }, i}
        <AccordionItem open={i === 0}>
            <svelte:fragment slot="summary">
                <h3>{question}</h3>
            </svelte:fragment>
            <svelte:fragment slot="content">
                <p>{answer}</p>
            </svelte:fragment>
        </AccordionItem>
    {/each}
</Accordion>

The flow would be to hardcode it first and check the frontend. Then extract it and use machineTranslate or pass it to Translators.

Can you think about more use cases?
Do you think we miss an opportunity by not supporting?

[ivanhofer]

Another request for that feature: https://discord.com/channels/897438559458430986/1083724234142011392/1138707723312169032

[samuelstroschein]

Shall we move this to feature requests in discussions?

[ivanhofer]

done