Here's a sample of the string that I am trying to read as an array of objects( you can see my approach in the loadImages
function definition below):
["{\"pencil\":[[{\"startx\":343,\"starty\":107,\"endx\":344,\"endy\":107,\"thick\":2,\"color\":\"#000000\"},{\"startx\":344,\"starty\":107,\"endx\":345,\"endy\":107,\"thick\":2,\"color\":\"#000000\"},{\"startx\":345,\"starty\":107,\"endx\":347,\"endy\":109,\"thick\":2,\"color\":\"#000000\"},{\"startx\":347,\"starty\":109,\"endx\":348,\"endy\":109,\"thick\":2,\"color\":\"#000000\"},{\"startx\":348,\"starty\":109,\"endx\":349,\"endy\":111,\"thick\":2,\"color\":\"#000000\"},{\"startx\":349,\"starty\":111,\"endx\":350,\"endy\":111,\"thick\":2,\"color\":\"#000000\"},{\"startx\":350,\"starty\":111,\"endx\":351,\"endy\":112,\"thick\":2,\"color\":\"#000000\"},{\"startx\":351,\"starty\":112,\"endx\":351,\"endy\":113,\"thick\":2,\"color\":\"#000000\"},{\"startx\":351,\"starty\":113,\"endx\":352,\"endy\":113,\"thick\":2,\"color\":\"#000000\"},{\"startx\":352,\"starty\":113,\"endx\":353,\"endy\":114,\"thick\":2,\"color\":\"#000000\"},{\"startx\":353,\"starty\":114,\"endx\":354,\"endy\":115,\"thick\":2,\"color\":\"#000000\"}],[{\"startx\":196,\"starty\":163,\"endx\":195,\"endy\":163,\"thick\":2,\"color\":\"#000000\"},{\"startx\":195,\"starty\":163,\"endx\":195,\"endy\":163,\"thick\":2,\"color\":\"#000000\"},{\"startx\":195,\"starty\":163,\"endx\":193,\"endy\":166,\"thick\":2,\"color\":\"#000000\"},{\"startx\":193,\"starty\":166,\"endx\":191,\"endy\":167,\"thick\":2,\"color\":\"#000000\"},{\"startx\":191,\"starty\":167,\"endx\":191,\"endy\":169,\"thick\":2,\"color\":\"#000000\"},{\"startx\":191,\"starty\":169,\"endx\":189,\"endy\":170,\"thick\":2,\"color\":\"#000000\"},{\"startx\":189,\"starty\":170,\"endx\":187,\"endy\":172,\"thick\":2,\"color\":\"#000000\"},{\"startx\":187,\"starty\":172,\"endx\":186,\"endy\":174,\"thick\":2,\"color\":\"#000000\"},{\"startx\":186,\"starty\":174,\"endx\":185,\"endy\":175,\"thick\":2,\"color\":\"#000000\"},{\"startx\":185,\"starty\":175,\"endx\":184,\"endy\":176,\"thick\":2,\"color\":\"#000000\"},{\"startx\":184,\"starty\":176,\"endx\":183,\"endy\":178,\"thick\":2,\"color\":\"#000000\"},{\"startx\":183,\"starty\":178,\"endx\":183,\"endy\":179,\"thick\":2,\"color\":\"#000000\"}]],\"line\":[],\"rectangle\":[],\"circle\":[],\"eraser\":[],\"last_action\":[0,0]}", "{\"pencil\":[[{\"startx\":180,\"starty\":230,\"endx\":181,\"endy\":230,\"thick\":2,\"color\":\"#000000\"},{\"startx\":181,\"starty\":230,\"endx\":186,\"endy\":230,\"thick\":2,\"color\":\"#000000\"},{\"startx\":186,\"starty\":230,\"endx\":188,\"endy\":231,\"thick\":2,\"color\":\"#000000\"},{\"startx\":188,\"starty\":231,\"endx\":191,\"endy\":232,\"thick\":2,\"color\":\"#000000\"},{\"startx\":191,\"starty\":232,\"endx\":192,\"endy\":233,\"thick\":2,\"color\":\"#000000\"},{\"startx\":192,\"starty\":233,\"endx\":195,\"endy\":234,\"thick\":2,\"color\":\"#000000\"},{\"startx\":195,\"starty\":234,\"endx\":197,\"endy\":235,\"thick\":2,\"color\":\"#000000\"},{\"startx\":197,\"starty\":235,\"endx\":198,\"endy\":235,\"thick\":2,\"color\":\"#000000\"},{\"startx\":198,\"starty\":235,\"endx\":199,\"endy\":235,\"thick\":2,\"color\":\"#000000\"}]],\"line\":[],\"rectangle\":[],\"circle\":[],\"eraser\":[],\"last_action\":[0]}"]
You can better understand the formatting by copy-pasting the above in this website
I am working on a web application using Flask that helps users to create sketches, element by element. To come up with a data structure for handling such a use case, I came up with the following notation:
var canvas_data = {"pencil": [], "line": [], "rectangle": [], "circle": [], "eraser": [], "last_action": [] };
Here pencil, line, rectangle, circle and eraser contain the data of the type of mode used by the user and last_action
contains the order in which the user used pencil, rectangle etc.
Now, I was directly storing this in the database using var data = JSON.stringify(canvas_data);
once the user was done drawing an element. But, to implement an Edit feature, I needed a list of all the above canvas_data
that were stored in the database, something like:
[canvas_data, canvas_data,.......canvas_data]
I did that in the following way(c_data
is the canvas data):
c_data = [i.c_data for i in files]
data = [i.canvas_image for i in files]
targetx = [i.targetx for i in files]
targety = [i.targety for i in files]
sizex = [i.sizex for i in files]
sizey = [i.sizey for i in files]
c_data = json.dumps(c_data)
data = json.dumps(data)
targetx = json.dumps(targetx)
targety = json.dumps(targety)
sizex = json.dumps(sizex)
sizey = json.dumps(sizey)
print("Canvas Data sent from server: ", c_data)
return jsonify({'result': 'success', 'c_data': c_data, 'data': data, 'targetx': targetx, 'targety': targety, 'sizex': sizex, 'sizey': sizey})
Then in the HTML page for the same, I do the following:
<body onload="pencil(`{{ canvas_data }}`, `{{ data }}`, `{{ targetx }}`, `{{ targety }}`, `{{ sizex }}`, `{{ sizey }}`)">
And in the JavaScript part, I use a function called loadImages to use the
c_data` passed from the Flask server and HTML:
async function loadImages(c_data, data, targetX, targetY, targetWidth, targetHeight) {
console.log("Canvas data received from server(Before Processing): ", c_data);
c_data = c_data.replace(/\\/g, '');
//Remove 2nd and 2nd last characters as they contain an unneeded double quote
c_data = c_data.slice(0,1) + c_data.slice(2);
str_length = c_data.length;
c_data = c_data.slice(0, str_length - 2) + c_data.slice(str_length - 1);
console.log("Canvas data received from server(After Processing): ", c_data);
data = data.replace(/'/g, '"');
targetX = targetX.replace(/'/g, '"');
targetY = targetY.replace(/'/g, '"');
targetWidth = targetWidth.replace(/'/g, '"');
targetHeight = targetHeight.replace(/'/g, '"');
console.log("Type of c_data before parsing: ", typeof c_data);
c_data = JSON.parse(c_data);
console.log("Type of c_data after parsing: ", typeof c_data);
console.log("Canvas Data after parsing: ", JSON.stringify(c_data));
data = JSON.parse(data);
targetX = JSON.parse(targetX);
targetY = JSON.parse(targetY);
targetWidth = JSON.parse(targetWidth);
targetHeight = JSON.parse(targetHeight);
for (var i = 0; i < data.length; i++) {
var tx = parseInt(targetX[i]);
var ty = parseInt(targetY[i]);
var tw = parseInt(targetWidth[i]);
var th = parseInt(targetHeight[i]);
var img = {
src: await loadImage(data[i], i),
c_data: c_data[i],
ul: {
x: tx,
y: ty
},
ur: {
x: tx + tw,
y: ty
},
ll: {
x: tx,
y: ty + th
},
lr: {
x: tx + tw,
y: ty + th
}
};
images.push(img)
}
draw_canvas();
}
Now, all the data in the above are working fine except canvas_data
. I figured some double quotes were causing the structure to change so I removed the first and the last one, but when it still returned I tried to read the JSON more. I realised that the double quotes were causing a problem for every canvas_data
in the list of canvas_data([canvas_data, canvas_data....]
) as at the end of every canvas_data, after the last_action
there was a double quote which was causing this problem:
How do I correctly read/parse the array of canvas_data in JavaScript?
loadImages
function(you can see it in the code above) and copy-pasted that here at the end of the answer. So I think it is the literal data from the flask server.