Webapp doesn't work

Julux
Julux Registered Posts: 8 ✭✭✭✭
edited July 16 in Using Dataiku

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’écran 2021-02-21 à 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 ?

Answers

  • fchataigner2
    fchataigner2 Dataiker Posts: 355 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
    Julux Registered Posts: 8 ✭✭✭✭
    edited July 17

    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"}]}

  • fchataigner2
    fchataigner2 Dataiker Posts: 355 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
    Julux Registered Posts: 8 ✭✭✭✭

    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

Setup Info
    Tags
      Help me…