Data from within JSON Array not showing when Fetching in Alpine.js

Question

I am trying to fetch data from a (local) JSON file. I have no trouble accessing the first level of data within the JSON file (e.g. id, title, ingredients as a whole). However, the issue arises when I try to access/read/fetch the single ingredients.

By my understanding, x-for="ingredient in data.recipies.ingredients" should give me one instance of <p>TEST</p> for each ingredient per recipe. However, the output is empty. I am getting no console errors.

HTML/Alpine Markup:

<div x-data="data()">
  <template x-for="recipe in data.recipies">
    <div>
      <h3 x-text="recipe.title"></h3>
      <template x-for="ingredient in data.recipes.ingredients">
        <p>TEST</p>
      </template>
    </div>
  </template>
</div>

The JS file:

const data = () => {
    return {
        data: {
            recipies: [],
        },
        init() {
            fetch('src/recipies.json')
                .then((res) => {
                    return res.json();
                })
                .then((data) => {
                    this.data.recipies = Object.values(data)
                });
        },
    };
};

The JSON file:

{
    "aglioolio": {
        "id": 1,
        "title": "Aglio Olio + Chili",
        "ingredients": ["Spaghetti", "Olive oil", "Garlic", "Chili"]
    },
    "tortellinisoup": {
        "id": 2,
        "title": "Tortellini Soup",
        "ingredients": ["Tortellini", "Veggie Broth", "Chieves"]
    }
}

What happens if you replace your <template> tag with another tag? What's your reasoning for using it? It's not rendered, but meant to hold markup that may be used elsewhere. But you're not showing that here. dev.to/arafat4693/html-template-tag-explained-3859 — mykaf
– mykaf, Commented Apr 25 at 15:30
Shouldn't it be: x-for="ingredient in recipe.ingredients" ? — TUPKAP
– TUPKAP, Commented Apr 25 at 16:37
@TUPKAP Thank you very much, that was the mistake. I'm still learning. — Alex
– Alex, Commented Apr 25 at 17:49

Shahzad Khan · Accepted Answer · 2025-05-07 04:35:28Z

0

<div x-data="data()" x-init="init()">
  <template x-for="recipe in data.recipies" :key="recipe.id">
    <div>
      <h3 x-text="recipe.title"></h3>
      <template x-for="ingredient in recipe.ingredients" :key="ingredient">
        <p x-text="ingredient"></p>
      </template>
    </div>
  </template>
</div>

    const data = () => {
    return {
        data: {
            recipies: [],
        },
        init() {
            fetch('src/recipies.json')
                .then((res) => res.json())
                .then((data) => {
                    this.data.recipies = Object.values(data);
                });
        },
    };
};

answered May 7 at 4:35

Shahzad Khan

5303 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Data from within JSON Array not showing when Fetching in Alpine.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related