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.

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.

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.

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

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}”.

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.

Discuss Scratch