【问题标题】：Using forloop to create dynamic javascript Object使用 for 循环创建动态 javascript 对象
【发布时间】：2020-09-28 00:05:16
【问题描述】：

已编辑的问题

大家好，我想用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;

【问题讨论】：

我要检索的每个数据库行的 3 个属性索引是 [0]、[9]、[10] 如您所见，我可以在 <script> 之外使用 jinja2 模板 forloop 来完成它跨度>
尝试在 var citymap = { } 中使用 jinja2 模板 forloop，但失败了......

标签： javascript python json flask jinja2

【解决方案1】：

最后，我真是太傻了……
我所做的是使用模板引擎中的 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 %}

【讨论】：