JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<pre id="output"></pre>

JavaScript

const data = [
    {
        "id": 3,
        "currency": "USD",
        "start_time": "2018-02-12T15:43:00-05:00",
        "end_time": "2018-02-12T16:43:00-05:00",
        "expires": "2018-02-12T15:48:00-05:00",
        "zone_id": 92,
        "space_id": 148,
        "vehicle_id": null,
        "rate_id": 13381,
        "payment_options": "{\"billing_type_id\": \"1\",\"card_id\": \"1\",\"wallet_id\": \"1\"}",
        "parkerentry_id": 1168,
        "parkerextension_id": null,
        "options": "[{\"items\":[{\"amount\":1,\"type\":\"fee\"}],\"payment_method\":[\"visa\",\"amex\"],\"total\":1}]"
    },
    {
        "id": 5,
        "currency": "USD",
        "start_time": "2018-02-12T14:43:00-06:00",
        "end_time": "2018-02-12T15:43:00-06:00",
        "expires": "2018-02-12T14:48:00-06:00",
        "zone_id": 120,
        "space_id": 148,
        "vehicle_id": null,
        "rate_id": 55480,
        "payment_options": "[{\"billingtypeid\":\"1\",\"cardid\":\"1\"}]",
        "parkerentry_id": 1168,
        "parkerextension_id": null,
        "options": "[{\"items\":[{\"amount\":12,\"type\":\"fee\"}],\"payment_method\":[\"visa\",\"amex\"],\"total\":12}]"
    }
];

const output = data.map(item => {
	return {
  	fees: JSON.parse(item.options)[0].items,
    quote_id: item.id,
    type: item.parkerextension_id ? 'extension' : 'initial',
  };
});

document.getElementById('output').innerHTML = JSON.stringify(output, null, 4);