1

I would like to add some features wherein when you select an event option it will render a list below the calendar. I have used select option and when it change values it will populate a list. I am using jQuery and JSON file this is the code, but it return an error.

JSON format example: {
    "title": "",
    "start": "",
    "tags": "",
    "imageurl": "",
    "products": [
      {
        "name": "",
        "url": "",
        "time": "",
        "location": ""
      }

     ]
     }

VM66:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse () at Object.success (eventcalendarjson.html:610) at n (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at w (jquery.min.js:4) at XMLHttpRequest.d (jquery.min.js:4)

$("#search").change(function () {
        $("html, body").animate({ scrollTop: $(".calendar").offset().top }, 1500);
        var selectedEvent = $("#search").val();

        $.getJSON('events.json', function (data) {
            var ourData = JSON.parse(data);
            render(selectedEvent, ourData);
        });
    });

    function render(selectedEvent, data) {
        $(".order-details-table").empty();
        $(data).each(function (i, v) {                
            if (selectedEvent == 'all' || v.tags == selectedEvent) {
                if (v.products)
                    $(v.products).each(function (index, p) {
                        $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">' + p.name + '</a></td><td class="o-box-name">' + v.title + '<br><small>' + p.time + '</small><small>&nbsp' + p.location + '</small></td><td><a href="' + p.url + '" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
                    });
            }                
        });
    }
Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
Chrissa
  • 155
  • 2
  • 14
  • 3
    no need to parse the data, just use render(selectedEvent, data); – charan kumar Jul 26 '18 at 09:39
  • 2
    Yes - the unexpected "o", I believe is coming from `[object object]` when you are attempting to double parse the returned data. – Lix Jul 26 '18 at 09:41

1 Answers1

1

You are parsing the data that is already parsed,

try using "data" directly

$("#search").change(function () {
        $("html, body").animate({ scrollTop: $(".calendar").offset().top }, 1500);
        var selectedEvent = $("#search").val();

        $.getJSON('events.json', function (data) {

            render(selectedEvent, data);
        });
    });
charan kumar
  • 2,119
  • 2
  • 20
  • 26