JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<h3 data-bind="visible: count() > 0"><span data-bind="text: count" class="count"></span> records returned</h3>
<ul data-bind="foreach: preferredDrugs" id="results" class="content">
<li><span data-bind="text: drugName" class="results_drug_name"></span></li>
</ul>
JavaScript
var data = {
"preferredDrugs": [
{
"pdlId": 8090,
"drugName": "y-cof-dmx",
"dosageFormDesc": "Liquid",
"strength": "4MG/5ML; 15MG/5ML; 7.5MG/5ML",
"activeIngredient": "BROMPHENIRAMINE MALEATE; DEXTROMETHORPHAN HYDROBROMIDE; PHENYLEPHRINE HYDROCHLORIDE",
"tier": "OTC",
"ancillaryCharge": "NA",
"preauthCode": " ",
"quantityLimit": " ",
"prefAlternative": null,
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 74,
"drugClassId": 152,
"drugClass": "Respiratory Tract Agents » Antitussives",
"genericInd": "1",
"tip": " "
},
{
"pdlId": 13417,
"drugName": "YASMIN 28",
"dosageFormDesc": "Tablet",
"strength": "3MG; 0.03MG",
"activeIngredient": "DROSPIRENONE; ETHINYL ESTRADIOL",
"tier": "3",
"ancillaryCharge": "AC",
"preauthCode": " ",
"quantityLimit": "28.0 tabs each 28 days",
"prefAlternative": "ethinyl estradiol/drospirenone",
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 3,
"drugClassId": 200,
"drugClass": "Hormones and Synthetic Substitutes » Contraceptives",
"genericInd": "0",
"tip": " "
},
{
"pdlId": 24765,
"drugName": "YAZ",
"dosageFormDesc": "Tablet",
"strength": "3MG; 0.02MG",
"activeIngredient": "DROSPIRENONE; ETHINYL ESTRADIOL",
"tier": "3",
"ancillaryCharge": "AC",
"preauthCode": " ",
"quantityLimit": "28.0 tabs each 28 days",
"prefAlternative": "ethinyl estradiol/drospirenone",
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 3,
...