Display JSON array in HTML

HTML-CSS
1

Firstly, I’m completely new to JSON and JavaScript so I apologise if I’m missing something obvious. And sorry if I’m using the wrong terminology…

I have a JSON array, which is all lumped together in column of table data called MEDICAL_DATA, which may contain any amount of groups of pairs (sample below shows five pair groups)… and some groups of pairs may not contain all the information (for example, not all the pairs in the below example have Documentation).

What I would like to do is work out how I would show this data in HTML. I’ve worked out how to show ONE group but I have no idea how to have it show all the groups because I don’t know how many groups there would be. And I don’t know what to do when there is no Documentation pair included.

Would really appreciate any help. Yes, there is the issue with the Date pair showing all that rubbish after the T, too, but I’ll get to that later LOL.

{“Date”:“2024-09-09T02:00:00.000Z”,“Practitioner”:“Bobbie Forrest”,“Reason”:“Worming”,“Details”:“Worming table given by foster carer”}, {“Date”:“2024-09-16T02:00:00.000Z”,“Practitioner”:“Bobbie Forrest”,“Reason”:“Worming”,“Details”:“Worming tablet given by foster carer”}, {“Date”:“2024-09-22T02:00:00.000Z”,“Practitioner”:“Lance Peters”,“Reason”:“Vax - First”,“Documentation”:“https://certificate01.jpg”}, {“Date”:“2024-09-22T02:00:00.000Z”,“Practitioner”:“Lance Peters”,“Reason”:“Microchip”}, {“Date”:“2024-09-22T02:00:00.000Z”,“Practitioner”:“Lance Peters”,“Reason”:“Desex”,“Documentation”:“https://certificate02.jpg”}

2

The date is a timestamp format. Secondly I’m not sure what this is for. I’m going to assume the data is related to veterinarian practice.

That being said, what have you tried so far and what roadblocks have you ran into?

Hint: Lookup how to fetch data, HTML table elements, and how to append elements to the HTML DOM.

1 Like
3

It’s for a cat rescue, so you were close :grinning_cat:

Basically the JSON information is all popped in one column of a table for each cat so (as it pulls the data from the medical table relevant for the cat and plonks it in a column in JSON format in the cat table. So I can display all the JSON data but basically in the format that it looks now.

Ideally what I would like to achieve if pointed in the right direction (and if in my skill range which is basic) is to have it look in the JSON array and display what is essentially five columns (date, practitioner, reason, details and documentation) in a table format BUT I don’t know how to a) have it realise that the group is within the curly brackets and b) show all the groups regardless of how many there are. I assume some sort of loop that keeps looking until there is no more?

Sorry if this doesn’t make sense but I’m trying to describe it as best as I can and i’m not sure of the correct terminology. But I’m keen to give it a try.

4

Hello,

I guess you want to have a table like this one?

Date Practitioner Reason Details Documentation
09/09/2024 Bobbie Forrest Worming Worming tablet given by foster carer N/A
09/16/2024 Bobbie Forrest Worming Worming tablet given by foster carer N/A
09/22/2024 Lance Peters Vax - First N/A N/A
09/22/2024 Lance Peters Microchip N/A N/A
09/22/2024 Lance Peters Desex N/A N/N

If yes, than you need to:

HTML:

  • Add a basic HTML table where your data will be inserted .

JavaScript:

  • Define a variable that holds you JSON data.
  • Format the date properly to remove the T part and convert to “MM/DD/YYYY” format.
  • Parse the JSON array.
  • Loop through each object in the array to create a new table row (<tr>) for each entry.
  • Dynamically create an HTML table row for each object.
  • Handle missing fields (like Documentation, Details) to show N/A.
  • Appends rows dynamically to the table body (<tbody>).

Try to take each step at a time and also search for help again when you need.
I hope this plan will help you to start from somewhere .

Have a good day

1 Like
5

Yep, that’s what I’m keen to show. Thanks for the tips. I will give it a red hot go! Its the parsing of the JSON array and looping I’ve no idea about how to go about but now I know that terminology, I will google.

1 Like
6

Great! I think this is a good thinking. Go and document yourself about looping and json parsing and ask questions when you are stuck.