python - Printing to a html rows and columns are backwards (JSON CALL) -

i have following code in index.html grabs dictionary list , prints out keys , values table

$(function() {   $('a#search').bind('click', function() {     $.getjson('/_search', {       a: $('input[name="a"]').val()     }, function(data) {       var tabledata = '<table>'       $.each(data.result, function(key, value){         tabledata += '<tr><td>' + '   ' + key + '   ' + '</td>';         alert(key)         $.each(value, function(val){             alert(value[val])             tabledata += '<td>' + value[val] + '</td>';           });         tabledata += '</tr>';       });       tabledata += '</table>';       $('#table').html(tabledata);     }); 

what grabbing dictionary list search.py

result = defaultdict(list) return jsonify(result=result) 

result contains following

defaultdict(<class 'list'>, {'developer': ['office koukan', 'jorudan', 'beam software'], 'publisher': ['shouei', 'vap', 'hi tech expressions'], 'releasedate': ['march 18, 1994', 'november 18, 1994', 'october 1, 1993'], 'title': ['idea no hi', 'pachinko hi hisshouhou', 'hunthe hunt red october']}) 

however output follows

developer publisher releasedate title office    koukan    jorudan beam software shouei    vap       hi tech expressions march 18, 1994  november 18, 1994   october 1, 1993 idea no hi  pachinko hi hisshouhou  hunthe hunt red october 

when output should be

developer      publisher releasedate title office         shouei    ...         ... koukan         vap       ...         ... jorudan        ...       ...         ... beam software  ...       ...         ... 

any idea might doing wrong?

this sample of referencing (note took out part gets data , hard coded that, pushed result div.

note simple array processes differently array of objects using $.each() regarding index vs key object name (like header values have)

// sample data use (instead of json call)

var mything = {   'developer': ['office koukan', 'jorudan', 'beam software'],   'publisher': ['shouei', 'vap', 'hi tech expressions'],   'releasedate': ['march 18, 1994', 'november 18, 1994', 'october 1, 1993'],   'title': ['idea no hi', 'pachinko hi hisshouhou', 'hunthe hunt red october'] };  $(function() {   var data = mything;// sample data   // create table append rows   var tabledata = $('<table>');   // append header row   tabledata.append('<tr/>');   // reference header row append header td   var header = tabledata.find('tr').eq(0);   $.each(data, function(headthing, value) {     header.append('<td>' + headthing + '</td>');     $.each(value, function(idx, myval) {       if (!tabledata.find('tr').eq(idx + 1).length) {         tabledata.append('<tr/>'); // new row if not 1       }       // put columns in row each data       tabledata.find('tr').eq(idx + 1).append('<td>' + myval + '</td>');     });   });   // put table somewhere   $('#results').html(tabledata); }); 

here fiddle showing https://jsfiddle.net/markschultheiss/ro5egfu3/1/