CODEWITHSUNDEEP
javascriptjavaangularjsjsonspring
jerryh91
jerryh91

Reputation: 1795

Angular 2: TypeScript/Javascript: Converting JSON string value to proper JSON object

In my Angular 2 app, I'm receiving the below JSON Object for an api call that I developed in the api layer in Java Spring. The controller in spring is returning a Map for the response data. (I've tried returning Map, but nothing is rendered in a GET call) When received at the Angular side, the value (a JSON Array enclosed in quotes) of each top level key value pairs in my JSON object is enclosed in quotes, rendering the JSON object unable to be indexed/filtered by name for this JSON array string in the HTML. For example I'm unable for "US/ethnicities", retrieve only the "value"'s of the correpsonding JSON Array that's actually a string . How can I convert this String that's a JSON array to a proper JSON array? 

 {
    "US/ethnicities": "[{\"value\":\"Hispanic/Latino\",\"key\":\"HISPA\"},{\"value\":\"White (Not Hispanic or Latino)\",\"key\":\"WHITE\"},{\"value\":\"Black/African American (Not Hispanic or Latino)\",\"key\":\"BLACK\"},{\"value\":\"Native Hawaiian/Other Pac Island (Not Hispanic or Latino)\",\"key\":\"PACIF\"},{\"value\":\"Asian (Not Hispanic or Latino)\",\"key\":\"ASIAN\"},{\"value\":\"American Indian/Alaska Native (Not Hispanic or Latino)\",\"key\":\"AMIND\"},{\"value\":\"Two or More Races (Not Hispanic or Latino)\",\"key\":\"TWO\"},{\"value\":\"Decline to Specify\",\"key\":\"NSPEC\"}]",
    "countries/US/states": "[{\"value\":\"Alabama\",\"key\":\"AL\"},{\"value\":\"Alaska\",\"key\":\"AK\"},{\"value\":\"American Samoa\",\"key\":\"AS\"},{\"value\":\"Arizona\",\"key\":\"AZ\"},{\"value\":\"Arkansas\",\"key\":\"AR\"},{\"value\":\"California\",\"key\":\"CA\"},{\"value\":\"Colorado\",\"key\":\"CO\"},{\"value\":\"Connecticut\",\"key\":\"CT\"},{\"value\":\"Delaware\",\"key\":\"DE\"},{\"value\":\"District of Columbia\",\"key\":\"DC\"},{\"value\":\"Florida\",\"key\":\"FL\"},{\"value\":\"Georgia\",\"key\":\"GA\"},{\"value\":\"Guam\",\"key\":\"GU\"},{\"value\":\"Hawaii\",\"key\":\"HI\"},{\"value\":\"Idaho\",\"key\":\"ID\"},{\"value\":\"Illinois\",\"key\":\"IL\"},{\"value\":\"Indiana\",\"key\":\"IN\"},{\"value\":\"Iowa\",\"key\":\"IA\"},{\"value\":\"Kansas\",\"key\":\"KS\"},{\"value\":\"Kentucky\",\"key\":\"KY\"},{\"value\":\"Louisiana\",\"key\":\"LA\"},{\"value\":\"Maine\",\"key\":\"ME\"},{\"value\":\"Maryland\",\"key\":\"MD\"},{\"value\":\"Massachusetts\",\"key\":\"MA\"},{\"value\":\"Michigan\",\"key\":\"MI\"},{\"value\":\"Minnesota\",\"key\":\"MN\"},{\"value\":\"Mississippi\",\"key\":\"MS\"},{\"value\":\"Missouri\",\"key\":\"MO\"},{\"value\":\"Montana\",\"key\":\"MT\"},{\"value\":\"Nebraska\",\"key\":\"NE\"},{\"value\":\"Nevada\",\"key\":\"NV\"},{\"value\":\"New Hampshire\",\"key\":\"NH\"},{\"value\":\"New Jersey\",\"key\":\"NJ\"},{\"value\":\"New Mexico\",\"key\":\"NM\"},{\"value\":\"New York\",\"key\":\"NY\"},{\"value\":\"North Carolina\",\"key\":\"NC\"},{\"value\":\"North Dakota\",\"key\":\"ND\"},{\"value\":\"Ohio\",\"key\":\"OH\"},{\"value\":\"Oklahoma\",\"key\":\"OK\"},{\"value\":\"Oregon\",\"key\":\"OR\"},{\"value\":\"Pennsylvania\",\"key\":\"PA\"},{\"value\":\"Puerto Rico\",\"key\":\"PR\"},{\"value\":\"Rhode Island\",\"key\":\"RI\"},{\"value\":\"South Carolina\",\"key\":\"SC\"},{\"value\":\"South Dakota\",\"key\":\"SD\"},{\"value\":\"Tennessee\",\"key\":\"TN\"},{\"value\":\"Texas\",\"key\":\"TX\"},{\"value\":\"Utah\",\"key\":\"UT\"},{\"value\":\"Vermont\",\"key\":\"VT\"},{\"value\":\"Virgin Islands\",\"key\":\"VI\"},{\"value\":\"Virginia\",\"key\":\"VA\"},{\"value\":\"Washington\",\"key\":\"WA\"},{\"value\":\"West Virginia\",\"key\":\"WV\"},{\"value\":\"Wisconsin\",\"key\":\"WI\"},{\"value\":\"Wyoming\",\"key\":\"WY\"}]",
    "genders": "[{\"value\":\"Female\",\"key\":\"F\"},{\"value\":\"Male\",\"key\":\"M\"}]",
    "compensation-types": "[{\"value\":\"Annual\",\"key\":\"A\"},{\"value\":\"Hourly\",\"key\":\"H\"}]",
    "countries": "[{\"value\":\"Canada\",\"key\":\"CA\"},{\"value\":\"United States of America\",\"key\":\"US\"}]",
    "flsa-codes": "[{\"value\":\"Computer Prof-Exempt\",\"key\":\"C\"},{\"value\":\"Computer Prof-Non Exempt\",\"key\":\"Z\"},{\"value\":\"Exempt\",\"key\":\"T\"},{\"value\":\"Non-Exempt\",\"key\":\"N\"}]",
    "employment-types": "[{\"value\":\"Full Time\",\"key\":\"F\"},{\"value\":\"Part Time\",\"key\":\"P\"}]",
    "US/military-statuses": "[{\"value\":\"Not indicated\",\"key\":\"1\"},{\"value\":\"No Military Service\",\"key\":\"2\"},{\"value\":\"Veteran of the Vietnam Era\",\"key\":\"3\"},{\"value\":\"Other Protected Veteran\",\"key\":\"4\"},{\"value\":\"Active Reserve\",\"key\":\"5\"},{\"value\":\"Inactive Reserve\",\"key\":\"6\"},{\"value\":\"Retired Military\",\"key\":\"7\"},{\"value\":\"Veteran (VA Ineligible)\",\"key\":\"8\"},{\"value\":\"Vietnam & Other Protected Vet\",\"key\":\"9\"},{\"value\":\"Pre-Vietnam-Era Veteran\",\"key\":\"B\"},{\"value\":\"Not a Vietnam-Era Veteran\",\"key\":\"N\"},{\"value\":\"Post-Vietnam-Era Veteran\",\"key\":\"P\"},{\"value\":\"Vietnam-Era Veteran\",\"key\":\"V\"},{\"value\":\"Not a Veteran\",\"key\":\"X\"}]"
  }

Upvotes: 3

Views: 9014

Answers (1)

Josh Wulf
Josh Wulf

Reputation: 4877

You can use JSON.parse to convert a string containing valid JSON into JSON. For example:

JSON.parse(string)

So if you whack that whole thing into a variable a, you can access it like this:

JSON.parse(a['US/ethnicities'])[0]

 { value: 'Hispanic/Latino', key: 'HISPA' }

JSON.parse(a['US/ethnicities'])[1]

{ value: 'White (Not Hispanic or Latino)', key: 'WHITE' }

Upvotes: 6

Related Questions