JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

JavaScript

QueryResults = {
    "Results": [
        {
            "Name" : "Tech Design",
            "State" : "Completed",
            "StoryName" : "FB Integration"
        },
        {
            "Name" : "Development",
            "State" : "In-Progress",
            "StoryName" : "FB Integration"
        },
        {
            "Name" : "QA Testing",
            "State" : "Not Started",
            "StoryName" : "FB Integration"
        },
        {
            "Name" : "Front End Development",
            "State" : "Completed",
            "StoryName" : "FB Integration"
        },
        {
            "Name" : "Tech Design",
            "State" : "Not Started",
            "StoryName" : "Twitter Integration"
        },
        {
            "Name" : "Development",
            "State" : "Not Started",
            "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;
}

console.log(stories);

var keys = ["QA Testing", "Tech Design", "Front End Development","Development"];
var data = "<table><tr><th>Story Name</th><th>Tech Design</th><th>FrontEnd</th><th>QA</th><th>Development</th></tr>";

for (var storyname in stories) {
    data += "<tr><th>"+storyname+"</th>";
    for (var i=0; i<keys.length; i++)
        data += "<td>"+(stories[storyname][keys[i]] || "n.a.")+"</td>";
    data += "</tr>";
}
data += "</table>";

$('body').append(data);