Shopify Page not fetching Data from Json file

Technical Q&A
,

Topic summary

Problem: A Shopify theme page meant to display a random joke from a JSON file isn’t rendering any content.

Context:

  • A JSON file with jokes is placed in the theme’s assets.
  • HTML has placeholders: h2#joke-setup and p#joke-punchline inside a div#joke-container.
  • JavaScript uses fetch(“/jokes.json”), parses the response as JSON, selects a random item, and sets innerHTML for setup and punchline.
  • Errors, if any, would be logged via catch, but no console output is reported in the post.

Key details:

  • The code relies on the Fetch API to retrieve the JSON and basic DOM manipulation to display it.
  • Assumes the JSON file is directly accessible at the root path “/jokes.json”.

Status:

  • No solution or diagnosis provided yet; the author requests help.
  • Code snippet is central to understanding the issue; no images or attachments.

Open questions:

  • Is the asset path correct/accessible in Shopify?
  • Are there console/network errors (404, CORS, parse errors)?
  • Is the JSON structure matching expected properties (setup, punchline)?
Summarized with AI on January 29. AI used: gpt-5.
1

I am creating a page which will show random jokes to users. For this I have created a JSON file with jokes and placed it in assets section in the code section.

I am running the below code to fetch the jokes but it is not showing anything

Code:

Would love to get a solution for this.