populate dropdown with json (SyntaxError: Unexpected token { in JSON..)

Question

I am trying to simply populate a dropdown with the styleName field values from my JSON data file.

My json data looks like this, for intance:

{"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"}}
//....

Below is my 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);  
  });

I am constantly getting this error, despite a response 200, dropdown remains blank.. Error:

Uncaught (in promise) SyntaxError: Unexpected token { in JSON at position xxx
Promise.then (async)
(anonymous) @ VM8493:22
Promise.then (async)
(anonymous) @ VM8493:13

Drop-down markup is simply this:

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

What is the real JSON data (text) at point of failure? Use browser's network tools to inspect the actual server response. — user2864740
– user2864740, Commented Mar 20, 2020 at 17:33
That JSON snippet is invalid. Take the actual data over to jsonlint.com — user2864740
– user2864740, Commented Mar 20, 2020 at 17:34
I would expect [ row, row ], you are missing comma between rows in case it is single JSON and at least array brackets around. Also error should tell you exact char where your problem is. Or you can adjust a library if error message is too short for example. But I would start by console.log(response) and then use JSON.parse(response) in some local code to see problem. — Jan
– Jan, Commented Mar 20, 2020 at 17:42

Muhammad Raheel · Accepted Answer · 2020-03-20 17:43:14Z

1

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

edited Mar 20, 2020 at 17:43

answered Mar 20, 2020 at 17:37

Muhammad Raheel

8982 gold badges9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lieutenant Dan Over a year ago

Thanks, it is kind of hard to read.. You want me to just add this line, correct? 'option.text = data[i][keys[0]].styleName;'

Collectives™ on Stack Overflow

populate dropdown with json (SyntaxError: Unexpected token { in JSON..)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related