Поле токена parseJSON данные в переменную для сравнения с существующими токенами, формат значения

Question

Мне нужно использовать данные JSON для предопределенных полей токенов.

У меня есть небольшая выборка данных, которая отлично работает, но я не могу понять, как использовать данные JSON в моем сценарии. Кавычки вокруг ключей, которые я заметил, отсутствуют в файле JSON.

Попытка предотвратить добавление случайных и дублирующих токенов. Основная цель - сравнить ввод текста с доступными объектами.

Codepen здесь

$(function () {

            //var sourceDataObj = jQuery.parseJSON( "https://jsonplaceholder.typicode.com/comments" );

            //THIS SMALL SAMPLE WORKS 
            var sourceDataObj = [{"id": "1","value": "red"},{"id": "2","value": "green" },{"id": "3","value": "blue"},{"id": "4","value": "yellow" }];


            $('#search').tokenfield({
                autocomplete: {
                    source: sourceDataObj,
                    delay: 100
            },
                showAutocompleteOnFocus: true
            });

            $('#search')
            .on('tokenfield:createtoken', function (event) {
                var existingTokens = $(this).tokenfield('getTokens');
                var exists = true;
                //PREVENT DUPLICATION
                $.each(existingTokens, function(index, token) {
                    if (token.value === event.attrs.value)
                        event.preventDefault();
                });
                //ALLOW ONLY TOKENS FROM SOURCE
                $.each(sourceDataObj, function(index, token) {
                    if (token.value === event.attrs.value)
                        exists = false;
                });
                if(exists === true)
                    event.preventDefault();
            })

            .on('tokenfield:removedtoken', function (event) {
                    alert('Token ' + event.attrs.value + ' removed!')
            })           


        });
    </script>