자바 스크립트의 파이썬 사전의 특정 부분을 참조하십시오.

Question

데이터를 분석 한 다음 파이썬 json.dumps()을 실행하는 프로그램을 만들었습니다. 다음으로, 나의 자바 스크립트에서, 나는이 데이터와 함께 jQuery getJSON()을했다. json.dumps()을 내 데이터로 처리하기 전에 js의 데이터를 처리하는 방법을 알지 못했기 때문에 세 가지 목록으로 분할했습니다. 데이터는 다음과 같이 구성됩니다.

Key: (value1, value2) 

나는 단지 자바 스크립트에서 개별적으로 '열'을 참조하기 만하면됩니다. 파이썬 사전을 사용하여 dumps()을 작성하는 것이 더 효율적일 수 있다고 생각하지만 자바 스크립트에서 원하는대로 참조하는 방법을 모르겠습니다. 분명히 데이터가 "그룹화 된"상태로 유지되는 것이 중요합니다.

어떻게해야할까요?

Answer 1

다음은 매핑 프로젝트에서 사용한 예입니다. Javascript는 플라스크 애플리케이션에서 Ajax를 통해 데이터를로드합니다.

JQuery ajax 메소드는 getJSON 메소드와 매우 유사합니다.

#ajax method to retreive well data for dynamic well values, x_pos, y_pos, substance concentration 
@app.route('/getWellData', methods=['GET', 'POST']) 
def getWellData(): 
    #get all samples with that date 
    date_collected = request.args.get('date_collected') 
    site_id = request.args.get('site_id') 
    site_map_id = request.args.get('site_map_id') 
    substance_id = request.args.get('substance_id') 

    well_results = wellSubstanceDataBySite(
     site_id=site_id, 
     site_map_id=site_map_id, 
     date_collected=date_collected, 
     substance_id=substance_id) 

    #return json to updateMarks ajax javascript function 
    return json.dumps(well_results) 

자바 스크립트 :

//call the ajax endpoint for getWellData to return position, values, etc 
$.ajax({ 
    dataType: "json", 
    url: '/getWellData', 
    data: data, 
    success: function(data){ 

     //iterate over each value in the data array and append it as div element to the .landmarks div 
     $.each(data, function(well_id, well){ 

      //create the mark element, must be all mashed into one line, wont work with multiple lines 
      //sutract depth_of_water (well.value) from well.top_of_casing 
      var goundwater_elevation_val = well.top_of_casing - well.value 
      var mark = '<div class="item mark" id="well-' + well_id + '" data-id="' + well_id + '" data-position="' + well.xpos + "," + well.ypos + '" data-value="' + goundwater_elevation_val.toFixed(4) + '" data-show-at-zoom="0"><div><div class="text"><input class="well-checkboxes" type="checkbox" name="enable-well-' + well_id + '" checked style="margin:3px;"><strong>' + goundwater_elevation_val.toFixed(4) + '</strong></div><img src="/static/jquery-image-viewer/example/images/mark.png" width="50px" height="50px" alt="Permanent Mark" /></div></div>'; 
      if (well.value != 0) { 
       //append the new mark to the .landmarks div 
       $('.landmarks').append(mark); 
      } 

     }); 

     //refresh all landmarks to plot the new landmarks on the map with the smoothZoom API 
     $('#sitemap').smoothZoom('refreshAllLandmarks'); 
    } 
});