CODEWITHSUNDEEP
javascriptarraysjsonfetch
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

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

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>

Upvotes: 0

Views: 69

Answers (1)

Muhammad Raheel
Muhammad Raheel

Reputation: 818

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

Upvotes: 1

Related Questions