Parse this input - ios

I get this text from the quizlet API. But how do I proceed to import it and cut it into usable pieces. I tried NSXMLParser but it didn't work. (Error 111).
How do I parse this input?
I don't need specific instructions, but a hint to where to search would be awesome.
{
"id": 415,
"url": "http://quizlet.com/415/us-state-capitals-flash-cards/",
"title": "U.S. State Capitals",
"created_by": "asuth",
"term_count": 50,
"created_date": 1144296408,
"modified_date": 1393464052,
"has_images": false,
"subjects": [
],
"visibility": "public",
"editable": "only_me",
"has_access": true,
"description": "",
"lang_terms": "en",
"lang_definitions": "en",
"has_discussion": false,
"creator": {
"username": "asuth",
"account_type": "plus",
"profile_image": "https://fbquizlet-quizletllc.netdna-ssl.com/hprofile-ak-ash1/t5/203061_1030920097_793938339_n.jpg",
"id": 1
},
],
"terms": [
{
"id": 1277349735,
"term": "Montgomery",
"definition": "Alabama",
"image": null
},
{
"id": 842513565,
"term": "Juneau",
"definition": "Alaska",
"image": null
},
{
"id": 413281845,
"term": "Phoenix",
"definition": "Arizona",
"image": null
},
{
"id": 413281846,
"term": "Little Rock",
"definition": "Arkansas",
"image": null
},
{
"id": 413281847,
"term": "Sacramento",
"definition": "California",
"image": null
},
{
"id": 413281848,
"term": "Denver",
"definition": "Colorado",
"image": null
},
{
"id": 413281849,
"term": "Hartford",
"definition": "Connecticut",
"image": null
},
{
"id": 413281850,
"term": "Dover",
"definition": "Delaware",
"image": null
},
{
"id": 413281851,
"term": "Tallahassee",
"definition": "Florida",
"image": null
},
{
"id": 413281852,
"term": "Atlanta",
"definition": "Georgia",
"image": null
},
{
"id": 413281853,
"term": "Honolulu",
"definition": "Hawaii",
"image": null
},
{
"id": 413281854,
"term": "Boise",
"definition": "Idaho",
"image": null
},
{
"id": 413281855,
"term": "Springfield",
"definition": "Illinois",
"image": null
},
{
"id": 413281856,
"term": "Indianapolis",
"definition": "Indiana",
"image": null
},
{
"id": 413281857,
"term": "Des Moines",
"definition": "Iowa",
"image": null
},
{
"id": 413281858,
"term": "Topeka",
"definition": "Kansas",
"image": null
},
{
"id": 413281859,
"term": "Frankfort",
"definition": "Kentucky",
"image": null
},
{
"id": 413281860,
"term": "Baton Rouge",
"definition": "Louisiana",
"image": null
},
{
"id": 413281861,
"term": "Augusta",
"definition": "Maine",
"image": null
},
{
"id": 413281862,
"term": "Annapolis",
"definition": "Maryland",
"image": null
},
{
"id": 413281863,
"term": "Boston",
"definition": "Massachusetts",
"image": null
},
{
"id": 413281864,
"term": "Lansing",
"definition": "Michigan",
"image": null
},
{
"id": 413281865,
"term": "St. Paul",
"definition": "Minnesota",
"image": null
},
{
"id": 413281866,
"term": "Jackson",
"definition": "Mississippi",
"image": null
},
{
"id": 413281867,
"term": "Jefferson City",
"definition": "Missouri",
"image": null
},
{
"id": 413281868,
"term": "Helena",
"definition": "Montana",
"image": null
},
{
"id": 413281869,
"term": "Lincoln",
"definition": "Nebraska",
"image": null
},
{
"id": 413281870,
"term": "Carson City",
"definition": "Nevada",
"image": null
},
{
"id": 413281871,
"term": "Concord",
"definition": "New Hampshire",
"image": null
},
{
"id": 413281872,
"term": "Trenton",
"definition": "New Jersey",
"image": null
},
{
"id": 413281873,
"term": "Santa Fe",
"definition": "New Mexico",
"image": null
},
{
"id": 413281874,
"term": "Albany",
"definition": "New York",
"image": null
},
{
"id": 413281875,
"term": "Raleigh",
"definition": "North Carolina",
"image": null
},
{
"id": 413281876,
"term": "Bismarck",
"definition": "North Dakota",
"image": null
},
{
"id": 413281877,
"term": "Columbus",
"definition": "Ohio",
"image": null
},
{
"id": 413281878,
"term": "Oklahoma City",
"definition": "Oklahoma",
"image": null
},
{
"id": 413281879,
"term": "Salem",
"definition": "Oregon",
"image": null
},
{
"id": 413281880,
"term": "Harrisburg",
"definition": "Pennsylvania",
"image": null
},
{
"id": 413281881,
"term": "Providence",
"definition": "Rhode Island",
"image": null
},
{
"id": 413281882,
"term": "Columbia",
"definition": "South Carolina",
"image": null
},
{
"id": 413281883,
"term": "Pierre",
"definition": "South Dakota",
"image": null
},
{
"id": 413281884,
"term": "Nashville",
"definition": "Tennessee",
"image": null
},
{
"id": 413281885,
"term": "Austin",
"definition": "Texas",
"image": null
},
{
"id": 413281886,
"term": "Salt Lake City",
"definition": "Utah",
"image": null
},
{
"id": 413281887,
"term": "Montpelier",
"definition": "Vermont",
"image": null
},
{
"id": 413281888,
"term": "Richmond",
"definition": "Virginia",
"image": null
},
{
"id": 413281889,
"term": "Olympia",
"definition": "Washington",
"image": null
},
{
"id": 413281890,
"term": "Charleston",
"definition": "West Virginia",
"image": null
},
{
"id": 413281891,
"term": "Madison",
"definition": "Wisconsin",
"image": null
},
{
"id": 413281892,
"term": "Cheyenne",
"definition": "Wyoming",
"image": null
}
]
}
https://api.quizlet.com/2.0/sets/415?access_token=Nzk0NzEzOGZmOTNjZDY3YmIyNTI1YTA0ZmU4NTQ1&whitespace=1

