JSでUncaught SyntaxError: Invalid left-hand side in for-loopになります。

#内容
Flaskでファイル送信FORMを動的に作っています。

#状況
JSでUncaught SyntaxError: Invalid left-hand side in for-loopになります。

#コンセプト
FORMからFLASKには、actionタグに追加したURL/IDで飛ばそうとしています。
JSにはソースの可読性を高めるため、タイトルとURL末尾のエンドを書いた
配列を使い、Flaskでレンダリングしたあと、JSで埋め込みしようとしています。

html
1
2          {% for i in forms %}
3          <h1 id = "t{{loop.index}}"></h1>
4          <p>
5              <form id = "f{{loop.index}}" class="form form-horizontal"
6                   method="POST" action="{{url_for('data_import')}}"  
7                   enctype="multipart/form-data">
8                  <input type="file" name="file">
9                  <input type="submit" >
10              </form>
11          </p>
12          {% endfor %}
13
14
15<script>
16    var dict = 
17        {
18        "データ１":"MAP",
19        "データ２":"PAL",
20        "データ３":"NUM",
21        "データ４":"BUN"
22        }
23
24    for(key,index in dict){
25        document.getElementById('f'+index).action += "/"+dict[key]
26        document.getElementById('t'+index).textContent = dict[index]
27    }
28</script>

#相談
何故ここまで複雑化したのかというと、FLASK側の処理をURLエンドポイントで分岐したいことと、JS側をコード変更が容易になるようにしたいためです。

JSに詳しくなくて、FLASK側で試行錯誤したのですが、VIEWに関わる情報は
JS側で処理をしたいというのが根本にあります。

　ひとまず表題のエラーで先に進めない状態です。

すみませんがJS初心者ですので、ゆるめに見ていただければと思います。

#自己解決

調べまくってようやくゴールにたと蹴りつきました。

javascript
1
2    Object.keys(dict).map(function(key,index){
3        document.getElementById('t'+index).textContent = key;
4        document.getElementById('f'+index).action += "/"+dict[key];
5    });
6

kei344

2020/11/03 08:32

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答2件

やりたいことはできた。とのことなので「エラーの原因」について。

javascript
1for( key,index in dict ) {
2     ~~~~~~~~~
3     Invalid left-hand side in for-loop

ご質問にある for in ループで扱う場合

javascript
1idx=0;
2for(key in dict){
3  let val = dict[key];
4
5  console.log( idx, key, val ); // checkする
6  document.getElementById('f'+idx).action += "/"+val;
7  document.getElementById('t'+idx).textContent = key;
8  idx++;
9}