JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

JavaScript

var data = {
    "method": "getAvgStressIntensityByCityByGender",
        "total": 12,
        "data": [{
        "key": [
            "Atlanta",
            "Female"],
            "avg Stress": 2.4
    }, {
        "key": [
            "Atlanta",
            "Male"],
            "avg Stress": 1.5
    }, {
        "key": [
            "West Palm Beach",
            "Male"],
            "avg Stress": 2.4285714285714284
    }, {
        "key": [
            "Kissimmee",
            "Male"],
            "avg Stress": 2.1666666666666665
    }, {
        "key": [
            "Unterföhring",
            "Male"],
            "avg Stress": 1.5
    }, {
        "key": [
            "Naples",
            "Male"],
            "avg Stress": 1.4
    }, {
        "key": [
            "Sedalia",
            "Female"],
            "avg Stress": 1.8
    }, {
        "key": [
            "Munich",
            "Male"],
            "avg Stress": 2.75
    }, {
        "key": [
            "Norcross",
            "Female"],
            "avg Stress": 2.25
    }, {
        "key": [
            "Berlin",
            "Female"],
            "avg Stress": 3.0
    }, {
        "key": [
            "Berlin",
            "Male"],
            "avg Stress": 2.0
    }, {
        "key": [
            "Chuo",
            "Male"],
            "avg Stress": 1.0
    }],
        "status": 200
}

var myData = _.reduce(data.data, function(acc, d, index) {
    return acc.concat(_.map(d.key, function(k) {
        return {
            key: k,
            val: d['avg Stress']
        };
    }));        
}, []);

/*
var myData = [];
for (var i = 0; i < data.data.length; i++) {
    var itm = data.data.key[i];
    tmpObj = _.map(Object.keys(itm), function (key) {
        return ({
            key: key,
            val: itm[key]
        })
    })
    myData.push(tmpObj);
} 
*/
console.log(myData)