JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

CSS

table {}
td, th { border: 1px solid #ccc; }

JavaScript

QueryResults = {
    "Results": [
        {
            "Name" : "QA Cycle 1",
            "State" : "Completed",
            "StoryName" : "FB Integration"
        },
        {
            "Name" : "QA Cycle 2",
            "State" : "Defined",
            "StoryName" : "FB Integration"
        },
        {
            "Name" : "Development - GUI",
            "State" : "Completed",
            "StoryName" : "FB Integration"
        },
        {
            "Name" : "Development - Backend",
            "State" : "Defined",
            "StoryName" : "FB Integration"
        },
        {
            "Name" : "QA Cycle 1",
            "State" : "Completed",
            "StoryName" : "Twitter Integration"
        },
        {
            "Name" : "QA Cycle 2",
            "State" : "Defined",
            "StoryName" : "Twitter Integration"
        },
        {
            "Name" : "Development - GUI",
            "State" : "Completed",
            "StoryName" : "Twitter Integration"
        },
        {
            "Name" : "Development - Backend",
            "State" : "Defined",
            "StoryName" : "Twitter Integration"
        }
    ]
}

var stories = {};
for (var i=0; i<QueryResults.Results.length; i++) {
    var result = QueryResults.Results[i],
        name = result.StoryName
    if (!(name in stories))
        stories[name] = {};
    stories[name][result.Name] = result.State;
}

var keys = ['Quality', 'Development'];

var data = "<table><tr><th>Story Name</th><th>Quality</th><th>Development</th></tr>";

for (var storyname in stories) {
    var story = stories[storyname];
    
    // variables for shortening the code
    var sub1 = story['QA Cycle 1'],
        sub2 = story['QA Cycle 2'],
        main = 'Quality';
    
    if (sub1 && sub2) { // neither is NA
        if (sub1 == sub2)
            story[main] = sub1;
        else if (sub1=="Completed" && sub2=="Defined")
            story[main] = "In-Progress";
        else
            story[main] = "NA";
...