用 json 填充下拉列表（SyntaxError: Unexpected token

Question

我试图用styleName我的 JSON 数据文件中的字段值简单地填充一个下拉列表。

例如，我的 json 数据如下所示：

{"name":{"styleName":"name","fillType":"none","fillTrans":"0","outlineType":"solid","outlineWidth":"1","outlineColor":"#ff0000"}}  

{"sarah":{"styleName":"sarah","fillTrans":"none","fillTrans":"0","outlineType":"solid","outlineWidth":"1","outlineColor":"#ff0000"}}

//....

下面是我的 JS。

let dropdown = document.getElementById('tem');

dropdown.length = 0;

let defaultOption = document.createElement('option');

defaultOption.text = 'Choose Template';

dropdown.add(defaultOption);

dropdown.selectedIndex = 0;

const urld = '../../templates.json';

fetch(urld)  

  .then(  

    function(response) {  

      if (response.status !== 200) {  

        console.warn('Looks like there was a problem. Status Code: ' + 

          response.status);  

        return;  

      }

      // Examine the text in the response

      response.json().then(function(data) {  

        let option;

        console.log(data);

        for (let i = 0; i < data.length; i++) {

          option = document.createElement('option');

          option.text = data[i].styleName;

          //option.value = data[i].abbreviation;

          dropdown.add(option);

        }    

      });  

    }  

  )  

  .catch(function(err) {  

    console.error('Fetch Error -', err);  

  });

尽管有响应，但我不断收到此错误200，下拉列表仍然为空白.. 错误：

Uncaught (in promise) SyntaxError: Unexpected token { in JSON at position xxx

Promise.then (async)

(anonymous) @ VM8493:22

Promise.then (async)

(anonymous) @ VM8493:13

下拉标记就是这样：

                    <select id="tem" class='w150'>

                    </select>

Answer 1

&nbsp;replace this option.text = data[i].styleName;let keys=Object.keys(data[i])&nbsp; &nbsp; with option.text = data[i][keys[0]].styleName