JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<table>
    <tbody>
        <tr>
            <td>Barley</td>
            <td>AK, AZ</td>
            <td class="fpdCell">[{"date":"06/01/2016","error":"Double/Triple cropping","id":2},{"date":"06/07/2016","error":"Lack of Planting Dates Established","id":2}]</td>
            <td>null</td>
        </tr>
        <tr>
            <td>Barley</td>
            <td>AK, AZ, AR</td>
            <td class="fpdCell">[{"date":"06/04/2016","error":"No Error Found","id":3},{"date":"06/27/2016","error":"Lack of Planting Dates Established","id":3},{"date":"06/28/2016","error":"Weather Patterns","id":3}]</td>
            <td>null</td>
        </tr>
        <tr>
            <td>Burley Tobacco</td>
            <td>null</td>
            <td class="fpdCell">null</td>
            <td>null</td>
        </tr>
        <tr>
            <td>Fire Cured Tobbacco</td>
            <td>null</td>
            <td class="fpdCell">null</td>
            <td>null</td>
        </tr>
        <tr>
            <td>Flue Cured Tobacco</td>
            <td>null</td>
            <td class="fpdCell">null</td>
            <td>null</td>
        </tr>
        <tr>
            <td>Oats</td>
            <td>null</td>
            <td class="fpdCell">null</td>
            <td>null</td>
        </tr>
</table>

JavaScript

$('.fpdCell').each(function() {
    var $el = $(this), html = '';
    $.each(JSON.parse($el.text()), function(i, obj) {
        html += '<li class="list-group-item">' + obj.date + '</li>';
    })
    $el.append('<ul>' + html + '</ul>');
});