javascript - 用 json 填充下拉列表（SyntaxError: Unexpected token { in JSON..）

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>

标签： javascriptarraysjsonfetch

Answer 1

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