JSFiddle - React, Tailwind, and code Playground

by jgarrido

HTML

<div id="content">Change Me</div>

CSS

#content { background-color: blue; color: white; padding: 7px; font-family: "Arial" }

JavaScript

$(function() {
    
    var jsonData = {"odata.metadata":"http://localhost:25061/odata/$metadata#NobleTempleRecord&$select=NobleStatusHistories/DuesLastPdYr","odata.count":"618","value":[{"NobleStatusHistories":[{"DuesLastPdYr":2015}]},{"NobleStatusHistories":[{"DuesLastPdYr":0}]},{"NobleStatusHistories":[{"DuesLastPdYr":0}]},{"NobleStatusHistories":[{"DuesLastPdYr":2011}]},{"NobleStatusHistories":[{"DuesLastPdYr":0}]},{"NobleStatusHistories":[{"DuesLastPdYr":0}]},{"NobleStatusHistories":[{"DuesLastPdYr":2011},{"DuesLastPdYr":2011}]},{"NobleStatusHistories":[{"DuesLastPdYr":0},{"DuesLastPdYr":2006}]},{"NobleStatusHistories":[{"DuesLastPdYr":2010}]},{"NobleStatusHistories":[{"DuesLastPdYr":0},{"DuesLastPdYr":2012}]}]};
    var values = [];
    var output = $('<ul></ul>');
    var i, n, x = 0;
    
    // console.info("value: ", jsonData.value.length);
    
    for(i in jsonData.value) {
        // console.info(jsonData.value[i]);
        for(n in jsonData.value[i]) {
            // console.info(jsonData.value[i][n][jsonData.value[i][n].length - 1].DuesLastPdYr);
            values.push( jsonData.value[i][n][jsonData.value[i][n].length - 1].DuesLastPdYr );
        }
    }
    
    for(i in values) {
        output.append( $('<li></li>').html(values[i]) );
    }
    
    // console.info(output);
    $('#content').html(output);
        
});