заполнить раскрывающийся список с json (SyntaxError: неожиданный токен {в 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>

Answer 1

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