How to add / pull HTML data to a javascript object ?

Question

0.00/5 (No votes)

See more:

I am building a grid of link cards corresponding to services, I want the content from this grid to shift aside when each card is clicked to get the description of each service. Therefore I am building a matrix of object containing the content of all cards and I would like to know how to handle the html body. Instead of having a long string added directly to the object, I am thinking about adding a method that could pull the data from a separate html file through the DOM as shown below. But maybe there is even a better way of doing this, Here is what I built so far:

The article describing each service contains a title, some paragraphs, some images and bullet-point lists which need to be targeted for styling. This is why I am thinking it should be better to pull the data from a separate html file. Is this the most efficient way to do this ?

What I have tried:

JavaScript

const serviceContent = [
  {
    id: 1,
    title: "Physiotherapy",
    image: URL('../../assets/images/servicesimg/physiotherapy.jpg'),
    serviceText() {
      return document.getElementById("physiotherapy")
    }
  },
  {
    id: 2,
    title: "Needling / Instramuscular Stimulation (IMS)",
    image: URL('../../assets/images/servicesimg/ims1.jpg'),
    serviceText() {
      return document.getElementById("ims")
    }
  },
  {
    id: 3,
    title: "Acupuncture",
    image: URL('../../assets/images/servicesimg/acupuncture.jpg'),
    serviceText() {
      return document.getElementById("acupuncture")
    }
  },
  {
    id: 4,
    title: "Graston Technique",
    image: URL('../../assets/images/servicesimg/Graston.jpg'),
    serviceText() {
      return document.getElementById("graston")
    }
  },
  {
    id: 5,
    title: "Spinal Decompression Work",
    image: URL('../../assets/images/servicesimg/'),
    serviceText() {
      return document.getElementById("spinal-decompression")
    }
  }
]

Posted 12-May-22 4:33am

Damian Roiz

Updated 13-May-22 23:13pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 15627495 · Answer 1 · 2022-05-13T23:12:00

Hello Damianroiz !

as far as I understand your request : you want a "notification feature" , am I right ?
when users click on one only grid box, a notification will appears. isn't it ?

to achieve this feature :
- define your container with html tag

HTML

"<div id="myNotification"> purposes will be injected here </div>"

- use css to hide it. "display:hidden;" will suits.

to push it on foreground, you have the z-index parameter : 0 is ground , 1 is above , 500 is above again and so and so , it's layer for your html page. [ 0, 1, 500 level ]

then use animate with css to act on the 'div' to reveal it, to make it move, then to hide it.
a timer can help you to proceed ( animate have time settings through the animation too )

About your code :

you have build a constant Array , which type is "mixed array" in JS ( several contents and type of data in the array ).
API like JQuery are mixed array too, there are functions, datas , few types , media contents in.
Js handles that perfectly , it's "low Type" gain.

note that you redefine "serviceText()" every slot in your array.
using one input parameter your can have it written just one time.

It's close to JSON resource operating.

your array, as database, can exist without the function in.

and a for (loop) will fetch the array and pick all datas .

elements missing :
the base of your grid :
for every box : onclick('PULL_NOTIFICATION(theRowId)');

on a click :
prepare the "div"
populate with 'contents' from the array
launch the notification animate.
empty the "div" for a clean memory management and to avoid merging of our datas in the "div".