javascript + flask - Proper way passing an json array to server via post request?

Question

I have to pass an json array to the server use post request:

<form action="../../../submit/" method='post' style="margin-top:-10px" id="submitBox">

    <input class="attr" type="text" name="task_url" value= "annotate/{{task_name}}/{{taskid}}/{{frame_idx+1}}" hidden>
    <input class="attr" type="text" name="frame_id" value= "{{frame.id}}" hidden>
    <input class="attr" type="text" name="boxes_info" value = "" hidden id="boxes_info">
    <button class="btn btn-default" id="submit" class="attr_sub">
       <span class="glyphicon glyphicon-ok-circle"></span>
       Submit
    </button>
</form>

and here is how I create an json array and pass it to input value

d3.select('#submit').on('click', function(){
  var boxes = [];
  var box     = {};
  d3.selectAll('rect').each(function(){
    var rect = d3.select(this)
    box['xmin']   = rect.attr('x');
    box['ymin']   = rect.attr('y');
    box['width']  = rect.attr('width');
    box['height'] = rect.attr('height');
    box['label']  = rect.attr('class');
    boxes.push(JSON.stringify(box));

  })
  boxes = JSON.stringify(boxes);
  d3.select('#boxes_info').attr('value',boxes);
})

on the server side I get the the form data:

bboxes          = request.form["boxes_info"]
bboxes = json.loads(bboxes)
print bboxes[0]['xmin']     // error: string indices must be integers
print bboxes[0][0]          // return '{'


print bboxes
//[u'{"xmin":"433.9936102236422","ymin":"4.8","width":"404.2108626198083","height":"461.96","label":"person"}', u'{"xmin":"433.9936102236422","ymin":"-18.2","width":"404.2108626198083","height":"20","label":"person"}', u'{"xmin":"490.73482428115017","ymin":"291.84","width":"286.517571884984","height":"197.44","label":"handbag"}', u'{"xmin":"490.73482428115017","ymin":"268.84","width":"286.517571884984","height":"20","label":"handbag"}']

It seems like I have to json.loads('bboxes[0]') again. I think I make something wrong in my code. Can anyone tell me what is the proper way to do so?

Please print bboxes and show the output.

pissall
– pissall

2017-10-27 09:15:16 +00:00
Commented Oct 27, 2017 at 9:15 — pissall
– pissall, Commented Oct 27, 2017 at 9:15
just updated, thanks.

pwan
– pwan

2017-10-27 09:19:53 +00:00
Commented Oct 27, 2017 at 9:19 — pwan
– pwan, Commented Oct 27, 2017 at 9:19

Borys Serebrov · Accepted Answer · 2017-10-27 14:03:57Z

1

It looks like you do JSON.stringify twice on client, that's why you need to do json.loads on the server twice.

Your code (simplified):

d3.select('#submit').on('click', function(){
  d3.selectAll('rect').each(function(){
    ...
    boxes.push(JSON.stringify(box));  // stringify each box

  })
  boxes = JSON.stringify(boxes); // stringify array with stringified boxes
})

Instead, try to use stringify once, on the resulting array:

d3.select('#submit').on('click', function(){
  d3.selectAll('rect').each(function(){
    ...
    boxes.push(box);  // don't stringify heare

  })
  boxes = JSON.stringify(boxes); // stringify the array
})

answered Oct 27, 2017 at 14:03

Borys Serebrov

16.2k2 gold badges41 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript + flask - Proper way passing an json array to server via post request?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related