Uncaught SyntaxError: Unexpected token l in JSON at position 0 when trying to parse the JSON

Question

I am trying to show the json values in the dropdown list shown inside the table. My JSON value can be as shown below:

 var ids1 = [{"pid":"23221","des":"2321"},{"pid":"1301","des":"1301"},{"pid":"1003","des":"1003"}]

 var ids = [{"pid":"laptop","des":"laptop"},{"pid":"IPAD mini.","des":"IPAD mini."}]

It can be numbers as shown in the ids1 or can be string values as shown in ids or may be can get a combination.

When i use the below code, the values in the dropdown list are shown in the quotation marks.

  $("<option />").text(JSON.stringify(value.des)).val(JSON.stringify(value.pid)).appendTo(productDropdown);

When used the below code to shown the values in the dropdown list, quotations are not shown for integer values shown in ids1, but when trying to pass ids and show in the list it is throwing the exception.

$("<option />").text(JSON.parse(value.des)).val(JSON.parse(value.pid)).appendTo(productDropdown);

Exception when trying to pass the ids in the loop.

Uncaught SyntaxError: Unexpected token l in JSON at position 0

Demo link : http://plnkr.co/edit/ilvGQPiy3nEKBuH8q46b?p=preview

js code:

 function populateSelect(ids) {
     var ids1 = [{"pid":"23221","des":"2321"},{"pid":"1301","des":"1301"},{"pid":"1003","des":"1003"}]
     var ids = [{"pid":"laptop","des":"laptop"},{"pid":"IPAD mini.","des":"IPAD mini."}]

      var productDropdown = $(".product");

    $.each(ids, function(index,value) {
      $("<option />").text(JSON.parse(value.des)).val(JSON.parse(value.pid)).appendTo(productDropdown);
    //    $("<option />").text(JSON.stringify(value.des)).val(JSON.stringify(value.pid)).appendTo(productDropdown);
    });
}

$(document).ready(function(){
    populateSelect(); 
});

There is **ZERO** JSON in your code. And as usual, *do not call* `stringify()` (or `parse()`) unless you understand what it does. `id1` is a JavaScript Object, and you're supposed to use `.text(value.des)` — , Nov 15 '18 at 16:49
There is no reason to be using stringify and parse when you have an object. — epascarello, Nov 15 '18 at 16:50
JSON is a textual _representation_ of data i.e. a string. You're using JavaScript object literals. Not the same thing, at all. Please ensure that you understand the difference. Parsing fails because you haven't got any JSON to parse. — ADyson, Nov 15 '18 at 16:54
It should be pointed out that googling the error message has this as first result for me: https://stackoverflow.com/questions/14432165/uncaught-syntaxerror-unexpected-token-with-json-parse — , Nov 15 '18 at 16:57
Possible duplicate of [Uncaught SyntaxError: Unexpected token with JSON.parse](https://stackoverflow.com/questions/14432165/uncaught-syntaxerror-unexpected-token-with-json-parse) — , Nov 15 '18 at 16:57

score 1 · Accepted Answer · answered Nov 15 '18 at 16:52

There is NO reason you should be using JSON methods in your code. They are for converting a JSON string, you have an object. So you should just be reading the properties.

function populateSelect(ids) {
     var ids1 = [{"pid":"23221","des":"2321"},{"pid":"1301","des":"1301"},{"pid":"1003","des":"1003"}]
     var ids = [{"pid":"laptop","des":"laptop"},{"pid":"IPAD mini.","des":"IPAD mini."}]

      var productDropdown = $(".product");

    $.each(ids, function(index,value) {
      $("<option />").text(value.des).val(value.pid).appendTo(productDropdown);
    });
}

$(document).ready(function(){
    populateSelect(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="product"></select>

Uncaught SyntaxError: Unexpected token l in JSON at position 0 when trying to parse the JSON

1 Answers1