What's the best way to add HTML to a js matrix of objects?

[damianroiz]

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 ?

Here is what I tried…

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")
    }
  }
]

[lasjorg]

@damianroiz

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.

Why though?

The array of objects is like static API data. You should keep all the data inside that data structure.

[damianroiz]

Because the data is a whole html article with titles, bullet lists and other tags that I want to target for styling

[eoja]

Perhaps I misunderstand what you are doing, but why not add the content for the paragraphs, lists etc., (all the data for the article) to each object in serviceObject? It sounds like they will all have the same format.

I’m guessing you are iterating over serviceObject creating the elements for the cards, so why not do the same for the article?

[lasjorg]

I’m not sure I understand. Where is this data coming from, are you not creating it?

Let’s take a news API that gives you news articles. It will have a title, subtitle, article content, the author, the date, and so on. You would use that data to construct the page. The data is the content and the HTML elements are used to format the content. The API data will not and should not contain format information, only the data. Saving the data with the formating would be polluting the data.

[damianroiz]

To help make myself understand better, I am trying to replicate this webpage with a new format using just react, I want the content underneath the grid to change every time the user hovers / clicks on each card element. So far it is working but I cannot get more than one paragraph displayed, if added directly into the object matrix, I need the object to take all content including title, subtitles, paragraphs, lists and images.

[lasjorg]

I still don’t see why you would want to pull the HTML from another page, I’d say even more so if you are using React. Using HTML from a static page to be used as JSX just seems weird and unmaintainable.

Don’t particularly see much benefit to taking a data-driven approach for this layout. If the layouts were more similar, then you might pass props to the component and have the layout adjust slightly to whatever props are passed to it. But I think it will very quickly become an over-abstraction and you are better off using separate components for each layout.

You can still pull in data to be used as content for each component just as if it was coming from an API or database. But I wouldn’t go out of my way to make it work like that because like I said I’m not sure I really see much point in doing so. It’s not like you need to map an array of objects with this layout as it’s not a list. When using React you also won’t load all the content and hide/show it using CSS, you will conditionally render the components as needed so you don’t need to load all the content at once.

[damianroiz]

This is what the first id would look like if I add html content directly (by typing it) into the object, I have a lot of content to add so I am trying to find a way to navigate through this array of objects easier, as you can see in “id: 2” I am adding a method to pull data from an html file through the dom but some reason this is not rendering on the website

export const servicesdata = [
  {
    id: 1,
    title: "Physiotherapy",
    image: "https://atriumphysiotherapy.com/images/stretching.jpg",
    descriptionp1:
      "Our physiotherapists are highly-educated experts in physical function, movement and mobility. They have advanced knowledge of how the human body moves and what stops it moving and use specialized hands-on treatment to restore, maintain and maximize optimal function and quality of life.",
    descriptionp2:
      "Our physiotherapists assists, diagnose and treat physical symptoms and limited movement caused by injury, aging, disability, or medical condition. They help patients understand what’s causing their condition, and work with them to restore, maintain and maximize movement, flexibility and physical independence.",
    descriptionp3:
      "Our physiotherapists develop customized treatment plans that help patients take back control. They teach patients how to restore, maintain and/or maximize movement, reduce pain, and manage any chronic symptoms.",
    descriptionp4:
      "Our physiotherapists excel in the treatment of many conditions: back pain/injury, whiplash, pregnancy-related muscle/joint issues, urinary incontinence and vertigo to name a few. They also help patients manage symptoms of chronic conditions like arthritis and chronic pain.",
    descriptionp5:
      "Our physiotherapists help patients who may have otherwise tried temporary (e.g., prescription drugs) or more invasive methods (e.g., surgery) to manage their condition. They use individualized therapeutic exercise, manual therapy and other treatment techniques.",
    descriptionp6:
      "Through physiotherapy, many patients are able to recover unrestricted movement which promotes the kind of physical independence necessary for a normal lifestyle and work. When it comes to assessing and treating people with movement problems, the services of a physiotherapist are often essential.",
    image: "https://atriumphysiotherapy.com/images/stretching.jpg",
    subtitle: "What Can I Expect During My First Appointment?",
  },
  {
    id: 2,
    title: "123",
    image: "../../assets/images/servicesimg/physiotherapy.jpg",
    content: information = () => document.getElementById('physiotherapy')
 
  },]

[lasjorg]

You should create an example on StackBlitz or CodeSandbox.

@damianroiz

as you can see in “id: 2” I am adding a method to pull data from an html file

That is just querying for some element. If that element is on a different page it won’t find it. You can load in HTML files and then extract elements from them. But I’m still not sure I get the point if you already have the HTML changing it to JSX wouldn’t take very long so why not just create components out of the HTML files? I’m not sure I see the benefit of having the object.