1

I have build a website that is a cook book. I want to store recipies as data in one json file. What is the right code to import parts of that json file in to another file (fx starters.astro)

So to specyfy my question(s):

  1. Where do I store my json file?
  2. How do I import?
  3. Where do I import?

My goal is when I click starters > something it will take me to blog post layout with data suplied from json.

image

Juliano Alves
  • 2,006
  • 4
  • 35
  • 37
Kesse
  • 11
  • 1

1 Answers1

1
  1. Where do I store my json file?

Exactly where you store your JSON file is up to you. I’d suggest something like src/recipes/starters.json or src/data/starters.json as an example.

  1. How do I import?
  2. Where do I import?

Astro supports importing JSON in component frontmatter. For example you might do something like this:

---
// src/pages/starters.astro

import starters from '../recipes/starters.json';
---

{starters.map((starter) => <div>{starter.title}</div>)}

(This example assumes a JSON file something like [{ "title": "Soup" }, { "title": "Olives" }], but yours will probably be more complex and do more with each starter object.)

swithinbank
  • 1,127
  • 1
  • 6
  • 15
  • How does this route take SEO into account? The OP wouldn't have a static page created that google could crawl, correct? Could the JSON be broken up so that there would only be one recipe per json file? – dmayo Jul 29 '23 at 20:34