My assumption is that this part is what you are after:
"terms": [
{
"id": 1277349735,
"term": "Montgomery",
"definition": "Alabama",
"image": null
},
{
"id": 842513565,
"term": "Juneau",
"definition": "Alaska",
"image": null
},
{
"id": 413281845,
"term": "Phoenix",
"definition": "Arizona",
"image": null
},
{
"id": 413281846,
"term": "Little Rock",
"definition": "Arkansas",
"image": null
},
{
"id": 413281847,
"term": "Sacramento",
"definition": "California",
"image": null
},
{
"id": 413281848,
"term": "Denver",
"definition": "Colorado",
"image": null
},
{
"id": 413281849,
"term": "Hartford",
"definition": "Connecticut",
"image": null
},
{
"id": 413281850,
"term": "Dover",
"definition": "Delaware",
"image": null
},
{
"id": 413281851,
"term": "Tallahassee",
"definition": "Florida",
"image": null
},
{
"id": 413281852,
"term": "Atlanta",
"definition": "Georgia",
"image": null
},
{
"id": 413281853,
"term": "Honolulu",
"definition": "Hawaii",
"image": null
},
{
"id": 413281854,
"term": "Boise",
"definition": "Idaho",
"image": null
},
{
"id": 413281855,
"term": "Springfield",
"definition": "Illinois",
"image": null
},
{
"id": 413281856,
"term": "Indianapolis",
"definition": "Indiana",
"image": null
},
{
"id": 413281857,
"term": "Des Moines",
"definition": "Iowa",
"image": null
},
{
"id": 413281858,
"term": "Topeka",
"definition": "Kansas",
"image": null
},
{
"id": 413281859,
"term": "Frankfort",
"definition": "Kentucky",
"image": null
},
{
"id": 413281860,
"term": "Baton Rouge",
"definition": "Louisiana",
"image": null
},
{
"id": 413281861,
"term": "Augusta",
"definition": "Maine",
"image": null
},
{
"id": 413281862,
"term": "Annapolis",
"definition": "Maryland",
"image": null
},
{
"id": 413281863,
"term": "Boston",
"definition": "Massachusetts",
"image": null
},
{
"id": 413281864,
"term": "Lansing",
"definition": "Michigan",
"image": null
},
{
"id": 413281865,
"term": "St. Paul",
"definition": "Minnesota",
"image": null
},
{
"id": 413281866,
"term": "Jackson",
"definition": "Mississippi",
"image": null
},
{
"id": 413281867,
"term": "Jefferson City",
"definition": "Missouri",
"image": null
},
{
"id": 413281868,
"term": "Helena",
"definition": "Montana",
"image": null
},
{
"id": 413281869,
"term": "Lincoln",
"definition": "Nebraska",
"image": null
},
{
"id": 413281870,
"term": "Carson City",
"definition": "Nevada",
"image": null
},
{
"id": 413281871,
"term": "Concord",
"definition": "New Hampshire",
"image": null
},
{
"id": 413281872,
"term": "Trenton",
"definition": "New Jersey",
"image": null
},
{
"id": 413281873,
"term": "Santa Fe",
"definition": "New Mexico",
"image": null
},
{
"id": 413281874,
"term": "Albany",
"definition": "New York",
"image": null
},
{
"id": 413281875,
"term": "Raleigh",
"definition": "North Carolina",
"image": null
},
{
"id": 413281876,
"term": "Bismarck",
"definition": "North Dakota",
"image": null
},
{
"id": 413281877,
"term": "Columbus",
"definition": "Ohio",
"image": null
},
{
"id": 413281878,
"term": "Oklahoma City",
"definition": "Oklahoma",
"image": null
},
{
"id": 413281879,
"term": "Salem",
"definition": "Oregon",
"image": null
},
{
"id": 413281880,
"term": "Harrisburg",
"definition": "Pennsylvania",
"image": null
},
{
"id": 413281881,
"term": "Providence",
"definition": "Rhode Island",
"image": null
},
{
"id": 413281882,
"term": "Columbia",
"definition": "South Carolina",
"image": null
},
{
"id": 413281883,
"term": "Pierre",
"definition": "South Dakota",
"image": null
},
{
"id": 413281884,
"term": "Nashville",
"definition": "Tennessee",
"image": null
},
{
"id": 413281885,
"term": "Austin",
"definition": "Texas",
"image": null
},
{
"id": 413281886,
"term": "Salt Lake City",
"definition": "Utah",
"image": null
},
{
"id": 413281887,
"term": "Montpelier",
"definition": "Vermont",
"image": null
},
{
"id": 413281888,
"term": "Richmond",
"definition": "Virginia",
"image": null
},
{
"id": 413281889,
"term": "Olympia",
"definition": "Washington",
"image": null
},
{
"id": 413281890,
"term": "Charleston",
"definition": "West Virginia",
"image": null
},
{
"id": 413281891,
"term": "Madison",
"definition": "Wisconsin",
"image": null
},
{
"id": 413281892,
"term": "Cheyenne",
"definition": "Wyoming",
"image": null
}
]
You would use something like this to convert it to a NSDictionary:
NSDictionary *dictionary = [NSJSONSerialization JSONObjectWithData:data options:kNilOptions error:&error];
Where data would be your response containing JSON. There may be some work involved to tailor up the json so that you get only the portion you want.

Here is my 'hint to where to search' : This is json, check for NSJSONSerialization tuto on the web.

Related

How to compare the fields present in two json response and validate it?

I need to compare all the countries present in Response1 should be present in Response2 also.
So How Can I take all the countries from both the responses and validate?
I tried on storing country in ArrayList but not able to validate it.
Json Response 1:
{
"plan": {
"program": "gtr",
"syter": "yes"
},
"Map": {
"List": [
{
"id": "tyt6577",
"proxy": "ENABLED",
"type": "BENEFIT",
"country": "us",
"triag": null
},
{
"id": "yyaqtf6327",
"proxy": "ENABLED",
"type": "BENEFIT",
"country": "aus",
"triag": null
},
{
"id": "676hwjsgvhgv",
"proxy": "ENABLED",
"type": "BENEFIT",
"country": "rus",
"triag": null
},
{
"id": "676hsdhgv",
"proxy": "ENABLED",
"type": "BENEFIT",
"country": "spa",
"triag": null
},
{
"id": "623ujhhgv",
"proxy": "ENABLED",
"type": "BENEFIT",
"country": "cha",
"triag": null
}
]
}
}
Json Response 2:
[
{
"id": "tyt6577",
"proxy": "ENABLED",
"type": "BENEFIT",
"country": "rus",
"triag": null
},
{
"id": "yyaqtf6327",
"proxy": "ENABLED",
"type": "BENEFIT",
"country": "spa",
"triag": null
},
{
"id": "676hwjsgvhgv",
"proxy": "ENABLED",
"type": "BENEFIT",
"country": "us",
"triag": null
},
{
"id": "676hsdhgv",
"proxy": "ENABLED",
"type": "BENEFIT",
"country": "aus",
"triag": null
},
{
"id": "623ujhhgv",
"proxy": "ENABLED",
"type": "BENEFIT",
"country": "cha",
"triag": null
}
]
This would work for you
import static org.hamcrest.MatcherAssert.assertThat;
import static org.hamcrest.Matchers.containsInAnyOrder;
...
List<String> country = res.jsonPath().get("Map.List.country");
List<String> country2 = res2.jsonPath().get("country");
assertThat(country2, containsInAnyOrder(country.toArray()));

How to use a dictionary from JSON with Realm?

