0

I am using Ajax&Jquery to handle the JSON data( In List) comes from the server, however, the client end cannot accept the JSON data and constantly popped up the error method.

I have implemented a renderList() method to parse the List ,however it still doesn't work.

The following is my Javascript and Java code.

Can someone help me out ? Thanks in advance.

JavaScript:

var serviceURL = "http://localhost:8080/TransportationNetwork/rest/paths";


$('#findPaths').click(function() {
        getPaths();
});

function getPaths() {
    console.log('display paths');
    $.ajax({
        type:'GET',
        url: serviceURL,
        dataType:'json', // data type get back from server
        data:'st=' + dataToServer(), //data sent to server 
        success: renderList,
        error: function(jqXHR, textStatus, errorThrown){
            alert('Path Finder: ' + textStatus);
        }
    });
}



function dataToServer() {
    var array = "";
        str1 = $('#source').val();
        str2 = $('#target').val();

    array = str1 + "," + str2;

    return array;
}

function renderList(data) {
    var list = data == null ? [] : (data instanceof Array ? data : [data]);

$('#PathList li').remove();
$.each(list, function(index, path) {
    $('#PathList').append('<li>'+ path.source + ' -> ' + path.target + ': ' + path.weight + '</li>');
});

}

Java: In Resource File:

@GET
@Produces(MediaType.APPLICATION_JSON)
public List<DirectedEdge> pathsInfo(@QueryParam("st") String st) {
    System.out.println("Searching paths : " + st);
    return pathDao.getEdgeList(st);
}

The returned DirectedEdge Objects:

public class DirectedEdge {
private int source;
private int target;
private double weight;

public DirectedEdge() {

}

public DirectedEdge(int v, int w, double weight) {
    super();
    this.source = v;
    this.target = w;
    this.weight = weight;
}
.... Other code  ...
}

Testing Result from Server

Thomas Hu
  • 45
  • 1
  • 2
  • 9
  • are you sure you're sending the data in the right format? – devlin carnate Nov 06 '15 at 16:15
  • as you can see the picture from the bottom "testing result from server". i was using postman to do the test the data comes from the server is indeed in json format. @devlincarnate – Thomas Hu Nov 06 '15 at 17:21
  • I understand the data coming from the server is json. My question is whether you've verified the data you're sending TO the server is in the correct format. You haven't specified a contentType so I'm assuming the server is expecting you to send the default contentType. What is the value of `'st=' + dataToServer()` ? – devlin carnate Nov 06 '15 at 17:52
  • Oh, I do not need to sent JSON data to Server, but I need the JSON data sent from the Server to Client side, the "st" is a java variable (as can be seen from the java code) , it is used to accept two points id, and I use a "," to separate them, it is in String data type. @devlincarnate – Thomas Hu Nov 06 '15 at 17:59
  • I have posted the specific question in this page, please check it: http://stackoverflow.com/questions/33572801/no-access-control-allow-origin-header-when-receiving-json-data-from-server @devlincarnate – Thomas Hu Nov 06 '15 at 18:01

1 Answers1

0

your json should return as a string, not an Array. try using JSON.parse

JSON.parse docs

renderList should look something like this:

function renderList(data) {
  var parsedData = JSON.parse(data);
  var list = parsedData == null ? [] : (parsedData instanceof Array ? parsedData : [parsedData]);
}

FYI: instanceof is rather unreliable. I recommend adding this helper method to your code for determining types in the future:

function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

This will return a string representation of the object type.

You can see more on this topic here: instanceof in JavaScript

Community
  • 1
  • 1
JohnStrong
  • 218
  • 1
  • 2
  • 8