React - render data in a table - javascript

I have an object in state as per the following:
{
"data": {
"available": {
"profileOne": {
"a": 14,
"b": 14,
"c": 0,
"d": 0,
"e": 18
},
"profileTwo": {
"a": 13,
"b": 9,
"c": 0,
"d": 0,
"e": 18
},
"profileThree": {
"a": 12,
"b": 12,
"c": 0,
"d": 0,
"e": 14
},
"profileFour": {
"a": 3,
"b": 3,
"c": 0,
"d": 0,
"e": 5
},
"profileFive": {
"a": 6,
"b": 3,
"c": 0,
"d": 0,
"e": 11
}
},
"isFetching": false
}
I need to use the data as per the following sample image provided below:
I understand that in order to be able to map over these I will need to convert it to an array, that's pretty much where I'm at.
Does anybody have a solution to this?


This is an example to get you started. Hope this helps.
const json = {
data: {
available: {
profileOne: {
a: 14,
b: 14,
c: 0,
d: 0,
e: 18
},
profileTwo: {
a: 13,
b: 9,
c: 0,
d: 0,
e: 18
}
}
}
};
const header = ["pro", "a", "b", "c", "d", "e"];
class App extends React.Component {
render() {
return (
<table>
<thead>
<tr>{header.map((h, i) => <th key={i}>{h}</th>)}</tr>
</thead>
<tbody>
{Object.keys(json.data.available).map((k, i) => {
let data = json.data.available[k];
return (
<tr key={i}>
<td>{k}</td>
<td>{data.a}</td>
<td>{data.b}</td>
<td>{data.c}</td>
<td>{data.d}</td>
<td>{data.e}</td>
</tr>
);
})}
</tbody>
</table>
);
}
}


You'll need to iterate over your data, but because its an object, you'll need to modify it to be map-able. Here is a possible render function:
render(){
const tableData = data.available
return
(<table>
<tr>
<td>Profile</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
{(Object.keys(tableData))
.map(key=>({...tableData[key],title:key}))
.map(row=>(
<tr>
{(Object.keys(row))
.map(key=>
<td>
{row[key]}
</td>
)
)}
</tr>
)
</table>
}
Please note that this would be much simpler if you could modify your datasource to provide an array. Objects require refactoring to be map-able, so it makes the code much more complicated.


const obj = {
"data": {
"available": {
"profileOne": {
"a": 14,
"b": 14,
"c": 0,
"d": 0,
"e": 18
},
"profileTwo": {
"a": 13,
"b": 9,
"c": 0,
"d": 0,
"e": 18
},
"profileThree": {
"a": 12,
"b": 12,
"c": 0,
"d": 0,
"e": 14
},
"profileFour": {
"a": 3,
"b": 3,
"c": 0,
"d": 0,
"e": 5
},
"profileFive": {
"a": 6,
"b": 3,
"c": 0,
"d": 0,
"e": 11
}
},
"isFetching": false
}}
const entries = Object.entries(obj.data.available).map(data => Object.entries(data))
console.log(entries)
Using Object.entries will give you a set of arrays and subarrays that you can map over.

Related

Iterate through nested JSON object array and store as key-value pair

I have to iterate through this JSON:
{
"data": 321563,
"group": [
{
"added": 42421,
"normal": {
"x": 39,
"y": "0.1300",
"b": "0.4326",
"c": "0.0552",
"f": 166833
},
"j": "240313",
"b": "0.2251",
"a": "dda",
"b": "0.101",
"a": 922,
"f": {
"c": 39,
"d": "0.263",
"a": "2.8955",
"h": "0.3211",
"d": 274
},
"a": false,
"k": 5,
"w": "0.072",
"d": "0.045",
"e": 3
},
I only want the j and k stored like a key value pair e.g. "j":k
I need to loop all of it, and store it to a file.

You can use a map to get a new array of items, this will not affect the old array.
const data = {
"game_count": 8750,
"sets": [
{
"appid": "221540",
"true_count": 9,
"bgs_avg": "0.10",
// Other data here
},
{
"appid": "123456",
"true_count": 9,
"bgs_avg": "0.20",
// Other data here
}
]
}
// Use "data.sets = data.sets.map(...)" to replace the data
// The following will only assign to a new variable
const newArray = data.sets.map(itm => { return {appid: itm.appid, true_count: itm.true_count} })
console.log(newArray)
We can also take the data and assign it directly back to the original overwriting it just by using data.sets = data.sets.map(...) as seen here:
const data = {
"game_count": 8750,
"sets": [
{
"appid": "221540",
"true_count": 9,
"bgs_avg": "0.10",
// Other data here
},
{
"appid": "123456",
"true_count": 9,
"bgs_avg": "0.20",
// Other data here
}
]
}
data.sets = data.sets.map(itm => { return {appid: itm.appid, true_count: itm.true_count} })
console.log(data)

In simple javascript this should work -
let newObj = {}
for(let i=0; i<obj.group.length; i++){
newObj[obj.group[i].j] = obj.group[i].k
}
Where 'obj' is your object
newObj will be you new Object which will contain all the key value pair

Converting one data structure to another

Hi I need to parse some structure to to show some data in line chart. I have this data structure , and I need to convert it for array example_output:
data = {
"el1": [{
"date": "2017.01",
"data1": {
"series_1": {
"a": 10,
"b": 20,
"c": 50,
"d": 15,
"e": 8
},
"Series_2": {
"yes": 5,
"no": 3
},
"Series_3": {
"s": 2,
"n": 9
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}, {
"date": "2017.02",
"data1": {
"series_1": {
"a": 56,
"b": 23,
"c": 45,
"d": 69,
"e": 14
},
"Series_2": {
"yes": 2,
"no": 1
},
"Series_3": {
"s": 6,
"n": 4
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}, {
"date": "2017.03",
"data1": {
"series_1": {
"a": 15,
"b": 12,
"c": 10,
"d": 54,
"e": 4
},
"Series_2": {
"yes": 20,
"no": 16
},
"Series_3": {
"s": 9,
"n": 7
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}
]
};
and I need OUTPUT like this for chartist.js
var example_output = [{
labels: ['2017.01', '2017.02', '2017.03'],
series: {
[10, 56, 15],
[20, 23, 12],
[50, 45, 10],
[15, 69, 54],
[8, 14, 4]
},
labels: ['2017.01', '2017.02', '2017.03'],
series: {
[5, 2, 20],
[3, 1, 16]
},
labels: ['2017.01', '2017.02', '2017.03'],
series: {
[2, 6, 9],
[9, 4, 7]
},}] ;
Please compare digits from the original and the example_output to better understand how this should look like. I use code for parse this but someting goes wrong:
function parseData(data) {
var _newData = {};
var allSeries = [];
data.elements.forEach(function(el){
_newData[el.date] = el.info
if(allSeries.length==0)
allSeries = Object.keys(el.info);
});
return allSeries.map(function(el) {
var obj = {
labels: [],
series: []
};
obj.labels = Object.keys(_newData);
Object.keys(_newData).forEach(function(_el) {
obj.series.push(Object.values(_newData[_el][el]));
});
var _newSeries = [];
obj.series[0].forEach(function(el, i){
_newSeries.push([el, obj.series[1][i]]);
});
obj.series = _newSeries;
return obj;
});
}

You can use array#forEach and array#reduce. Use first loop to iterate through el1 and then use reduce for the series key and accumulate the result in the output_example.
NOTE: The series in your output is incorrect. It should be an array instead of object.
const data = {"el1": [{"date": "2017.01","data1": {"series_1": {"a": 10,"b": 20,"c": 50,"d": 15,"e": 8},"Series_2": {"yes": 5,"no": 3},"Series_3": {"s": 2,"n": 9}},"text": [{"t": "header","c": "text"}, {"t": "header2","c": "text2"}]}, {"date": "2017.02","data1": {"series_1": {"a": 56,"b": 23,"c": 45,"d": 69,"e": 14},"Series_2": {"yes": 2,"no": 1},"Series_3": { "s": 6,"n": 4 }},"text": [{"t": "header","c": "text"}, {"t": "header2","c": "text2"}]}, {"date": "2017.03","data1": {"series_1": {"a": 15,"b": 12,"c": 10,"d": 54,"e": 4},"Series_2": {"yes": 20, "no": 16},"Series_3": {"s": 9, "n": 7}},"text": [{"t": "header","c": "text"}, {"t": "header2","c": "text2" }]}]};
transpose = (arr) => arr.reduce((r,v,i) => {
(r[i] = r[i] || []).push(v);
return r;
},[]);
let example_output = [];
data.el1.forEach((o) => {
Object.keys(o.data1).reduce((r, k, i) => {
r[i] = r[i] || {};
if('labels' in r[i])
r[i]['labels'].push(o.date);
else
r[i]['labels'] = [o.date];
if('series' in r[i])
Object.values(o.data1[k]).forEach((v,j) => r[i]['series'][j].push(v));
else
r[i]['series'] = transpose(Object.values(o.data1[k]));
return r;
},example_output);
},[]);
console.log(example_output);
.as-console-wrapper { max-height: 100% !important; top: 0; }

How to iterate over a json object list?

i am struggling how to sum all the values of "B" in my json object. I want the console log to show me the grand total of all the "B" values.
var voltot = 0;
$.each(json,function(k,v){
voltot = v.B += voltot ;
//console.log(v.B);
});
console.log(voltot);
HERE IS MY FULL JSON OBJECT.
var json=
[
{
"a": "OOCBER",
"b": "OOCL BERLIN",
"c": "CHINA",
"d": "GREAT BRITAIN",
"e": "*PI",
"f": "NGB",
"g": "CN",
"i": "GB",
"n": 9,
"o": 6,
"p": "2015-09-14",
"q": "2015-09-14",
"s": 4,
"u": "40HC",
"v": "TRLU7564566",
"w": "CN0794909",
"x": "LEIGH",
"y": "NINGBO",
"z": 395,
"B": 68.8,
"C": 7987.5,
},
{
"a": "OOCBER",
"b": "OOCL BERLIN",
"c": "CHINA",
"d": "GREAT BRITAIN",
"e": "*PI",
"f": "NGB",
"g": "CN",
"i": "GB",
"n": 9,
"o": 6,
"p": "2015-09-14",
"q": "2015-09-14",
"s": 4,
"u": "40HC",
"v": "TCLU8306124",
"w": "CN0786008",
"x": "OXFORDSHIRE",
"y": "NINGBO",
"z": 412,
"B": 68,
"C": 8790.5,
}
]
i am struggling how to sum all the values of "B" in my json object. I want the console log to show me the grand total of all the "B" values.
var voltot = 0;
$.each(json,function(k,v){
voltot = v.B += voltot ;
//console.log(v.B);
});
console.log(voltot);

This is wrong
voltot = v.B += voltot ;
Make like this
voltot += v.B;
Or
voltot = v.B + voltot ;

The preferred method to obtain an unique value from an array is the Array.prototype.reduce method, which takes a callback function and a starting value (it reduces an array to a single value). You could use it this way :
json.reduce(function(total, current) { return typeof current.B === "number" ? total + current.B : total; }, 0);
Here is a JSFiddle.

Here's JSFiddle. I just shrunk json and post. Try with full json array
var json=
[
{
"z": 395,
"B": 68,
"C": 7987.5,
},
{
"z": 395,
"B": 68,
"C": 7987.5,
}
];
var voltot = 0;
$.each(json,function(k,v){
voltot += v.B;
});
console.log(voltot);

The operator += is incorrect. #RiccardoC answer was correct.
Also, you don't need to use jquery to sum the values. You could simply do the following
var voltot=0;
json.forEach(function(element) {voltot+=element.B})
The forEach function will run a callback for each element of your array

d3.nest() sum for object array data

I have data in the format of
data={
"Month": "Jan",
"typeA": [
{
"A": 24000,
"B": 24000,
"C": 24000
}],
"typeB": [
{
"A": 20000,
"B": 14000,
"C": 10000
}],
"typeC": [
{
"A": 34000,
"B": 44000,
"C": 54000
}]
},
{
"Month": "Feb",
"typeA": [
{
"A": 84000,
"B": 64000,
"C": 14000
}],
"typeB": [
{
"A": 20000,
"B": 34000,
"C": 10000
}],
"typeC": [
{
"A": 30000,
"B": 40000,
"C": 50000
}]
}
]
I want to calculate sum of each type( ie typeA, TypeB) for indivisual months,
Ie I want data in the format below,
Month: jan
typeA:72000
typeB:44000
typeC:13200
Month:feb
typeA:162000
typeB:64000
typeC:120000
I am using d3.nest() to achieve this,
This is my code,
var months= d3.nest()
.key(function (d) { return (d.Month) })
.key(function (d) { return (d.typeA) })
.key(function (d) { return (d.typeB) })
.key(function (d) { return (d.typeC) })
.rollup(function (leaves) {
return d3.sum(leaves, function (d) { return d3.sum(sum,d3.values(d.A,d.B,d.C,d.D)) });
})
.entries(data);
I am not able to get the sum of the elements here. I'm getting zero as sum. Can anybody suggest me where I am doing wrong?

Unfortunately my other answer was for a different question but I'll leave it in case it's useful.
The answer by #Gabriel is very cool but is using d3 functions but its not generic and the categories are hard-coded in which is not ideal.
Here is a way to do it in (mostly) plain JS that is completely generic. The only assumption is that the first member of each array element is the heading being grouped and the other members are the ones to be rolled up. Anyway, as well as generic, this way is quite short.
I also included a version of the #Gabriel answer to show it's easy to generalise also.
var data = [{
"Month": "Jan",
"typeA": [
{
"A": 24000,
"B": 24000,
"C": 24000
}],
"typeB": [
{
"A": 20000,
"B": 14000,
"C": 10000
}],
"typeC": [
{
"A": 34000,
"B": 44000,
"C": 54000
}]
},
{
"Month": "Feb",
"typeA": [
{
"A": 84000,
"B": 64000,
"C": 14000
}],
"typeB": [
{
"A": 20000,
"B": 34000,
"C": 10000
}],
"typeC": [
{
"A": 30000,
"B": 40000,
"C": 50000
}]
}],
//////////////////////////////////////////////////////////////////////////////////
//Method one: without rollup
// assume that the first member of each object in the array is a heading
// e.g. Month
//////////////////////////////////////////////////////////////////////////////////
headings = data.reduce(function(headings, d) {
var h = d3.keys(d)[0]; //get the heading
return (headings [d[h]] = d3.keys(d).filter(function(p, i){return i}) //filter out the heading
.reduce(function(s, p){ //sum each of the other members
//p is the category being summed
return (s[p] = d3.sum(d3.values(d[p][0])), s);
}, {}), headings);
}, {});
d3.select("#output").text(JSON.stringify(headings));
//////////////////////////////////////////////////////////////////////////////////
//Method two: #Gabriel solution generalised
//////////////////////////////////////////////////////////////////////////////////
var months = d3.nest()
.key(function(d) { return (d.Month) })
.rollup(function (v) {
return d3.keys(v[0]).filter(function(p, i){return i}) //filter out the heading
.reduce(function(s, p){ //sum each of the other members
//p is the category being summed
return (s[p] = d3.sum(d3.values(v[0][p][0])), s);
}, {});
})
.map(data);
d3.select("#output2").text(JSON.stringify(months));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="output"></div></br>
<div id="output2"></div>

I am not much familiar with d3.nest. But I think you can get your results by using JavaScript Array map function. Try this code.
var data=[{
"Month": "Jan",
"typeA": [
{
"A": 24000,
"B": 24000,
"C": 24000
}],
"typeB": [
{
"A": 20000,
"B": 14000,
"C": 10000
}],
"typeC": [
{
"A": 34000,
"B": 44000,
"C": 54000
}]
},
{
"Month": "Feb",
"typeA": [
{
"A": 84000,
"B": 64000,
"C": 14000
}],
"typeB": [
{
"A": 20000,
"B": 34000,
"C": 10000
}],
"typeC": [
{
"A": 30000,
"B": 40000,
"C": 50000
}]
}
];
var results = data.map(function(d){
return {
Month: d.Month ,
typeA: d3.sum(d3.values(d.typeA[0])),
typeB: d3.sum(d3.values(d.typeB[0])),
typeC: d3.sum(d3.values(d.typeC[0]))
}
});
alert(JSON.stringify(results));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

You can do it with nesting like this...
data = [{
"Month": "Jan",
"typeA": [
{
"A": 24000,
"B": 24000,
"C": 24000
}],
"typeB": [
{
"A": 20000,
"B": 14000,
"C": 10000
}],
"typeC": [
{
"A": 34000,
"B": 44000,
"C": 54000
}]
},
{
"Month": "Feb",
"typeA": [
{
"A": 84000,
"B": 64000,
"C": 14000
}],
"typeB": [
{
"A": 20000,
"B": 34000,
"C": 10000
}],
"typeC": [
{
"A": 30000,
"B": 40000,
"C": 50000
}]
}],
months = d3.nest()
var months = d3.nest()
.key(function(d){return d.Month})
.rollup(function(leaves){
//leaves is an array so use d3.sum
return d3.sum(leaves, function(d) {
//d can be an object who's value can be an array
//use d3.sum
return d3.sum(d3.values(d), function(e){
//
return d3.sum(e, function(f) {
return d3.sum(d3.values(f))
});
})
} )
})
.entries(data);
d3.select("#output").text(JSON.stringify(months));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="output"></div>

You just need to change your code like this:
Add ]; end of data
data = [
{
"Month": "Jan",
"typeA": [
{
"A": 24000,
"B": 24000,
"C": 24000
}
],
"typeB": [
{
"A": 20000,
"B": 14000,
"C": 10000
}
],
"typeC": [
{
"A": 34000,
"B": 44000,
"C": 54000
}
]
},
{
"Month": "Feb",
"typeA": [
{
"A": 84000,
"B": 64000,
"C": 14000
}
],
"typeB": [
{
"A": 20000,
"B": 34000,
"C": 10000
}
],
"typeC": [
{
"A": 30000,
"B": 40000,
"C": 50000
}
]
}
];
Change your code to:
var months = d3.nest()
.key(function(d) { return (d.Month) })
.rollup(function (v) {
return {
typeA: d3.sum(d3.values(v[0].typeA[0])),
typeB: d3.sum(d3.values(v[0].typeB[0])),
typeC: d3.sum(d3.values(v[0].typeC[0]))
} })
.map(data);
console.log(JSON.stringify(months));
Edit:
You can use this type of d3.sum() function too, But remember the value's that return are string 'the part that you missed in your code' to see the actual result need to parse data.
var months = d3.nest()
.key(function(d) { return (d.Month) })
.rollup(function(v) {
return {
typeA: d3.sum(v, function(d) {
var type = d3.values(d.typeA[0]);
var array = type.map(function (x) { return parseInt(x, 10) });
return d3.sum(array);
}),
typeB: d3.sum(v, function (d) {
var type = d3.values(d.typeB[0]);
var array = type.map(function (x) { return parseInt(x, 10) });
return d3.sum(array);
}),
typeC: d3.sum(v, function (d) {
var type = d3.values(d.typeC[0]);
var array = type.map(function (x) { return parseInt(x, 10) });
return d3.sum(array);
})
}
})
.entries(data);
console.log(JSON.stringify(months));

JSON.parse() works from console but not from function/code

Why parsing string into JSON (previously created with JSON.stringify()) works from console but from function it gives enigmatic error?
console.log(output); // in console i copy it into JSON.parse() and it works
output = JSON.parse(output); // Uncaught SyntaxError: Unexpected token index:1
My JSON:
{"type":"a","items":[{"id":"767758","id1":"1384882","id2":"1413749","c":"rgba(0, 100, 0, 5)","ls":"dashed","type":"l","d":{"t":"r","type":"1","hist":true},"w":5,"off":0},{"id":"6493942","id1":"1384882","id2":"5467332","c":"rgba(105, 105, 105, 5)","ls":"1","type":"l","d":{"t":"r","type":"h","hist":false},"w":5,"off":0},{"id":"1384882","id":"6c409d02-d937-11e4-a891-53b449010d08","d":{"t":"p","age":41,"xxx":5},"type":"n","t":"123","u":"p.png","g":[{"c":"rgb(255, 255, 255)","p":"ne","t":"5","fc":"rgb(0, 0, 0 )","w":false}],"x":-20.876105573962775,"y":41.26542299248838},{"id":"1413749","id":"e7e70a00-d3e4-11e4-b3ef-53b449010d08","d":{"t":"c","active":true,"r":47},"type":"n","t":"zxc","u":"p.png","g":[{"c":"#ccff99","p":"ne","t":"42","fc":"rgb(0, 0, 0)","w":5},{"c":"rgb(0, 0, 255)","p":"nw","fc":"rgb(0, 0, 0)"}],"x":149.06285284387724,"y":5.308329729351229},{"id":"5467332","id":"8f0f5c30-d3d9-11e4-b3ef-53b449010d08","d":{"t":"c","active":true,"r":47},"type":"n","t":"asd","u":"p.png","g":[{"c":"#ccff99","p":"ne","t":"","fc":"rgb(0, 0, 0)","w":false},{"p":"nw","fc":"rgb(0, 0, 0)"}],"x":-164.24347467678655,"y":-32.64876353378594}],"combos":{"iop":[],"dfg":[]},"jk":{"width":966,"height":890,"zoom":5,"offsetX":905,"offsetY":744}}
My code, there's something missing as others gave working JSfiddles:
var memory = '';
$buttonSave.click(function (event) {
if (helpers.isNUE(chart)) { return; }
var data = chart.serialize();
data = JSON.stringify(data).split(''); // string to array
data.forEach(function (datum) { // foreach character
memory += datum.charCodeAt(0).toString(2) + '2'; // get binary charcode, add padding "2"
});
console.info('memory saved: ' + memory);
event.preventDefault();
return false;
});
$buttonLoad.click(function (event) {
var data = memory.split('2'), // get binary code for each character
output = '',
serializedChart = {};
data.forEach(function (datum) {
output += String.fromCharCode(parseInt(datum, 2)); // read binary charcode and get character from it
});
console.warn('load done:');
try {
serializedChart = JSON.parse(output);
} catch (e) {
console.warn(e);
}
});

You are missing a final } from your json string. use this:
{
"type": "a",
"items": [
{
"id": "767758",
"id1": "1384882",
"id2": "1413749",
"c": "rgba(0, 100, 0, 5)",
"ls": "dashed",
"type": "l",
"d": {
"t": "r",
"type": "1",
"hist": true
},
"w": 5,
"off": 0
},
{
"id": "6493942",
"id1": "1384882",
"id2": "5467332",
"c": "rgba(105, 105, 105, 5)",
"ls": "1",
"type": "l",
"d": {
"t": "r",
"type": "h",
"hist": false
},
"w": 5,
"off": 0
},
{
"id": "6c409d02-d937-11e4-a891-53b449010d08",
"d": {
"t": "p",
"age": 41,
"xxx": 5
},
"type": "n",
"t": "123",
"u": "p.png",
"g": [
{
"c": "rgb(255, 255, 255)",
"p": "ne",
"t": "5",
"fc": "rgb(0, 0, 0 )",
"w": false
}
],
"x": -20.876105573962775,
"y": 41.26542299248838
},
{
"id": "e7e70a00-d3e4-11e4-b3ef-53b449010d08",
"d": {
"t": "c",
"active": true,
"r": 47
},
"type": "n",
"t": "zxc",
"u": "p.png",
"g": [
{
"c": "#ccff99",
"p": "ne",
"t": "42",
"fc": "rgb(0, 0, 0)",
"w": 5
},
{
"c": "rgb(0, 0, 255)",
"p": "nw",
"fc": "rgb(0, 0, 0)"
}
],
"x": 149.06285284387724,
"y": 5.308329729351229
},
{
"id": "8f0f5c30-d3d9-11e4-b3ef-53b449010d08",
"d": {
"t": "c",
"active": true,
"r": 47
},
"type": "n",
"t": "asd",
"u": "p.png",
"g": [
{
"c": "#ccff99",
"p": "ne",
"t": "",
"fc": "rgb(0, 0, 0)",
"w": false
},
{
"p": "nw",
"fc": "rgb(0, 0, 0)"
}
],
"x": -164.24347467678655,
"y": -32.64876353378594
}
],
"combos": {
"iop": [],
"dfg": []
},
"jk": {
"width": 966,
"height": 890,
"zoom": 5,
"offsetX": 905,
"offsetY": 744
}
}

Is output already parsed? If so, it looks like you're trying to parse output twice, if the output is already a JSON value, you do not need to parse it again.

You're missing an } at the end of your JSON. If you add that it should work.
{"type":"a","items":[{"id":"767758","id1":"1384882","id2":"1413749","c":"rgba(0, 100, 0, 5)","ls":"dashed","type":"l","d":{"t":"r","type":"1","hist":true},"w":5,"off":0},{"id":"6493942","id1":"1384882","id2":"5467332","c":"rgba(105, 105, 105, 5)","ls":"1","type":"l","d":{"t":"r","type":"h","hist":false},"w":5,"off":0},{"id":"1384882","id":"6c409d02-d937-11e4-a891-53b449010d08","d":{"t":"p","age":41,"xxx":5},"type":"n","t":"123","u":"p.png","g":[{"c":"rgb(255, 255, 255)","p":"ne","t":"5","fc":"rgb(0, 0, 0 )","w":false}],"x":-20.876105573962775,"y":41.26542299248838},{"id":"1413749","id":"e7e70a00-d3e4-11e4-b3ef-53b449010d08","d":{"t":"c","active":true,"r":47},"type":"n","t":"zxc","u":"p.png","g":[{"c":"#ccff99","p":"ne","t":"42","fc":"rgb(0, 0, 0)","w":5},{"c":"rgb(0, 0, 255)","p":"nw","fc":"rgb(0, 0, 0)"}],"x":149.06285284387724,"y":5.308329729351229},{"id":"5467332","id":"8f0f5c30-d3d9-11e4-b3ef-53b449010d08","d":{"t":"c","active":true,"r":47},"type":"n","t":"asd","u":"p.png","g":[{"c":"#ccff99","p":"ne","t":"","fc":"rgb(0, 0, 0)","w":false},{"p":"nw","fc":"rgb(0, 0, 0)"}],"x":-164.24347467678655,"y":-32.64876353378594}],"combos":{"iop":[],"dfg":[]},"jk":{"width":966,"height":890,"zoom":5,"offsetX":905,"offsetY":744}}

What is typeof output? For parse() to work, it must be string but the dump in your question looks like it would return object. object means that the JSON has already been parsed and it's a JavaScript object.
So this would work:
var output = '{"type":"a","items":[{...}]}';
output = JSON.parse(output);
while this won't:
var output = {
"type":"a",
"items":[{...}]
};
output = JSON.parse(output);

Categories