Creating a data model to use with codable and realm. Im getting stuck on dictionaries. As I understand it, you cannot use dictionaries with realm? How can I decode the following JSON and use it with something Realm will accept?
JSON Example A
"platform": {
"data": {
"25": {
"id": 25,
"name": "3DO",
"alias": "3do"
},
"4944": {
"id": 4944,
"name": "Acorn Archimedes",
"alias": "acorn-archimedes"
},
"4954": {
"id": 4954,
"name": "Acorn Electron",
"alias": "acorn-electron"
}
}
Note, the keys are strings that change, in decoable form i have it as
StructExample A
struct PlatformData : Codable {
let data : [String: PlatformInformation]
}
JSON Example B
"include": {
"boxart": {
"base_url": {
"original": "https:\/\/cdn.thegamesdb.net\/images\/original\/",
"small": "https:\/\/cdn.thegamesdb.net\/images\/small\/",
"thumb": "https:\/\/cdn.thegamesdb.net\/images\/thumb\/",
"cropped_center_thumb": "https:\/\/cdn.thegamesdb.net\/images\/cropped_center_thumb\/",
"medium": "https:\/\/cdn.thegamesdb.net\/images\/medium\/",
"large": "https:\/\/cdn.thegamesdb.net\/images\/large\/"
},
"data": {
"1":
[
{
"id": 242,
"type": "fanart",
"side": null,
"filename": "fanart\/1-2.jpg",
"resolution": "1920x1080"
},
{
"id": 433,
"type": "fanart",
"side": null,
"filename": "fanart\/1-5.jpg",
"resolution": "1920x1080"
}
],
"2":
[
{
"id": 15,
"type": "fanart",
"side": null,
"filename": "fanart\/2-1.jpg",
"resolution": "1920x1080"
},
{
"id": 133,
"type": "fanart",
"side": null,
"filename": "fanart\/2-2.jpg",
"resolution": "1920x1080"
},
{
"id": 656,
"type": "fanart",
"side": null,
"filename": "fanart\/2-4.jpg",
"resolution": "1920x1080"
}
],
"4":
[
{
"id": 208,
"type": "fanart",
"side": null,
"filename": "fanart\/4-1.jpg",
"resolution": "1920x1080"
},
{
"id": 481,
"type": "banner",
"side": null,
"filename": "graphical\/4-g.jpg",
"resolution": null
},
{
"id": 846,
"type": "boxart",
"side": "front",
"filename": "boxart\/front\/4-1.jpg",
"resolution": "1000x705"
},
{
"id": 847,
"type": "boxart",
"side": "back",
"filename": "boxart\/back\/4-1.jpg",
"resolution": "1000x705"
},
{
"id": 73897,
"type": "clearlogo",
"side": null,
"filename": "clearlogo\/4.png",
"resolution": "400x148"
},
{
"id": 215539,
"type": "fanart",
"side": null,
"filename": "fanart\/4-2.jpg",
"resolution": null
},
{
"id": 238533,
"type": "screenshot",
"side": null,
"filename": "screenshot\/4-1.jpg",
"resolution": null
},
{
"id": 238534,
"type": "screenshot",
"side": null,
"filename": "screenshot\/4-2.jpg",
"resolution": null
},
{
"id": 238535,
"type": "screenshot",
"side": null,
"filename": "screenshot\/4-3.jpg",
"resolution": null
},
{
"id": 238536,
"type": "screenshot",
"side": null,
"filename": "screenshot\/4-4.jpg",
"resolution": null
},
{
"id": 238537,
"type": "screenshot",
"side": null,
"filename": "screenshot\/4-5.jpg",
"resolution": null
},
{
"id": 238538,
"type": "screenshot",
"side": null,
"filename": "screenshot\/4-6.jpg",
"resolution": null
}
],
"5":
[
{
"id": 396,
"type": "banner",
"side": null,
"filename": "graphical\/5-g.jpg",
"resolution": null
},
{
"id": 2364,
"type": "fanart",
"side": null,
"filename": "fanart\/5-4.jpg",
"resolution": "1920x1080"
},
]
Here is similar, except now with an array of objects as the value
Struct Example B
struct BoxArtData : Codeable {
let data: [String:[ExtraImages]]
}

Can't update the names of event attendees using the Microsoft Graph API

The following has been tried using the Microsoft Graph API Graph Explorer to eliminate any third-party causes. There is an existing event in an Outlook calendar:
{
"#odata.context": "https://graph.microsoft.com/v1.0/$metadata#users('WWWW')/calendars('XXXX')/events/$entity",
"#odata.etag": "W/\"wIqdPsepnEOtI+GbtqRT1gAAElvUsQ==\"",
"id": "YYYY",
"createdDateTime": "2020-06-18T05:19:22.5766648Z",
"lastModifiedDateTime": "2020-06-18T17:17:23.3143899Z",
"changeKey": "wIqdPsepnEOtI+GbtqRT1gAAElvUsQ==",
"categories": [],
"originalStartTimeZone": "UTC",
"originalEndTimeZone": "UTC",
"iCalUId": "ZZZZ",
"reminderMinutesBeforeStart": 15,
"isReminderOn": false,
"hasAttachments": false,
"subject": "Review proposal",
"bodyPreview": "",
"importance": "normal",
"sensitivity": "normal",
"isAllDay": false,
"isCancelled": false,
"isOrganizer": true,
"responseRequested": true,
"seriesMasterId": null,
"showAs": "busy",
"type": "singleInstance",
"webLink": "https://outlook.office365.com/owa/?itemid=YYY&exvsurl=1&path=/calendar/item",
"onlineMeetingUrl": null,
"isOnlineMeeting": false,
"onlineMeetingProvider": "unknown",
"allowNewTimeProposals": true,
"recurrence": null,
"onlineMeeting": null,
"responseStatus": {
"response": "organizer",
"time": "0001-01-01T00:00:00Z"
},
"body": {
"contentType": "text",
"content": ""
},
"start": {
"dateTime": "2020-06-26T14:30:00.0000000",
"timeZone": "UTC"
},
"end": {
"dateTime": "2020-06-26T15:00:00.0000000",
"timeZone": "UTC"
},
"location": {
"displayName": "",
"locationType": "default",
"uniqueIdType": "unknown",
"address": {},
"coordinates": {}
},
"locations": [],
"attendees": [
{
"type": "required",
"status": {
"response": "none",
"time": "0001-01-01T00:00:00Z"
},
"emailAddress": {
"name": "attendee#example.com",
"address": "attendee#example.com"
}
},
{
"type": "required",
"status": {
"response": "none",
"time": "0001-01-01T00:00:00Z"
},
"emailAddress": {
"name": "Bob Smith",
"address": "organizer#example.com"
}
}
],
"organizer": {
"emailAddress": {
"name": "Bob Smith",
"address": "organizer#example.com"
}
}
}
The attendee's name was not known at the time the event was created. attendee#example.com was given which produced an attendee whose name and email address were both attendee#example.com. Later, the attendee's name became known. A patch request is sent to the organizer's calendar through Microsoft Graph API to update the event with the goal of overwriting the attendee's name, but leaving the email address as is.
{
"#odata.type": "#microsoft.graph.event",
"attendees": [{
"status": {
"response": "none",
"time": "0001-01-01T00:00:00Z"
},
"type": "required",
"emailAddress": {
"address": "attendee#example.com",
"name": "Julie Williams"
}
}, {
"status": {
"response": "none"
},
"type": "required",
"emailAddress": {
"address": "organizer#example.com",
"name": "Bob Smith"
}
}],
"createdDateTime": "2020-06-18T05:19:22.5766648Z",
"end": {
"dateTime": "2020-06-26T15:00:00",
"timeZone": "UTC"
},
"iCalUId": "ZZZZ",
"id": "YYYY",
"importance": "normal",
"isOrganizer": true,
"lastModifiedDateTime": "2020-06-18T05:19:23.7881324Z",
"location": {},
"organizer": {
"emailAddress": {
"address": "organizer#example.com",
"name": "Bob Smith"
}
},
"originalEndTimeZone": "Eastern Standard Time",
"originalStartTimeZone": "Eastern Standard Time",
"reminderMinutesBeforeStart": 15,
"responseRequested": true,
"responseStatus": {
"response": "organizer",
"time": "0001-01-01T00:00:00Z"
},
"sensitivity": "normal",
"showAs": "busy",
"start": {
"dateTime": "2020-06-26T14:30:00",
"timeZone": "UTC"
},
"subject": "Review proposal",
"type": "singleInstance",
"webLink": "https://outlook.office365.com/owa/?itemid=YYYY&exvsurl=1&path=/calendar/item"
}
The response shows that the attendee's name did not change.
{
"#odata.context": "https://graph.microsoft.com/v1.0/$metadata#users('WWWW')/calendars('XXXX')/events/$entity",
"#odata.etag": "W/\"wIqdPsepnEOtI+GbtqRT1gAAElvUsQ==\"",
"id": "YYYY",
"createdDateTime": "2020-06-18T05:19:22.5766648Z",
"lastModifiedDateTime": "2020-06-18T17:17:23.3143899Z",
"changeKey": "wIqdPsepnEOtI+GbtqRT1gAAElvUsQ==",
"categories": [],
"originalStartTimeZone": "UTC",
"originalEndTimeZone": "UTC",
"iCalUId": "ZZZZ",
"reminderMinutesBeforeStart": 15,
"isReminderOn": false,
"hasAttachments": false,
"subject": "Review proposal",
"bodyPreview": "",
"importance": "normal",
"sensitivity": "normal",
"isAllDay": false,
"isCancelled": false,
"isOrganizer": true,
"responseRequested": true,
"seriesMasterId": null,
"showAs": "busy",
"type": "singleInstance",
"webLink": "https://outlook.office365.com/owa/?itemid=YYYY&exvsurl=1&path=/calendar/item",
"onlineMeetingUrl": null,
"isOnlineMeeting": false,
"onlineMeetingProvider": "unknown",
"allowNewTimeProposals": true,
"recurrence": null,
"onlineMeeting": null,
"responseStatus": {
"response": "organizer",
"time": "0001-01-01T00:00:00Z"
},
"body": {
"contentType": "text",
"content": ""
},
"start": {
"dateTime": "2020-06-26T14:30:00.0000000",
"timeZone": "UTC"
},
"end": {
"dateTime": "2020-06-26T15:00:00.0000000",
"timeZone": "UTC"
},
"location": {
"displayName": "",
"locationType": "default",
"uniqueIdType": "unknown",
"address": {},
"coordinates": {}
},
"locations": [],
"attendees": [
{
"type": "required",
"status": {
"response": "none",
"time": "0001-01-01T00:00:00Z"
},
"emailAddress": {
"name": "attendee#example.com",
"address": "attendee#example.com"
}
},
{
"type": "required",
"status": {
"response": "none",
"time": "0001-01-01T00:00:00Z"
},
"emailAddress": {
"name": "Bob Smith",
"address": "organizer#example.com"
}
}
],
"organizer": {
"emailAddress": {
"name": "Bob Smith",
"address": "organizer#example.com"
}
}
}
Should I expect the attendee's name to be updated? Is there another way to do it?

Is it possible to combine jsPDF and Autotable plugin?

Is it possible to use jsPDF to grab text from a HTML page and jsPDF-autotable to grab the table and to get that all inside one PDF? I have a document which has some content, and tables in the middle of the content. However, I was not able to print that document.
Sample code:
Sample code:enter code here
In the below code I am looping my Content array. Content can be of different types. For the table content am trying to use pdf.autoTable and for the text content am using pdf.text
var pdf = new jspdf('p', 'pt', 'a4');
pdf.setFontSize(18);
pdf.line(20, 25, 25, 25);
for (let i = 0; i < this.dalSectionsArray.length; i++) {
dynamicHtmlSource = dynamicHtmlSource + '<p style="text-align:left;">
<b>' + this.dalSectionsArray[i].title + '</b></p><b/>';
pdf.text(dynamicHtmlSource, 10+i, 10+i);
for (let j = 0; j < this.dalContentsArray.length; j++) {
if (this.dalSectionsArray[i].id ===
this.dalContentsArray[j].sectionView.id) {
if (this.dalContentsArray[j].subType === 'Clause') {
dynamicHtmlSource = this.getClauseData(this.dalContentsArray[j]);
pdf.text(dynamicHtmlSource,20+j,20+j);
} else if (this.dalContentsArray[j].subType === 'Block') {
dynamicHtmlSource = this.getBlockData(this.dalContentsArray[j]);
pdf.text(dynamicHtmlSource,30+j,30+j);
} else if (this.dalContentsArray[j].subType === 'Restriction') {
dynamicHtmlSource =
this.getRestrictionData(this.dalContentsArray[j]);
pdf.text(dynamicHtmlSource, 40+j, 40+j);
} else if (this.dalContentsArray[j].subType === 'Table') {
pdf.autoTable({
startY:50+j,
columnStyles: { europe: { halign: 'center' } }, // European
countries centered
body: this.dalContentsArray[j].tableValues,
columns: this.dalContentsArray[j].displayColumns
})
}
}
pdf.fromHTML('',
this.margins.left, // x coord
this.margins.top,
{
// y coord
width: this.margins.width// max width of content on PDF
}, (dispose) => {
this.headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
},
this.margins);
var iframe = document.createElement('iframe');
iframe.setAttribute('style', 'position:absolute;right:0; top:0;
bottom:0; height:100%; width:650px; padding:20px;');
document.body.appendChild(iframe);
pdf.setProperties({
title: 'jspdf-iframe',
subject: 'DAL Content',
author: 'PDFAuthor',
keywords: 'generated, javascript, web 2.0, ajax',
creator: 'ABC'
});
iframe.src = pdf.output('datauristring');
Issue is the pdf is completely messed and not printed properly. Can any
one help me in this regard.
Sample JSON:
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"sections": [
{
"title": "ABC",
"description": "",
"order": "1",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"id": "{b3cdda34-1fd2-4463-9aa0-24beff4b83fe}-{1}",
"_etag": "\"0d0006a2-0000-0c00-0000-5c94e5760000\"",
"partitionKey": "GGG-Section-{b3cdda34-1fd2-4463-9aa0-24beff4b83fe}-{1}",
"type": "Section",
"clientId": "GGG",
"createdBy": "FFFFF",
"createdDate": "2018-11-12T00:00:00",
"modifiedBy": "FFFFF",
"modifiedDate": "2018-11-12T00:00:00",
"isactive": false
},
{
"title": "DEF",
"description": "",
"order": "2",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"id": "{fca09906-dff9-40b2-a971-28fef7f37dbf}-{1}",
"_etag": "\"0d0004a2-0000-0c00-0000-5c94e5760000\"",
"partitionKey": "GGG-Section-{fca09906-dff9-40b2-a971-28fef7f37dbf}-{1}",
"type": "Section",
"clientId": "GGG",
"createdBy": "FFFFF",
"createdDate": "2018-11-12T00:00:00",
"modifiedBy": "FFFFF",
"modifiedDate": "2018-11-12T00:00:00",
"isactive": false
},
{
"title": "GHI",
"description": "",
"order": "3",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"id": "{9cfb60cf-354c-4194-9e2e-6bab41c6b280}-{1}",
"_etag": "\"0d00faa1-0000-0c00-0000-5c94e5750000\"",
"partitionKey": "GGG-Section-{9cfb60cf-354c-4194-9e2e-6bab41c6b280}-{1}",
"type": "Section",
"clientId": "GGG",
"createdBy": "FFFFF",
"createdDate": "2018-11-12T00:00:00",
"modifiedBy": "FFFFF",
"modifiedDate": "2018-11-12T00:00:00",
"isactive": false
}
],
"contents": [
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"baseDataid": "{a351366f-bf4b-44e0-94ff-a81be899ec3a}-{1}",
"subType": "Table",
"sectionView": {
"id": "{9cfb60cf-354c-4194-9e2e-6bab41c6b280}-{1}",
"title": "AAA",
"description": "",
"order": "4"
},
"title": "PL",
"description": "",
"order": "3",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"displayColumns": [ "N", "M", "O", "P" ],
"tableValues": [
{
"N": "Level 21",
"M": "22",
"O": "",
"P": "",
"isRowEditable": false
},
{
"id": "6cb79b9f-2ef2-4d3a-b6c4-7d84dd61aaf7",
"isDeleted": true,
"N": "KKKKKKK",
"M": "GBP 20M",
"O": "",
"isRowEditable": false
},
{
"id": "c83caf0b-8f00-4dc8-bf35-473bda398937",
"isDeleted": true,
"N": "EP",
"M": "GBP 15M",
"O": "",
"isRowEditable": false
}
],
"placeHolderValues": "",
"organizationDataView": [
{
"id": "{8b958d63-d605-4b9a-a3c4-a3c1c052316e}-{1}",
"orgGroupName": "QQ",
"orgGroupType": "DD",
"orgLevel": 1,
"orgParentGroupId": ""
}
],
"id": "{16a3fb1e-f7fa-4dfe-a4d3-c51b56c8dbee-uw}-{1}",
"_etag": "\"0d00a0ca-0000-0c00-0000-5c94ef3f0000\"",
"partitionKey": "GGG-CCCCOOOOO-{16a3fb1e-f7fa-4dfe-a4d3-c51b56c8dbee-uw}-{1}",
"type": "CCCCOOOOO",
"clientId": "GGG",
"createdBy": "MM",
"createdDate": "2018-12-12T00:00:00",
"modifiedBy": "PPP",
"modifiedDate": null,
"isactive": false
},
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"baseDataid": "{2b498850-8f11-475d-b170-5705d05c4bf1}-{1}",
"subType": "Clause",
"sectionView": {
"id": "{b3cdda34-1fd2-4463-9aa0-24beff4b83fe}-{1}",
"title": "LLL",
"description": "",
"order": "3"
},
"title": "kkkkk",
"Description": [
{
"type": "label",
"value": "<br/>Some sample text here"
}
],
"order": "6",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"displayColumns": [],
"tableValues": null,
"placeHolderValues": "",
"organizationDataView": [
{
"id": "{8b958d63-d605-4b9a-a3c4-a3c1c052316e}-{1}",
"orgGroupName": "QQ",
"orgGroupType": "DD",
"orgLevel": 1,
"orgParentGroupId": ""
}
],
"id": "{6193cef1-2fe5-47c2-8367-0650ab66caf3-uw}-{1}",
"_etag": "\"0d00a5ca-0000-0c00-0000-5c94ef400000\"",
"partitionKey": "GGG-CCCCOOOOO-{6193cef1-2fe5-47c2-8367-0650ab66caf3-uw}-{1}",
"type": "CCCCOOOOO",
"clientId": "GGG",
"createdBy": "MM",
"createdDate": "2018-12-12T00:00:00",
"modifiedBy": "PPP",
"modifiedDate": null,
"isactive": false
},
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"baseDataid": "{d6793120-5e5b-40ec-a1ea-e82e7bdc9d1a}-{1}",
"subType": "Clause",
"sectionView": {
"id": "{9cfb60cf-354c-4194-9e2e-6bab41c6b280}-{1}",
"title": "UT",
"description": "Sample Text",
"order": "4"
},
"title": "PR",
"Description": [
{
"type": "label",
"value": "Sample"
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": "Sample "
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": "Sample"
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": "Sample "
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": "Sample"
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": "any one programme/risk</li><li>a maximum premium of "
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": "Sample"
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": "<br/>SSample"
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": "Sample"
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": ".Sample"
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": ", on Lloyd's paper, in respect of Canadian domiciled Property risks<br/>Your authority for Health extends to unlimited Healthcare where required by statute<br/>You may accept up to "
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": ", on Lloyd's paper, in respect of declarations under the Coast P&I Facility<br/>You may accept up to "
},
{
"type": "dropDown",
"value": "USD",
"options": [ "USD", "INR", "Dollar" ]
},
{
"type": "text",
"value": "50"
},
{
"type": "label",
"value": ", on Lloyd's paper, in respect of combined primary and excess grounding liability<br/>"
}
],
"order": "6",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"displayColumns": [],
"tableValues": null,
"placeHolderValues": "",
"organizationDataView": [
{
"id": "{8b958d63-d605-4b9a-a3c4-a3c1c052316e}-{1}",
"orgGroupName": "QQ",
"orgGroupType": "DD",
"orgLevel": 1,
"orgParentGroupId": ""
}
],
"id": "{22505164-4d56-493e-8df2-b1bb53ab419a-uw}-{1}",
"_etag": "\"0d00acca-0000-0c00-0000-5c94ef400000\"",
"partitionKey": "GGG-CCCCOOOOO-{22505164-4d56-493e-8df2-b1bb53ab419a-uw}-{1}",
"type": "CCCCOOOOO",
"clientId": "GGG",
"createdBy": "MM",
"createdDate": "2018-12-12T00:00:00",
"modifiedBy": "PPP",
"modifiedDate": null,
"isactive": false
},
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"baseDataid": "{ac949799-60c7-4f85-840f-f30203c5ee43}-{1}",
"subType": "Block",
"sectionView": {
"id": "{fca09906-dff9-40b2-a971-28fef7f37dbf}-{1}",
"title": "GR",
"description": "",
"order": "2"
},
"title": "",
"description": "Sample",
"order": "1",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"displayColumns": [],
"tableValues": null,
"placeHolderValues": "",
"organizationDataView": [
{
"id": "{8b958d63-d605-4b9a-a3c4-a3c1c052316e}-{1}",
"orgGroupName": "QQ",
"orgGroupType": "DD",
"orgLevel": 1,
"orgParentGroupId": ""
}
],
"id": "{8652fedc-0d7c-48d8-bc3f-577294551671-uw}-{1}",
"_etag": "\"0d00baca-0000-0c00-0000-5c94ef400000\"",
"partitionKey": "GGG-CCCCOOOOO-{8652fedc-0d7c-48d8-bc3f-577294551671-uw}-{1}",
"type": "CCCCOOOOO",
"clientId": "GGG",
"createdBy": "MM",
"createdDate": "2018-12-12T00:00:00",
"modifiedBy": "PPP",
"modifiedDate": null,
"isactive": false
},
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"baseDataid": "{522f1248-0882-4348-9bba-59c056c816c8}-{1}",
"subType": "Clause",
"sectionView": {
"id": "{b3cdda34-1fd2-4463-9aa0-24beff4b83fe}-{1}",
"title": "LLL",
"description": "",
"order": "3"
},
"title": "UP",
"Description": [
{
"type": "label",
"value": "Sample"
}
],
"order": "1",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"displayColumns": [],
"tableValues": null,
"placeHolderValues": "",
"organizationDataView": [
{
"id": "{8b958d63-d605-4b9a-a3c4-a3c1c052316e}-{1}",
"orgGroupName": "QQ",
"orgGroupType": "DD",
"orgLevel": 1,
"orgParentGroupId": ""
}
],
"id": "{944eae3d-fa0f-4b0e-9c66-3499a16fc2fd-uw}-{1}",
"_etag": "\"0d00bfca-0000-0c00-0000-5c94ef400000\"",
"partitionKey": "GGG-CCCCOOOOO-{944eae3d-fa0f-4b0e-9c66-3499a16fc2fd-uw}-{1}",
"type": "CCCCOOOOO",
"clientId": "GGG",
"createdBy": "MM",
"createdDate": "2018-12-12T00:00:00",
"modifiedBy": "PPP",
"modifiedDate": null,
"isactive": false
},
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"baseDataid": "{6c6a3c80-3536-4c51-8ccf-fcdc16d94090}-{1}",
"subType": "Table",
"sectionView": {
"id": "{9cfb60cf-354c-4194-9e2e-6bab41c6b280}-{1}",
"title": "KKPKPKPK",
"description": "",
"order": "4"
},
"title": "PT",
"description": "",
"order": "4",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"displayColumns": [ ".", "KKKKKKK", "EP", "P" ],
"tableValues": [
{
".": "Level 11",
"KKKKKKK": "",
"EP": "Level 21",
"P": "",
"isRowEditable": false
},
{
".": "Asbestos - other than licensed removers",
"KKKKKKK": "GBP 5M",
"EP": ".",
"isRowEditable": false
},
{
".": "Auto manufacturing - safety critical components",
"KKKKKKK": "GBP 10M",
"EP": ".",
"isRowEditable": false
},
{
".": "Rail - contracting companies",
"KKKKKKK": "GBP 5M",
"EP": ".",
"isRowEditable": false
},
{
".": "Asbestos - other than licensed removers",
"KKKKKKK": ".",
"EP": "GBP 10M",
"isRowEditable": false
},
{
".": "Rail - contracting companies",
"KKKKKKK": ".",
"EP": "GBP 10M",
"isRowEditable": false
}
],
"placeHolderValues": "",
"organizationDataView": [
{
"id": "{8b958d63-d605-4b9a-a3c4-a3c1c052316e}-{1}",
"orgGroupName": "QQ",
"orgGroupType": "DD",
"orgLevel": 1,
"orgParentGroupId": "."
}
],
"id": "{91de8a0b-4156-4121-be05-844b03928c29-uw}-{1}",
"_etag": "\"0d00c5ca-0000-0c00-0000-5c94ef410000\"",
"partitionKey": "GGG-CCCCOOOOO-{91de8a0b-4156-4121-be05-844b03928c29-uw}-{1}",
"type": "CCCCOOOOO",
"clientId": "GGG",
"createdBy": "MM",
"createdDate": "2018-12-12T00:00:00",
"modifiedBy": "PPP",
"modifiedDate": null,
"isactive": false
},
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"baseDataid": "{92860693-e038-4a58-814c-6a74d59e7cce}-{1}",
"subType": "Clause",
"sectionView": {
"id": "{9cfb60cf-354c-4194-9e2e-6bab41c6b280}-{1}",
"title": "KKPKPKPK",
"description": "",
"order": "4"
},
"title": "",
"Description": [
{
"type": "label",
"value": "Sample"
}
],
"order": "9",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"displayColumns": [],
"tableValues": null,
"placeHolderValues": "",
"organizationDataView": [
{
"id": "{8b958d63-d605-4b9a-a3c4-a3c1c052316e}-{1}",
"orgGroupName": "QQ",
"orgGroupType": "DD",
"orgLevel": 1,
"orgParentGroupId": ""
}
],
"id": "{af17341e-a88c-4564-8296-c513e3708af2-uw-per}-{1}",
"_etag": "\"0d00e3ca-0000-0c00-0000-5c94ef420000\"",
"partitionKey": "GGG-CCCCOOOOO-{af17341e-a88c-4564-8296-c513e3708af2-uw-per}-{1}",
"type": "CCCCOOOOO",
"clientId": "GGG",
"createdBy": "MM",
"createdDate": "2018-12-12T00:00:00",
"modifiedBy": "PPP",
"modifiedDate": null,
"isactive": false
},
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"baseDataid": "{92860693-e038-4a58-814c-6a74d59e7cce}-{1}",
"subType": "Clause",
"sectionView": {
"id": "{9cfb60cf-354c-4194-9e2e-6bab41c6b280}-{1}",
"title": "KKPKPKPK",
"description": "",
"order": "4"
},
"title": "PL",
"Description": [
{
"type": "label",
"value": "Sample"
}
],
"order": "7",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"displayColumns": [],
"tableValues": null,
"placeHolderValues": "",
"organizationDataView": [
{
"id": "{8b958d63-d605-4b9a-a3c4-a3c1c052316e}-{1}",
"orgGroupName": "QQ",
"orgGroupType": "DD",
"orgLevel": 1,
"orgParentGroupId": ""
}
],
"id": "{af17341e-a88c-4564-8296-c513e3708af2-uw}-{1}",
"_etag": "\"0d00e8ca-0000-0c00-0000-5c94ef420000\"",
"partitionKey": "GGG-CCCCOOOOO-{af17341e-a88c-4564-8296-c513e3708af2-uw}-{1}",
"type": "CCCCOOOOO",
"clientId": "GGG",
"createdBy": "MM",
"createdDate": "2018-12-12T00:00:00",
"modifiedBy": "PPP",
"modifiedDate": null,
"isactive": false
},
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"baseDataid": "{92c5bd05-c8a2-45c1-a1e9-fd3f78c705ab}-{1}",
"subType": "Table",
"sectionView": {
"id": "{9cfb60cf-354c-4194-9e2e-6bab41c6b280}-{1}",
"title": "KKPKPKPK",
"description": "",
"order": "4"
},
"title": "KKPKPKPK PP",
"description": "",
"order": "1",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"displayColumns": [ "N", "kkk", "LPLPLPL", "Ccy", "M", "LTLT", "P" ],
"tableValues": [
{
"N": "Level 11",
"kkk": "",
"LPLPLPL": "",
"Ccy": "",
"M": "",
"LTLT": "",
"P": "",
"isRowEditable": false
},
{
"N": "Level 11",
"kkk": "",
"LPLPLPL": "",
"Ccy": "",
"M": "11",
"LTLT": "",
"P": "",
"isRowEditable": false
},
{
"N": "QQQl",
"kkk": "QQQQ",
"LPLPLPL": "DDDD",
"Ccy": "GBP",
"M": "10M",
"LTLT": "Any one vessel",
"isRowEditable": false
},
{
"N": "Marine Cargo",
"kkk": "QIEL",
"LPLPLPL": "Lineslip and other non-coverholder facilities",
"Ccy": "GBP",
"M": "5M",
"LTLT": "Any one event",
"isRowEditable": false
},
{
"N": "KKKK",
"kkk": "PPPP",
"LPLPLPL": "DDDD",
"Ccy": "GBP",
"M": "20M",
"LTLT": "Any one vessel",
"isRowEditable": false
}
],
"placeHolderValues": "",
"organizationDataView": [
{
"id": "{8b958d63-d605-4b9a-a3c4-a3c1c052316e}-{1}",
"orgGroupName": "QQ",
"orgGroupType": "DD",
"orgLevel": 1,
"orgParentGroupId": ""
}
],
"id": "{d036bc60-db2d-4c93-86ff-981a62e207ca-uw}-{1}",
"_etag": "\"0d00eacb-0000-0c00-0000-5c94ef530000\"",
"partitionKey": "GGG-CCCCOOOOO-{d036bc60-db2d-4c93-86ff-981a62e207ca-uw}-{1}",
"type": "CCCCOOOOO",
"clientId": "GGG",
"createdBy": "MM",
"createdDate": "2018-12-12T00:00:00",
"modifiedBy": "PPP",
"modifiedDate": null,
"isactive": false
},
{
"dalId": "{QQ-4b3544ef-3821-439c-84cf-b6f18c9a86fc-uw}-{1}",
"baseDataid": "{bf1f6e82-6afd-4837-81ab-acabc665da14}-{1}",
"subType": "Clause",
"sectionView": {
"id": "{b3cdda34-1fd2-4463-9aa0-24beff4b83fe}-{1}",
"title": "LLL",
"description": "",
"order": "3"
},
"title": "klklkl",
"Description": [
{
"type": "label",
"value": "sAMPLE tEXT"
}
],
"order": "4",
"status": "Active",
"startDate": "2018-12-12T00:00:00",
"endDate": null,
"displayColumns": [],
"tableValues": null,
"placeHolderValues": "",
"organizationDataView": [
{
"id": "{8b958d63-d605-4b9a-a3c4-a3c1c052316e}-{1}",
"orgGroupName": "QQ",
"orgGroupType": "DD",
"orgLevel": 1,
"orgParentGroupId": ""
}
],
"id": "{QQ-851f96e7-542f-4a57-a0b1-35feb4698f5e-uw}-{1}",
"_etag": "\"0d0062cc-0000-0c00-0000-5c94ef5a0000\"",
"partitionKey": "GGG-CCCCOOOOO-{QQ-851f96e7-542f-4a57-a0b1-35feb4698f5e-uw}-{1}",
"type": "CCCCOOOOO",
"clientId": "GGG",
"createdBy": "MM",
"createdDate": "2018-12-12T00:00:00",
"modifiedBy": "PPP",
"modifiedDate": null,
"isactive": false
}
]
}
getClauseData(dalContentdata) {
let dynamicClauseHtmlSource = '<h4>' + dalContentdata.title + '</h4>';
dynamicClauseHtmlSource = dynamicClauseHtmlSource + '<p></p>';
dynamicClauseHtmlSource = dynamicClauseHtmlSource + + '<p style="text-align:justify;line-height:0.3em">' + dalContentdata.description + '</p>';
dynamicClauseHtmlSource = this.brToNewLine(dynamicClauseHtmlSource);
return dynamicClauseHtmlSource;
}
getBlockData(dalContentdata) {
let dynamicBlockHtmlSource = '<h4>' + dalContentdata.title + '</h4>';
dynamicBlockHtmlSource = dynamicBlockHtmlSource + '<p></p>';
dynamicBlockHtmlSource = dynamicBlockHtmlSource + dalContentdata.description;
dynamicBlockHtmlSource = this.brToNewLine(dynamicBlockHtmlSource);
return dynamicBlockHtmlSource;
}
getTableData(dalContentdata) {
let tableSource = "<table>";
tableSource = tableSource + "<tr>";
for (var k = 0; k < dalContentdata.displayColumns.length; k++) {
tableSource = tableSource + "<th style='word-wrap: break-word'>" + dalContentdata.displayColumns[k] + "</th>";
}
tableSource = tableSource + "</tr>";
for (var j = 0; j < dalContentdata.tableValues.length; j++) {
tableSource = tableSource + "<tr>";
for (var k = 0; k < dalContentdata.displayColumns.length; k++) {
tableSource = tableSource + "<td style='word-wrap: break-word'>" + dalContentdata.tableValues[0][dalContentdata.displayColumns[k]] + "</td>";
}
tableSource = tableSource + "</tr>";
}
tableSource = tableSource + "</table>";
return tableSource;
}
brToNewLine(str) {
return str.replace(/<br ?\/?>/g, "\n");
}

