How to consume the JSON data in Grid in Web API dynamic way

Question

Hello Everyone,

I am new to Web API.

I need to design a web application which shows the status of different services in different servers.

The information of the services and server is given in the XML document (Please find the attached pic 1)

Now the number of services and the servers are dynamic i.e. these change as one change the XML document add/delete the servers/services

So I want the UI for the web application to be a matrix showing the status of these services in different servers(Please find the attached pic 2)

Now, I am able to render the data in the JSON format- dictionary<servername,dictionary><servicename,servicestatus>>.

Example: {"Server 1":{"Service 1":"Running","Service 2":"Running"},"Server2":{"Service 1":"Running","Service 2":"Running"}}

Now, I need to consume this JSON data in the View using Client side technologies JavaScript, JQuery etc.

Can you suggest me how to come up with the grid as the number of servers and service names are dynamic i.e. depend on the data provided in the XML

Thanks !!


Pic 1:
http://tinypic.com/r/25pqz5l/9[^]

Later Click on Zoom in this link

 

Pic 2:

 

<Services>

<Service1>

<Server1>IP Address</Server1>

<Server2>IP Address</Server2>

</Service1>

<Service2>

<Server1>IP Address</Server1>

<Server2>IP Address</Server2>

</Service2>

</Services>