Need Help With Javascript + Json - Topic

Member

Posts: 6,554

Joined: Feb 7 2018

Gold: 36.00

Nov 26 2019 11:01pm

It’s not much, but I’ll offer all my fg for a solution

So I'm stuck on something at the moment and wanting to see if someone can help me

Currently, I have 4 cards of trucks with the name of the truck, the image, and a short description. The goal is, when someone clicks on one of these truck cards, it will update the information + picture on the info-holder section.
My current solution is, everything is hardcoded into the HTML which I don't like at all. I was wondering if this could be done using a json file + javascript to display the information dynamically when a user clicks a card. Right now I would fill in the json data manually.

Info contains:

An Image of the truck (url)
Size information
Suitable for
More information

Currently I'm unsure how I would even approach this, so any help would be great

The markup is very rough just for demonstration purposes.

Code

<div class="info-holder">
<img src="https://www.tatamotors.com/wp-content/uploads/2018/01/19065024/prima.jpg" alt="">
<div class="size info-card">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt sem nisl, a tristique turpis suscipit vitae. Quisque euismod, dui sit amet semper tempus, mauris elit varius diam</p>
</div>
<div class="weight info-card">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt sem nisl, a tristique turpis suscipit vitae. Quisque euismod, dui sit amet semper tempus, mauris elit varius diam</p>
</div>
<div class="suitable-for info-card">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt sem nisl, a tristique turpis suscipit vitae. Quisque euismod, dui sit amet semper tempus, mauris elit varius diam</p>
</div>
<div class="info info-card">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt sem nisl, a tristique turpis suscipit vitae. Quisque euismod, dui sit amet semper tempus, mauris elit varius diam</p>
</div>
</div>
<div class="cards">
<div class="card">
<img src="https://www.tatamotors.com/wp-content/uploads/2018/01/19065024/prima.jpg" alt="">
<h2>Truck one</h2>
<p>Truck description</p>
</div>
<div class="card">
<img src="https://www.tatamotors.com/wp-content/uploads/2018/01/19065024/prima.jpg" alt="">
<h2>Truck one</h2>
<p>Truck description</p>
</div>
<div class="card">
<img src="https://www.tatamotors.com/wp-content/uploads/2018/01/19065024/prima.jpg" alt="">
<h2>Truck one</h2>
<p>Truck description</p>
</div>
<div class="card">
<img src="https://www.tatamotors.com/wp-content/uploads/2018/01/19065024/prima.jpg" alt="">
<h2>Truck one</h2>
<p>Truck description</p>
</div>
</div>

Code

* {
box-sizing: border-box;

}

.info-holder {
width: 100%;
border: 1px solid green;
padding: 40px;
height: 500px;
display: relative;
}
.info-holder img {
display: block;
margin: 0 auto;
}

.cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 16px;
margin-top: 40px;
}

.card {
border: 1px solid green;
padding: 20px;
}
.card img {
width: 100%
}

.info-card {
width: 300px;
position: absolute;
border: 1px dashed red;
}

.info-card:nth-of-type(1) {
top: 10%;
}
.info-card:nth-of-type(2) {
bottom: 40%;
}
.info-card:nth-of-type(3) {
top: 10%;
right: 4%;
}
.info-card:nth-of-type(4) {
bottom: 40%;
right: 4%;
}

Here is a screenshot of the current page to give you an idea
https://imgur.com/a/Bckee6w

This post was edited by Strickland on Nov 26 2019 11:06pm

frixionburne

Member

Posts: 2,619

Joined: May 21 2004

Gold: 21,934.00

Nov 26 2019 11:26pm

Easy. You want jquery, reactJS, angular, or vanilla JS?

The basic gist is to make an ajax request to pull the json file contents back and parse it, then use some sort of templating/JQ/real frontend framework to populate that data.

You'd need to be running some sort of web server for this in order to make those requests to pull back your json.

This post was edited by frixionburne on Nov 26 2019 11:28pm

Strickland

Member

Posts: 6,554

Joined: Feb 7 2018

Gold: 36.00

Nov 26 2019 11:45pm

Quote (frixionburne @ Nov 27 2019 06:26pm)

Hi thanks for a speedy reply!

Right now I am working with vanillaJS

Can this also be achieved without the need for a server? This is just a learning experiment right now, so I'm working locally, without a server connection

frixionburne

Member

Posts: 2,619

Joined: May 21 2004

Gold: 21,934.00

Nov 26 2019 11:51pm

Quote (Strickland @ Nov 27 2019 01:45am)

You won't be able to properly consume a json file without being able to make an xhr request, but you can just hardcode it in the html (the json object) for the sake of academia. Give me a few mins and I'll get something working as an example.

This post was edited by frixionburne on Nov 26 2019 11:51pm

Strickland

Member

Posts: 6,554

Joined: Feb 7 2018

Gold: 36.00

Nov 26 2019 11:54pm

Quote (frixionburne @ Nov 27 2019 06:51pm)

You won't be able to properly consume a json file without being able to make an xhr request, but you can just hardcode it in the html (the json object) for the sake of academia.

Yeah that would work fine for this!

I’ll look further into JSON and Ajax when the course I’m following gets to it

frixionburne

Member

Posts: 2,619

Joined: May 21 2004

Gold: 21,934.00

Nov 27 2019 12:14am

Here's some code that hopefully will give you some ideas. This is a little more verbose than I'd usually write it for the sake of clarity.

Code

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
</head>

<body>
<div id="cards"></div>
<div id="card-template" style="display: none;">
<div class="card">
<img src="{{image}}" alt="">
<h2>{{title}}</h2>
<p>{{description}}</p>
</div>
</div>

<script>
const data = [
{ image: 'https://www.tatamotors.com/wp-content/uploads/2018/01/19065024/prima.jpg', title: 'Truck One', description: 'Truck Description'},
{ image: 'https://www.tatamotors.com/wp-content/uploads/2018/01/19065024/prima.jpg', title: 'Truck Two', description: 'Truck Description'},
{ image: 'https://www.tatamotors.com/wp-content/uploads/2018/01/19065024/prima.jpg', title: 'Truck Three', description: 'Truck Description'}
];

const cards = [];

data.forEach(item => {
const template = document.getElementById("card-template").innerHTML;
let content = template.replace('{{image}}', item.image);
content = content.replace('{{title}}', item.title);
content = content.replace('{{description}}', item.description);
cards.push(content);
});

let content = "";
cards.forEach(card => {
content = content.concat(card);
});

document.getElementById("cards").innerHTML = content;
</script>
</body>
</html>

This post was edited by frixionburne on Nov 27 2019 12:18am

Strickland

Member

Posts: 6,554

Joined: Feb 7 2018

Gold: 36.00

Nov 27 2019 12:28am

Quote (frixionburne @ Nov 27 2019 07:14pm)

Here's some code that hopefully will give you some ideas. This is a little more verbose than I'd usually write it for the sake of clarity.

Ahh thank you!

I noticed there is a card-template there with a style none. Does this element serve a purpose in this example? Right now it displays {{title}}, {{description}} and a broken image link when "display: none;" is disabled

I'm going to try populate card-template with the information from "card" when clicked

frixionburne

Member

Posts: 2,619

Joined: May 21 2004

Gold: 21,934.00

Nov 27 2019 12:32am

That display:none is there because the javascript is using that node as a template for replicating into your multiple product cards. It's hidden on purpose because it's never shown. Note the section where .replace() is being called. The '{{}}' stuff is just an easy way to wrap replacement macros so they're easy to find.

This post was edited by frixionburne on Nov 27 2019 12:32am

Strickland

Member

Posts: 6,554

Joined: Feb 7 2018

Gold: 36.00

Nov 27 2019 12:34am

Quote (frixionburne @ Nov 27 2019 07:32pm)

Okay understood! I'll post back here with my results after I do some testing

Thank you again

Go Back To Programming & Development Topic List