linepisode linepisode - 1 year ago 55
Javascript Question

Populate table with two JSON

I want to create table with two JSON. I can set fields in normal JSON, But these are more complex. Can you give me an idea?

Here is my json:

{
"ParentId": "00000000-0000-0000-0000-000000000000",
"UserGroupModel": null,
"EntityAccessData": [
{
"Id": null,
"Title": null,
"EntityAccessDataId": "68c59596-12b5-4044-bd8c-2f754c44466f",
"EntityTitle": "Message",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "8626c003-c3cb-4074-b3ff-6385b4d9e90e",
"Title": "Can read"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "62b71a6e-6e74-4a8c-b6cb-f5ad21278e4f",
"EntityTitle": "Message",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "e3b29357-8018-4438-88d5-7e80117aefc2",
"Title": "Can add"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "7e99490b-4073-406d-a617-ce4c9014f3d4",
"EntityTitle": "Message",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "b300e4f0-85bc-43ac-a50c-be3e7b288012",
"Title": "Can delete"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "dde7e245-57d5-492d-b2c4-7ca9a55c6a41",
"EntityTitle": "Message",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "d1310106-bb55-4cdf-a113-f8818b496588",
"Title": "Can edit"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "88494116-cc2b-4028-9940-a8cf5d645602",
"EntityTitle": "User",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "2f6744e2-a8fb-45b1-a67c-38f23def4149",
"Title": "Can read"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "d1a6aaf2-b159-461a-8c9f-be9125cb683f",
"EntityTitle": "User",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "a13677ea-fee3-4708-94e7-b0907ade304c",
"Title": "Can add"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "112086ed-6a4f-47c0-8f16-9b56f37bda80",
"EntityTitle": "User",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "aa283b4b-393e-4da5-a3c3-ba92a1b460a6",
"Title": "Can edit"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "5f09c8f5-ff9d-4890-bcf9-9820fab5997f",
"EntityTitle": "User",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "59d0c6f7-8f93-497a-854d-bdd4a42ade94",
"Title": "Can delete"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "c206663f-a81f-437f-8213-99b2df7b5b7c",
"EntityTitle": "Category",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "c5e672b5-e306-4181-ae37-93b50fb7bf20",
"Title": "Can add"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "6a3546c0-b7e9-4a65-8033-801ee867be5f",
"EntityTitle": "Category",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "3724d57c-b0e9-47a0-9eef-cb690f7c4837",
"Title": "can read"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "636fac3f-9f53-47bd-9b46-af6d0e80366d",
"EntityTitle": "Category",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "76e6b578-cb3a-4055-a582-e7269e46184b",
"Title": "Can edit"
},
"Category": null,
"HasAccess": null
},
{
"Id": null,
"Title": null,
"EntityAccessDataId": "757036a8-aea8-4151-a5e1-618352f9bcab",
"EntityTitle": "Category",
"SiteId": "1294900c-d8d9-4357-b698-001cbeac0231",
"SiteTitle": "MYWEBSITE",
"UserGroupId": "00000000-0000-0000-0000-000000000000",
"UserGroupTitle": null,
"Access": {
"Id": "336f6f9b-c69a-4578-8b1e-f52442555000",
"Title": "Can delete"
},
"Category": null,
"HasAccess": null
}
]
}





Dropdown's items will be come from this json

[
{
"Title": "-"
},
{
"Title": "Yes"
},
{
"Title": "No"
}
]


How can I create table like this:

And here is my goal:

|---------------Title---------------|-------------------ID---------------|-----Access-----|
___________________________________________________________________________________________
|Message-----------------------------------------------------------------|-----------------
|can read---------------------------|8626c003-c3cb-4074-b3ff-6385b4d9e90e|-----DROPDOWN---|
|can add----------------------------|e3b29357-8018-4438-88d5-7e80117aefc2|-----DROPDOWN---|
|can delete-------------------------|b300e4f0-85bc-43ac-a50c-be3e7b288012|-----DROPDOWN---|
|can edit---------------------------|d1310106-bb55-4cdf-a113-f8818b496588|-----DROPDOWN---|
___________________________________________________________________________________________
|User--------------------------------------------------------------------|-----------------
|can read---------------------------|2f6744e2-a8fb-45b1-a67c-38f23def4149|-----DROPDOWN---|
|can add----------------------------|a13677ea-fee3-4708-94e7-b0907ade304c|-----DROPDOWN---|
|can edit---------------------------|aa283b4b-393e-4da5-a3c3-ba92a1b460a6|-----DROPDOWN---|
|can delete-------------------------|59d0c6f7-8f93-497a-854d-bdd4a42ade94|-----DROPDOWN---|
___________________________________________________________________________________________
|Category----------------------------------------------------------------|-----------------
|can read---------------------------|c5e672b5-e306-4181-ae37-93b50fb7bf20|-----DROPDOWN---|
|can add----------------------------|336f6f9b-c69a-4578-8b1e-f52442555000|-----DROPDOWN---|
___________________________________________________________________________________________


Any idea will be appreciated.

Answer Source

add a <table id="tableID"> to your document with the headers and append the generated <tr> to it..

say you json is data

try this

  var tempArray=[];
  var tableRow="";
 $.each(data.EntityAccessData,function(i,val){
     if(jQuery.inArray(val.EntityTitle, tempArray) == -1){
          tempArray.push(val.EntityTitle);
          var tableRow += '<tr><td>'+ val.EntityTitle  +'</td></tr>' 
     }else{
          var tableRow += '<tr><td>'+ val.Access.Id+'</td>'+'<td>'+val.Access.Title+'</td></tr>' 
     }
 })
 $('#tableID').append(tableRow);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download