Return Nested JSON Object into Readable Table

Hi

i have a json object like this

{
	"ControlName": "EmployeeSalary",
	"ControlStatus": "Valid",
	"ControlDetails": 
	[
		{
			"PersonId": 20325,
			"PersonName": "Tom Yorke",
			"PersonStatus": "Valid",
			"PersonNote": null
		},
		{
			"PersonId": 20326
			"PersonName": "Ringo Starr",
			"PersonStatus": "Not Valid",
			"PersonNote": null
		}
	]
}

And i can’t render it using Vue Js, creating a nested table like the one below.

ControlName ControlStatus ControlDetails
EmployeeSalary Valid PersonId PersonName PersonStatus PersonNote
20325 Thom Yorke Valid null
20326 Ringo Starr Not Valid null

How can i get a similar result?

Thanks to all

Something like this. Can’t figure out your issue on why you can’t do it yourself as you didn’t even include your code that doesn’t work.


first of all thanks. i haven’t provide the code because the question is little bit more complex than this…But i feared that i am not able to explain well.

The input json object fields are dynamic, except the array that are static fields, so i dont know the field names, and i dont know howto map them into a table using Vue.

I’ll use your answer to provide a new question with some code :slight_smile: