Webapp doesn't work

Julux
Level 2
Webapp doesn't work

Hey guys,

I'm a newbie to Dataiku, and I need some help to for an upcoming exam. We get a dataset with rollcall votes of US congressmen. The main goal is to predict to which party belongs the vote. I did some data cleansing and used a ML prediction quick model to train my algorithm. The next step is to create a webapp that we can use to predict to which party belongs the vote.

I think I did the first steps correctly by deploying an API using my ML model (as you can see in the picture below)
Capture dโ€™eฬcran 2021-02-21 aฬ€ 13.19.24.png

I tried to write some HTML and JS based on previous exercices, but whenever I tried the webapp, I get the following error :

 

{"errorType":"org.springframework.web.bind.MissingServletRequestParameterException","message":"Required String parameter \u0027projectKey\u0027 is not present","detailedMessage":"Required String parameter \u0027projectKey\u0027 is not present","detailedMessageHTML":"\u003cspan\u003e\u003cspan class\u003d\"err-msg\"\u003eRequired String parameter \u0027projectKey\u0027 is not present\u003c/span\u003e\u003c/span\u003e","stackTraceStr":"org.springframework.web.bind.MissingServletRequestParameterException: Required String parameter \u0027projectKey\u0027 is not present\n\tat 

 

 I think there is an issue with the API, but can't figure what it is. Could you help me ?

0 Kudos
4 Replies
fchataigner2
Dataiker

Hi,

can you attach a full excerpt of log around the stacktrace you attached, as well as a screenshot of the error you get in the UI? 

Julux
Level 2
Author

Thank you for your help ! I'm not sure if I understanded correctly but here's my JS code :

$( "#myticket" ).submit(function( event ) {
  // We don't want to send the form
  event.preventDefault();

  // We create a dict with all variables  
  let obj = {
    features: {
      Handicapped-infants: $("Handicapped-infants").val(),
      NumberCarsOwned: $("#NumberCarsOwned").val(),
      TotalChildren: $("#TotalChildren").val(),
      Height: $("#Height").val(),
      Weight: $("#Weight").val(),
      NumberChildrenAtHome: $("#TotalChildren").val(),
      NumberCarsOwned: $("#NumberCarsOwned").val(),
      Region: $("select#Region").val(),
      Gender: $("select#Gender").val(),
      Religion: $("select#Religion").val(),
      EnglishEducation: $("select#EnglishEducation").val(),
      EnglishOccupation: $("select#EnglishOccupation").val(),
      CommuteDistance: $("#CommuteDistance").val(),
      HouseOwnerFlag: $("select#HouseOwnerFlag").val(),
      IncomeGroup: $("#IncomeGroup").val(),
        MaritalStatus: $("#MaritalStatus").val(),
      }
    };
  
  // We can check our dict in the console 
  console.log(obj);
    
  // We convert our dict to JSON
  obj = JSON.stringify(obj);
  
  // We send the request to the API  
  $.ajax({
    url: "https://dataiku.hes-so.ch:8080/public/api/v1/test/vote/predict",
    type: "POST",
    data: obj,
    dataType: 'json',
    contentType: "application/json",
    success: function (data) {
        
        // We can check the response in the console
        console.log(data);
        
        // We fill prediction value [<span id="prediction">999</span>]
        $("#prediction").text(data.result.probaPercentile);
        
        // We set bg color, icon and message
        if(data.result.prediction==1) {
            // We are in the case where the prediction is 1 (TRUE)
            $("#result").removeClass("bg-danger").addClass("bg-success");
            $("#icon").addClass("icon-trophy");
            $("#message").text("republicain");
        } else {
            // We are in the case where the prediction is 0 (FALSE)
            $("#result").removeClass("bg-success").addClass("bg-danger");
            $("#icon").addClass("icon-warning-sign");
            $("#message").text("democrate");
        }
        
        // We display the prediction-result div
        $("#prediction-result").show();
        
        // We hide the form and clear it
        $("#ticket").hide();
        $("#myticket").trigger("reset");
        
        $("#w3review").value = data;
    },
  });
});

$("#restart").click(function(){
    // We hide the results and show the form
    $("#ticket").show();
    $("#prediction-result").hide();
});

 

And here the error message :

{"errorType":"org.springframework.web.bind.MissingServletRequestParameterException","message":"Required String parameter \u0027projectKey\u0027 is not present","detailedMessage":"Required String parameter \u0027projectKey\u0027 is not present","detailedMessageHTML":"\u003cspan\u003e\u003cspan class\u003d\"err-msg\"\u003eRequired String parameter \u0027projectKey\u0027 is not present\u003c/span\u003e\u003c/span\u003e","stackTraceStr":"org.springframework.web.bind.MissingServletRequestParameterException: Required String parameter \u0027projectKey\u0027 is not present\n\tat org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.handleMissingValue(RequestParamMethodArgumentResolver.java:198)\n\tat org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:92)\n\tat org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:77)\n\tat org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:161)\n\tat org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:128)\n\tat org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:104)\n\tat org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandleMethod(RequestMappingHandlerAdapter.java:743)\n\tat org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:672)\n\tat org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:82)\n\tat org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:933)\n\tat com.dataiku.dip.server.controllers.DKUDispatcherServlet.doDispatch(DKUDispatcherServlet.java:50)\n\tat org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:867)\n\tat org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:951)\n\tat org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:842)\n\tat javax.servlet.http.HttpServlet.service(HttpServlet.java:687)\n\tat org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:827)\n\tat javax.servlet.http.HttpServlet.service(HttpServlet.java:790)\n\tat org.eclipse.jetty.servlet.ServletHolder.handle(ServletHolder.java:738)\n\tat org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1651)\n\tat com.dataiku.dip.shaker.server.ResourceFilter.doFilter(ResourceFilter.java:33)\n\tat org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1631)\n\tat org.eclipse.jetty.servlet.ServletHandler.doHandle(ServletHandler.java:549)\n\tat org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:143)\n\tat org.eclipse.jetty.security.SecurityHandler.handle(SecurityHandler.java:568)\n\tat org.eclipse.jetty.server.session.SessionHandler.doHandle(SessionHandler.java:221)\n\tat org.eclipse.jetty.server.handler.ContextHandler.doHandle(ContextHandler.java:1111)\n\tat org.eclipse.jetty.servlet.ServletHandler.doScope(ServletHandler.java:478)\n\tat org.eclipse.jetty.server.session.SessionHandler.doScope(SessionHandler.java:183)\n\tat org.eclipse.jetty.server.handler.ContextHandler.doScope(ContextHandler.java:1045)\n\tat org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:141)\n\tat org.eclipse.jetty.server.handler.HandlerWrapper.handle(HandlerWrapper.java:97)\n\tat org.eclipse.jetty.server.Server.handle(Server.java:462)\n\tat org.eclipse.jetty.server.HttpChannel.handle(HttpChannel.java:279)\n\tat org.eclipse.jetty.server.HttpConnection.onFillable(HttpConnection.java:232)\n\tat org.eclipse.jetty.io.AbstractConnection$2.run(AbstractConnection.java:534)\n\tat org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:607)\n\tat org.eclipse.jetty.util.thread.QueuedThreadPool$3.run(QueuedThreadPool.java:536)\n\tat java.lang.Thread.run(Thread.java:748)\n","stackTrace":[{"file":"RequestParamMethodArgumentResolver.java","line":198,"function":"org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.handleMissingValue"},{"file":"AbstractNamedValueMethodArgumentResolver.java","line":92,"function":"org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument"},{"file":"HandlerMethodArgumentResolverComposite.java","line":77,"function":"org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument"},{"file":"InvocableHandlerMethod.java","line":161,"function":"org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues"},{"file":"InvocableHandlerMethod.java","line":128,"function":"org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest"},{"file":"ServletInvocableHandlerMethod.java","line":104,"function":"org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle"},{"file":"RequestMappingHandlerAdapter.java","line":743,"function":"org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandleMethod"},{"file":"RequestMappingHandlerAdapter.java","line":672,"function":"org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal"},{"file":"AbstractHandlerMethodAdapter.java","line":82,"function":"org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle"},{"file":"DispatcherServlet.java","line":933,"function":"org.springframework.web.servlet.DispatcherServlet.doDispatch"},{"file":"DKUDispatcherServlet.java","line":50,"function":"com.dataiku.dip.server.controllers.DKUDispatcherServlet.doDispatch"},{"file":"DispatcherServlet.java","line":867,"function":"org.springframework.web.servlet.DispatcherServlet.doService"},{"file":"FrameworkServlet.java","line":951,"function":"org.springframework.web.servlet.FrameworkServlet.processRequest"},{"file":"FrameworkServlet.java","line":842,"function":"org.springframework.web.servlet.FrameworkServlet.doGet"},{"file":"HttpServlet.java","line":687,"function":"javax.servlet.http.HttpServlet.service"},{"file":"FrameworkServlet.java","line":827,"function":"org.springframework.web.servlet.FrameworkServlet.service"},{"file":"HttpServlet.java","line":790,"function":"javax.servlet.http.HttpServlet.service"},{"file":"ServletHolder.java","line":738,"function":"org.eclipse.jetty.servlet.ServletHolder.handle"},{"file":"ServletHandler.java","line":1651,"function":"org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter"},{"file":"ResourceFilter.java","line":33,"function":"com.dataiku.dip.shaker.server.ResourceFilter.doFilter"},{"file":"ServletHandler.java","line":1631,"function":"org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter"},{"file":"ServletHandler.java","line":549,"function":"org.eclipse.jetty.servlet.ServletHandler.doHandle"},{"file":"ScopedHandler.java","line":143,"function":"org.eclipse.jetty.server.handler.ScopedHandler.handle"},{"file":"SecurityHandler.java","line":568,"function":"org.eclipse.jetty.security.SecurityHandler.handle"},{"file":"SessionHandler.java","line":221,"function":"org.eclipse.jetty.server.session.SessionHandler.doHandle"},{"file":"ContextHandler.java","line":1111,"function":"org.eclipse.jetty.server.handler.ContextHandler.doHandle"},{"file":"ServletHandler.java","line":478,"function":"org.eclipse.jetty.servlet.ServletHandler.doScope"},{"file":"SessionHandler.java","line":183,"function":"org.eclipse.jetty.server.session.SessionHandler.doScope"},{"file":"ContextHandler.java","line":1045,"function":"org.eclipse.jetty.server.handler.ContextHandler.doScope"},{"file":"ScopedHandler.java","line":141,"function":"org.eclipse.jetty.server.handler.ScopedHandler.handle"},{"file":"HandlerWrapper.java","line":97,"function":"org.eclipse.jetty.server.handler.HandlerWrapper.handle"},{"file":"Server.java","line":462,"function":"org.eclipse.jetty.server.Server.handle"},{"file":"HttpChannel.java","line":279,"function":"org.eclipse.jetty.server.HttpChannel.handle"},{"file":"HttpConnection.java","line":232,"function":"org.eclipse.jetty.server.HttpConnection.onFillable"},{"file":"AbstractConnection.java","line":534,"function":"org.eclipse.jetty.io.AbstractConnection$2.run"},{"file":"QueuedThreadPool.java","line":607,"function":"org.eclipse.jetty.util.thread.QueuedThreadPool.runJob"},{"file":"QueuedThreadPool.java","line":536,"function":"org.eclipse.jetty.util.thread.QueuedThreadPool$3.run"},{"file":"Thread.java","line":748,"function":"java.lang.Thread.run"}]}

 

0 Kudos
fchataigner2
Dataiker

there is actually a typo in your javascript code : `Handicapped-infants` cannot be used as object key, due to the - in it, you have to quote it to explicitely define it as a string. The javascript was actually giving off an error in the console of the browser, preventing it to run, so your form was doing the default behavior of the form submission, ie reloading the page, which failed and gave the error you pasted

Julux
Level 2
Author

Thank @fchataigner2  ! I think it's because I copy-pasted a previous code that worked fine, but the difference here is I putted radio buttons instead of a dropdown list in the HTML, and I don't know how to define properly the JS object key as a string ๐Ÿ˜ž

0 Kudos

Labels

?
Labels (2)
A banner prompting to get Dataiku