Highcharts Treemap Data Labels issue in IE & Chrome

It is observed that the Data Labels in Highcharts Treemap visible/disappear based on the browser. Fiddle here
In this example, the Title2 (in right-most box) is not visible in Chrome but visible in IE 11. The visibility can be changed either by changing the width of the chart or by dragging the fiddle slider (vertical). This is not consistent though. Is my observation correct? If so how do i fix this?
One more observation that by adding useHTML: true in Level2 DataLabels the labels can be seen.
$(function () {
var data = [{
"id": "Title1_Grp_Id0",
"name": "Title1",
"value": 14979,
"fqn": "MySelFqn.Title1",
"levelName": "Plant",
"path": "Title1"
}, {
"name": "Error",
"fqn": "MySelFqn.Title1",
"totalEventCount": 14616,
"totalDowntime": 457.0799999998797,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title1_Grp_Id0",
"value": 14616,
"eventType": "Error"
}, {
"name": "None",
"fqn": "MySelFqn.Title1",
"totalEventCount": 363,
"totalDowntime": 53017.05748111113,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title1_Grp_Id0",
"value": 363,
"eventType": "None"
}, {
"id": "Title2_Grp_Id1",
"name": "Title2",
"value": 2173,
"fqn": "MySelFqn.Title2",
"levelName": "Plant",
"path": "Title2"
}, {
"name": "Error",
"fqn": "MySelFqn.Title2",
"totalEventCount": 1242,
"totalDowntime": 80.18999999999983,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 1242,
"eventType": "Error"
}, {
"name": "None",
"fqn": "MySelFqn.Title2",
"totalEventCount": 919,
"totalDowntime": 45174.184894999984,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 919,
"eventType": "None"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title2",
"totalEventCount": 11,
"totalDowntime": 48,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 11,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title2",
"totalEventCount": 1,
"totalDowntime": 18.93,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 1,
"eventType": "Breakdown"
}, {
"id": "Title3_Grp_Id2",
"name": "Title3",
"value": 5246,
"fqn": "MySelFqn.Title3",
"levelName": "Plant",
"path": "Title3"
}, {
"name": "None",
"fqn": "MySelFqn.Title3",
"totalEventCount": 4686,
"totalDowntime": 48073.08156194443,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 4686,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title3",
"totalEventCount": 508,
"totalDowntime": 38.6000000000001,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 508,
"eventType": "Error"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title3",
"totalEventCount": 34,
"totalDowntime": 4215.05122361111,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 34,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title3",
"totalEventCount": 18,
"totalDowntime": 738.9399999999999,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 18,
"eventType": "Breakdown"
}, {
"id": "Title4_Grp_Id3",
"name": "Title4",
"value": 1418,
"fqn": "MySelFqn.Title4",
"levelName": "Plant",
"path": "Title4"
}, {
"name": "None",
"fqn": "MySelFqn.Title4",
"totalEventCount": 634,
"totalDowntime": 50563.53225749999,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 634,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title4",
"totalEventCount": 467,
"totalDowntime": 69.8700000000002,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 467,
"eventType": "Error"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title4",
"totalEventCount": 223,
"totalDowntime": 11325.920000000001,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 223,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title4",
"totalEventCount": 88,
"totalDowntime": 545.9000000000002,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 88,
"eventType": "Breakdown"
}, {
"name": "Planned",
"fqn": "MySelFqn.Title4",
"totalEventCount": 6,
"totalDowntime": 790.7,
"color": "rgb(51,51,255)",
"id": "Planned_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 6,
"eventType": "Planned"
}, {
"id": "Title6_Grp_Id4",
"name": "Title6",
"value": 796,
"fqn": "MySelFqn.Title6",
"levelName": "Plant",
"path": "Title6"
}, {
"name": "None",
"fqn": "MySelFqn.Title6",
"totalEventCount": 429,
"totalDowntime": 83003.57523555551,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 429,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title6",
"totalEventCount": 290,
"totalDowntime": 26.28000000000002,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 290,
"eventType": "Error"
}, {
"name": "Planned",
"fqn": "MySelFqn.Title6",
"totalEventCount": 5,
"totalDowntime": 171.2,
"color": "rgb(51,51,255)",
"id": "Planned_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 5,
"eventType": "Planned"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title6",
"totalEventCount": 19,
"totalDowntime": 1893.2799999999997,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 19,
"eventType": "Breakdown"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title6",
"totalEventCount": 53,
"totalDowntime": 5577.799999999999,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 53,
"eventType": "Standby"
}, {
"id": "Title5_Grp_Id5",
"name": "Title5",
"value": 1287,
"fqn": "MySelFqn.Title5",
"levelName": "Plant",
"path": "Title5"
}, {
"name": "None",
"fqn": "MySelFqn.Title5",
"totalEventCount": 936,
"totalDowntime": 58452.91053249994,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 936,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title5",
"totalEventCount": 277,
"totalDowntime": 25.760000000000015,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 277,
"eventType": "Error"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title5",
"totalEventCount": 32,
"totalDowntime": 373.01999999999986,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 32,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title5",
"totalEventCount": 42,
"totalDowntime": 185.20999999999995,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 42,
"eventType": "Breakdown"
}, {
"id": "Title7_Grp_Id6",
"name": "Title7",
"value": 1765,
"fqn": "MySelFqn.Title7",
"levelName": "Plant",
"path": "Title7"
}, {
"name": "None",
"fqn": "MySelFqn.Title7",
"totalEventCount": 1219,
"totalDowntime": 64004.68101777776,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 1219,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title7",
"totalEventCount": 411,
"totalDowntime": 52.79000000000006,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 411,
"eventType": "Error"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title7",
"totalEventCount": 44,
"totalDowntime": 3863.4999999999995,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 44,
"eventType": "Breakdown"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title7",
"totalEventCount": 86,
"totalDowntime": 13847.970000000003,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 86,
"eventType": "Standby"
}, {
"name": "Planned",
"fqn": "MySelFqn.Title7",
"totalEventCount": 5,
"totalDowntime": 86.52999999999998,
"color": "rgb(51,51,255)",
"id": "Planned_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 5,
"eventType": "Planned"
}]
$('#container').highcharts({
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true,
//align: 'left',
//verticalAlign: 'top',
//color: 'rgba(255, 0, 0, 1)',
shadow: false,
//color: "rgb(255, 255, 255)",
style: {
fontSize: '15px',
color:'red'
//fontWeight: 'bold',
//opacity:1
//zIndex: 99999
},
},
borderWidth: 5
}, {
level: 2,
dataLabels: {
//useHTML: true, //enabling this changes this behaviour
enabled: true,
shadow: false,
color: "rgb(255, 255, 255)"
},
borderWidth: 5
}],
data: data
}]
});
});
There is a default dataLabels collision detection logic in use and lebels that are overlapping each other will be hidden. It seems that in IE11, because of browser differences, different dataLabel gets hidden than in Chrome. See JSFiddle with allowOverlap set to true to notice that labels are overlapping each other: http://jsfiddle.net/jgnktcvr/
When you will set useHTML: true in second level of dataLabels, then sizes of labels will change and in that case both charts will look the same.
A solution might be to set labelrank for each point or for the one that are important, that way you can control which labels will be hidden in case of an overlap.
JSFiddle: http://jsfiddle.net/zgqr0ozv/5/
Other option could be to write custom collision detection logic that will override the default one.

Resources