What is the best way to simplify html content stored in array of objects?

22 views Asked by At

I am trying to get all the data stored in an array of objects displayed dynamically on the same web page when user clicks on links added to a card grid.

Here is what I have coded so far, is there any better way of storing this data ?

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?",
    descriptionp7:
      "On arrival, you may be asked to fill out paperwork or complete medical history forms. Your physiotherapist will then conduct a detailed assessment of your problem or condition. This takes about 30-45 minutes and normally involves:",
  },

1

There are 1 answers

0
Whit Waldo On

A couple of notes:

  • Unless you know for a fact that you're only ever going to have 7 lines in your description, I'd make that an array. It looks as though they're intended to display separately, so keep them distinct.
  • Image was repeated

Beyond that, looks like a standard JSON object I might see anywhere else.

export const servicesdata = [
  {
    id: 1,
    title: "Physiotherapy",
    subtitle: "What Can I Expect During My First Appointment?",
    image: "https://atriumphysiotherapy.com/images/stretching.jpg",
    descriptions: [
       "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.",
       "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.",
       "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.",
       "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.",
       "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.",
       "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.",
       "On arrival, you may be asked to fill out paperwork or complete medical history forms. Your physiotherapist will then conduct a detailed assessment of your problem or condition. This takes about 30-45 minutes and normally involves:"
    ]    
  }
]