Displaying json contents in a tile grid format with tailwind and jquery.

MagicCrayon9342

So, at https://github.com/get-catalyst/Flavors/ I have json files. In every flavor folder there is a json file named fork.json. I need to display every item in flavorName/fork.json with the icon as the icon, the description as the description, and the name as the name (description section on website needs to be the value in the json). In tiles with jquery and tailwind. Similar to https://www.electronjs.org/apps, how should I do this?

uwv

flex.

i use arch linux (btw) with the linux zen kernel and enjoy writing silly things in silly languages using silly frameworks

MagicCrayon9342

uwv wrote:
flex.

The issue isn't the cards, its the json => visible data on a web page

skymover1239

MagicCrayon9342 wrote:
uwv wrote:
flex.
The issue isn't the cards, its the json => visible data on a web page

I think (I'm not an expert on this) but you should just be able to use the fetch API and display the contents from that.

John 3:16 wrote:
For God so loved the world that he gave his one and only Son that whoever believes in him shall not perish but have eternal life

First time a moderator got ninjaed??
500 Posts
Current Mainline projects
AquaCSS - A CSS framework.
Ink - An editor that does, lots of things.

Jeffalo

MagicCrayon9342 wrote:
uwv wrote:
flex.
The issue isn't the cards, its the json => visible data on a web page

is it any different to rendering any other data? first fetch the json, then iterate over the json and add corresponding html elements to the page using document.createElement or something. might be even easier with jQuery.

I discovered Scratch in 2015 and created games and animations. From 2020 to 2023, I worked on Scratch browser extensions, found security vulnerabilities, and maintained a forum search engine called ocular. In the summer of 2024, I was an engineering intern with the Scratch Team. Now, I'm ready to finish my last year of high school. Scratch on!

ZZC12345

Jeffalo wrote:
MagicCrayon9342 wrote:
uwv wrote:
flex.
The issue isn't the cards, its the json => visible data on a web page
is it any different to rendering any other data? first fetch the json, then iterate over the json and add corresponding html elements to the page using document.createElement or something. might be even easier with jQuery.

Oh, no! Not jQuery! XD

Assuming a card structure like this:

<template id="card-template">
  <a class="card">
    <img class="card__icon" />
    <h1 class="card__header"></h1>
    <p class="card__description"></p>
  </a>
</template>

You can use:

// const container: HTMLElement;
// const data: CatalystForkJson[];
const template = document.getElementById("card-template");
for (const fork of data) {
  const newElement = template.content.cloneNode(true);
  newElement.href = `https://github.com/${fork.repo}`;
  newElement.querySelector(".card__icon").src = fork.icon;
  newElement.querySelector(".card__header").textContent = fork.name;
  newElement.querySelector(".card__description").textContent = fork.desc;
  container.appendChild(newElement);
}

Please do not use this in Catalyst. It's just an example and is really bad; if you can make a browser, you can surely make a list of cards. Also, when in doubt: Google => StackOverflow. “display list of cards with json data” turns up a well-written question and answer on StackOverflow to copy and paste from, especially if you're using jQuery.
With jQuery: https://stackoverflow.com/a/65969709
Without jQuery: https://stackoverflow.com/a/12265800

This is my signature. Go check out my GitHub if you want to!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Make sure to check out these cool projects, written in real code! (outdated, sorry)
Aviate - Itinerary - Scratch Auth - Orange OS Linux Distro - ocular - Leopard - PyHelp - My GitHub

MagicCrayon9342

ZZC12345 wrote:
Jeffalo wrote:
MagicCrayon9342 wrote:
uwv wrote:
flex.
The issue isn't the cards, its the json => visible data on a web page
is it any different to rendering any other data? first fetch the json, then iterate over the json and add corresponding html elements to the page using document.createElement or something. might be even easier with jQuery.
Oh, no! Not jQuery! XD

Assuming a card structure like this:
<template id="card-template">
  <a class="card">
    <img class="card__icon" />
    <h1 class="card__header"></h1>
    <p class="card__description"></p>
  </a>
</template>
You can use:
// const container: HTMLElement;
// const data: CatalystForkJson[];
const template = document.getElementById("card-template");
for (const fork of data) {
  const newElement = template.content.cloneNode(true);
  newElement.href = `https://github.com/${fork.repo}`;
  newElement.querySelector(".card__icon").src = fork.icon;
  newElement.querySelector(".card__header").textContent = fork.name;
  newElement.querySelector(".card__description").textContent = fork.desc;
  container.appendChild(newElement);
}
Please do not use this in Catalyst. It's just an example and is really bad; if you can make a browser, you can surely make a list of cards. Also, when in doubt: Google => StackOverflow. “display list of cards with json data” turns up a well-written question and answer on StackOverflow to copy and paste from, especially if you're using jQuery.
With jQuery: https://stackoverflow.com/a/65969709
Without jQuery: https://stackoverflow.com/a/12265800

May I ask why #1, there's framework code in this.

can't {fork.repo} only be used in React?

and #2 why the excessive underscores in classes

Mrcomputer1

MagicCrayon9342 wrote:
ZZC12345 wrote:
Jeffalo wrote:
snip
Oh, no! Not jQuery! XD

Assuming a card structure like this:
<template id="card-template">
  <a class="card">
    <img class="card__icon" />
    <h1 class="card__header"></h1>
    <p class="card__description"></p>
  </a>
</template>
You can use:
// const container: HTMLElement;
// const data: CatalystForkJson[];
const template = document.getElementById("card-template");
for (const fork of data) {
  const newElement = template.content.cloneNode(true);
  newElement.href = `https://github.com/${fork.repo}`;
  newElement.querySelector(".card__icon").src = fork.icon;
  newElement.querySelector(".card__header").textContent = fork.name;
  newElement.querySelector(".card__description").textContent = fork.desc;
  container.appendChild(newElement);
}
Please do not use this in Catalyst. It's just an example and is really bad; if you can make a browser, you can surely make a list of cards. Also, when in doubt: Google => StackOverflow. “display list of cards with json data” turns up a well-written question and answer on StackOverflow to copy and paste from, especially if you're using jQuery.
With jQuery: https://stackoverflow.com/a/65969709
Without jQuery: https://stackoverflow.com/a/12265800
May I ask why #1, there's framework code in this.
can't {fork.repo} only be used in React?
and #2 why the excessive underscores in classes

#1: That isn't React, that's a template literal (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). Also, React is just “{fork.repo}”, a template literal is “${fork.repo}”.

My Profile / My User Page / My Talk Page / My 3.0 and 2.0 Modding Tutorials
——————–
Progress bar to 1000+ Posts - Image might not be up to date

——————–
My browser / operating system: Windows NT 10.0 (Windows 11 - 23H2), Firefox 131.0b9
——————–
My ScratchX Extensions——–If you like this post, give me an internet!——–Sharp Scratch Mod

ZZC12345

MagicCrayon9342 wrote:
ZZC12345 wrote:
Jeffalo wrote:
MagicCrayon9342 wrote:
uwv wrote:
flex.
The issue isn't the cards, its the json => visible data on a web page
is it any different to rendering any other data? first fetch the json, then iterate over the json and add corresponding html elements to the page using document.createElement or something. might be even easier with jQuery.
Oh, no! Not jQuery! XD

Assuming a card structure like this:
<template id="card-template">
  <a class="card">
    <img class="card__icon" />
    <h1 class="card__header"></h1>
    <p class="card__description"></p>
  </a>
</template>
You can use:
// const container: HTMLElement;
// const data: CatalystForkJson[];
const template = document.getElementById("card-template");
for (const fork of data) {
  const newElement = template.content.cloneNode(true);
  newElement.href = `https://github.com/${fork.repo}`;
  newElement.querySelector(".card__icon").src = fork.icon;
  newElement.querySelector(".card__header").textContent = fork.name;
  newElement.querySelector(".card__description").textContent = fork.desc;
  container.appendChild(newElement);
}
Please do not use this in Catalyst. It's just an example and is really bad; if you can make a browser, you can surely make a list of cards. Also, when in doubt: Google => StackOverflow. “display list of cards with json data” turns up a well-written question and answer on StackOverflow to copy and paste from, especially if you're using jQuery.
With jQuery: https://stackoverflow.com/a/65969709
Without jQuery: https://stackoverflow.com/a/12265800
May I ask why #1, there's framework code in this.
can't {fork.repo} only be used in React?
and #2 why the excessive underscores in classes

#1, that's ES still, it's template literals and note the $:

const thing = "world";
`hello ${thing}`;

#2: It's the BEM naming convention. Google it.

This is my signature. Go check out my GitHub if you want to!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Make sure to check out these cool projects, written in real code! (outdated, sorry)
Aviate - Itinerary - Scratch Auth - Orange OS Linux Distro - ocular - Leopard - PyHelp - My GitHub

Discuss Scratch