2

I'm loading a JSON array from an external Domain. I have gotten this to work correctly yet I am still having problems actually showing any of the results. Using examples and other question/answers I have gotten as far as an attempt of displaying the results apparently being made, but ending in an uncaught error:

Uncaught TypeError: Cannot read property 'label' of undefined

Code snippet:

$('#citySearchBox').autocomplete({
      source: function(request, response){
          $.ajax({
              url: "/api.php",
              data: {action: "search", input: request.term},
              dataType: "jsonp"
          });
          response(function(data){
              return $.parseJSON(data);
          });
      },
      minLength: 3
  });

Server Response as seen in debugger:

[{"id":"1.3.0.0.0.0","label":"Berlin (10115)","value":"index.php?action=city&city=1.3.0.0.0.0"}, etc...]

As you can see I have attempted to parse the string into a JS Object, with shown method and also tried JSON.parse(data).

If I've made a mistake earlier than the "response" part but somehow managed to half-way bodge it please point out my mistakes.

EDIT:

I've changed the code after Bradys suggestion, but I seem to be doing something wrong with the syntax, as putting a break-point inside of the response function nothing is stopped.

This is the updated response function:

response( function(data){
        var items = data.text().slice(1, -1).split(',');
        for(i=0; i < (items.length - 3); i=i+3)
        {
            items[i] = $.parseJSON(items[i]) + ','
             + $.parseJSON(items[i+1]) + ',' + $.parseJSON(items[i+2]);
        }
        return items;
    });

Case closed, never actually got JSONP to work, but the situation changed and was no longer reliant on cross-domain communication.

For anybody interested working code is as follows:

  $('#searchBox').autocomplete({
      source: function(request, response){
          $.ajax({
              type: "GET",
              url: "api.php",
              async: true,
              data: {action: "search", input: request.term},
              success: function(data){
                  var items  = $.parseJSON(data);
                  response(items);
              }
          });
      },
      select: function(event, ui){
          $('#searchBox').val(ui.item.value);
          window.location.href = ui.item.url;
      },
      minLength: 2
  });
2
  • I think you need to drop the first line and run your loop on data. Notice that there are no quotes surrounding the server response that you pasted above. I believe you have a pure array. This might be happening because of your use of jsonp instead of json. I don't think you need jsonp here, it's for making request cross-domain and leaves you with executable JavaScript. More details of the proper use of jsonp can be found on this question: stackoverflow.com/questions/2067472/what-is-jsonp-all-about Commented Nov 24, 2015 at 19:51
  • Thank you for your help. At the time of asking I was working cross-domain, but that has changed so I got rid of the jsonp and now everything works fine... Commented Nov 25, 2015 at 12:30

1 Answer 1

1

What you're getting from the server is not a JSON string. It's an array. You should split up the array and parse each object individually.

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

1 Comment

Thanks for your help, I've made the changes to the code after your suggestions, but have explained my further problem in the edit.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.