javascript – How to handle parsing of JSON data of the following format?

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 note:

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})

And in the JavaScript part, I tried to read the above as follows:

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?

Here’s a sample of a JSON that is sent from the flask server, which I then process in the above given loadImages function:

["{"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

Leave a Comment