问题描述

已编辑的问题

大家好，我想用forloop生成一个动态的javascript对象，但是我是js新手。
我有一个var citymap包含id, latitude, longitude
我需要从我的数据库中生成值的内容，flask
我想出了如何将它转储到 JSON 并读入HTML <script>，我现在唯一的问题是如何将它生成到一个 javascript 对象中。
我可以先在 Python 中执行此操作，然后将其转储到 HTML 模板并使用模板引擎读取它吗？{{ var }}
或者这可以在内部完成

我现在的python烧瓶代码

@app.route("/engineer", methods=['GET', 'POST'])
def engineer():
    with DatabaseUtils() as db:
        position = db.getFaultyCar()
        token = len(position)
        data = json.dumps(position)
        print(data)
    return render_template("engineer.html", token=token, position=position,data = data)

我的 jinja2 HTML 模板

<body>
      <!-- For testing output -->
      <p id="demo"></p>
    <div>
       <!-- Using template to print, but does not work inside js object -->
        {%for car in position%}
        {{ car[0] | tojson }}: {
            center: {lat: {{ car[9] | tojson }}, lng: {{ car[10] | tojson }}}
        },
        {% endfor %}
    </div>
      <div id="map"></div>
      <script type="text/javascript">
        data = JSON.parse({{ data | tojson }});
        var leng = {{ token }};

        var id = [];
        var la= [];
        var lo = [];
        for(i = 0; i < leng; i++){
            id.push(data[i][0]); #id sits at index 0
            la.push(data[i][9]); # latitude sits at index 9
            lo.push(data[i][10]); # longitude sits at index 10
        }

        var x = "";
        for(i = 0; i < leng; i++){
            x += "{" + id[i] + ": { center: {lat: " +  la[i] + ", lng:" + lo[i] + "}},";
        }
        document.getElementById("demo").innerHTML = x;

        // Correct format from google doc
        var citymap = {
          14: {
            center: {lat: -37.911012, lng: 144.742922}
          },
          2: {
            center: {lat: -37.823, lng: 144.997}
          },
          3: {
            center: {lat: -37.850, lng: 144.999}
          }
        };

网站现在的样子

我计划/想要的是这样的

        var y = {};
        for(i = 0; i < leng; i++){
            # Append x value to object y
            y.assign("{" + id[i] + ": { center: {lat: " +  la[i] + ", lng:" + lo[i] + "}},");
        }

        // create citymap with values in y
        var citymap = {
          y
        };

        var citymap = y;

标签： javascriptpythonjsonflaskjinja2

最后，我太傻了......
我所做的是使用模板引擎中的forloop来替换JS循环，从我的数据库数据中添加代表纬度和经度的索引9和10。

           {%for car in position%}
            // Add the circle for this city to the map.
            var cityCircle = new google.maps.Circle({
              strokeColor: '#FF0000',
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: '#FF0000',
              fillOpacity: 0.35,
              map: map,
              center: {lat: {{ car[9] }}, lng: {{ car[10] }}},
              radius: 100
            });
          {% endfor %}

javascript - 使用 forloop 创建动态 javascript 对象