Trying to set up a Socrata API to enter a value and receive a specific string in return

Question

I work for a business which operates several garages in the Netherlands. Normally I don't do webdev professionally, as I'm an online marketer, but since I'm the only one in the company with knowledge of web development, my boss has asked me to build a new website. Since I'm proficient in HTML and CSS, I've been able to build the website itself just fine, using WordPress as a CMS. However, now I'm trying to integrate a simple API using JQuery and I'm getting stuck.

What I'm trying to do, is use a Socrata-based Open Data platform, which allows people to search for non-sensitive vehicle information. The Netherlands have a mandatory check-up for all vehicles over a certain age, and this database lets you see when your vehicle is due for a check-up (among other things).

I want people to enter their license plate number, and then have the API return the value for apk_vervaldatum which is the date by which their car must have been checked.

I'm using JSON and HTML, but I really have no experience whatsoever using any JavaScript-related code. So far, I came up with the below code, but it's not working. As far as I can gather, the script calls the database just fine, but the form input isn't being processed as part of the script, and I have no idea how to get the script to filter out the correct string and display the information on the page.

<script> <![CDATA[
$('submit').on('click', function () {
        // remove resultset if this has already been run
        $('.content ul').remove();
        // add spinner to indicate something is happening
        $('<i class="fa fa-refresh fa-spin"/>').appendTo('body');

        // get selected zip code from selectbox
        var kenteken = $('Kenteken').text();
        console.log(kenteken);

        // make the AJAX request
        $.getJSON('https://opendata.rdw.nl/resource/m9d7-ebf2.json?$$app_token=nq6RaOajxfOe5ERTkc4kfmCrr&kenteken= + kenteken', function (data) {
        console.log(data)
        })
        })
 ]]></script>
<div class="content">
<h1>Testpagina</h1>
<form action="function" method="get"><input type="text" name="Kenteken"> <input type="submit"></form>

The endpoint i'm trying to reach is https://opendata.rdw.nl/resource/m9d7-ebf2.json?$$app_token=nq6RaOajxfOe5ERTkc4kfmCrr

Any help would be much appreciated, as I'm at a complete loss. I've gone through every tuturial I could find, but I've had no luck.

score 0 · Answer 1 · answered Feb 27 '16 at 16:30

<script> <![CDATA[
$('submit').on('click', function () {
        // remove resultset if this has already been run
        $('.content ul').remove();
        // add spinner to indicate something is happening
        $('<i class="fa fa-refresh fa-spin"/>').appendTo('body');

        // get selected zip code from selectbox
        var kenteken = $('Kenteken').text();
        console.log(kenteken);

        // make the AJAX request
        $.getJSON('https://opendata.rdw.nl/resource/m9d7-ebf2.json?$$app_token=nq6RaOajxfOe5ERTkc4kfmCrr&kenteken=' + kenteken, function (data) {
        console.log(data)
        $('#answer').text(data[0][vervaldatum_apk]);
        })
        })
 ]]></script>
<div class="content">
<h1>Testpagina</h1>
<form action="function" method="get"><input type="text" name="Kenteken"> <input type="submit"></form>
<p id="answer"></p>

Thanks for your answer, and sorry about my impolitely late response. Unfortunately, your code seems to append the "Kenteken" to the url the script is executed on, rather than adding it to the "https://opendata.rdw.nl/*" url. Have you any idea what might cause that? — Tijmen, Mar 23 '16 at 16:24

Trying to set up a Socrata API to enter a value and receive a specific string in return

1 Answers1