Search code examples
javascriptjsonmockingmockjax

Can Mockjax handle single IDs Api from Json file


I'm using Mockjax for the first time to mock a Restful API which will return a series of data given an id. Right now i have a json file that has several Items, and i would like to have a function inside Mockjax (or where necessary) to return only the queried ID. how can I achieve this?

current code :

$.mockjax({
    url: "/Api/Cases/{caseId}",
    proxy: "/mocks/cases nuevo.json",
    dataType: 'json',
    responseTime: [500, 800]
});

$.ajax({
    type: 'GET',
    url: '/Api/Cases/',
    data: {caseId: taskId},
    success: function(data){
        //use the returned
        console.log(data);
    }
});

current error:

GET http://localhost:8080/Api/Cases/?caseId=100 404 (Not Found)

Solution

  • Great question... yes, you can do this. But you'll have to write the functionality yourself using the response callback function and then making a "real" Ajax request for the file (instead of using the proxy option). Below I just make another $.ajax() call and since I have no mock handler setup for that endpoint, Mockjax lets it go through.

    Note that setting up URL params is a little different than you suggest, here is what the mock setup looks like:

    $.mockjax({
        url: /\/Api\/Cases\/(\d+)/,  // notice the regex here to allow for any ID
        urlParams: ['caseID'],       // This defines the first matching group as "caseID"
        responseTime: [500, 800],
        response: function(settings, mockDone) {
            // hold onto the mock response object
            var respObj = this;
            // get the mock data file
            $.ajax({
                url: 'mocks/test-data.json',
                success: function(data) {
                    respObj.status = 200;
                    // We can now use "caseID" off of the mock settings.urlParams object
                    respObj.responseText = data[settings.urlParams.caseID];
                    mockDone();
                },
                error: function() {
                    respObj.status = 500;
                    respObj.responseText = 'Error retrieving mock data';
                    mockDone();
                }
            });
        }
    });
    

    There is one other problem with your code however, your Ajax call does not add the ID to the URL, it adds it to the query string. If you want to use that API endpoint you'll need to change your source code $.ajax() call as well. Here is the new Ajax call:

    $.ajax({
        type: 'GET',
        url: '/Api/Cases/' + taskId, // this will add the ID to the URL
        // data: {caseId: taskId},   // this adds the data to the query string
        success: function(data){
            //use the returned
            console.log(data);
        }
    });
    

    Note that this presumes the mock data is something like:

    {
        "13": { "name": "Jordan", "level": 21, "id": 13 },
        "27": { "name": "Random Guy", "level": 20, "id": 27 }
    }