在javascript中引用python字典的特定部分

referring to specific parts of a python dictionary in javascript

本文关键字：定部 字典 python javascript 引用      更新时间：2023-09-26

我制作了一个程序，解析数据，然后用它做一个python json.dumps()。接下来，在我的javascript中，我用这些数据做了一个jQuery getJSON()。在对我的数据进行json.dumps()之前，我把它分成了三个列表，因为我不知道如何处理js中的数据。数据的结构如下：

Key: (value1, value2)

我只需要在javascript中单独引用那些单独的"列"。我觉得用python字典做dumps()可能更有效，但我不知道如何在javascript中随意引用它。显然，数据保持"分组"很重要

我该怎么做呢？

下面是我在映射项目中使用的一个完整示例。Javascript通过Ajax从flask应用程序加载数据。

JQueryajax方法与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)

Javascript：

//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');
    }
});
相关文章：