API problems with jQuery
<p>I am trying to implement an API into my web page. However, for some reason none of the data is being displayed. I did a similar thing as I did with a previous API and it isn't working.</p>

<p>The following is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script language="JavaScript" type="text/javascript"&gt;
    $(function () {
        var req = $.ajax({
            url: "http://api.lmiforall.org.uk/api/v1/soc/search?q=computer"
        });

        console.log(data);

        req.done(function (data) {
            var wrapperDiv = $("&lt;div /&gt;", {
                "class": "wrapper"
            });

            var title = $("&lt;h2 /&gt;", {
                text: data[0].title
            });

            wrapperDiv.append(title);

            $("body").append(wrapperDiv);
        });
    });
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>With the API is datatype for title, which is a job title, and I am trying to display the first title on the page. However, nothing is displayed and I get these error messages:</p>

<p><a href="https://i.stack.imgur.com/r7KaF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r7KaF.png" alt="enter image description here"></a></p>

<p>I honestly have no clue what is wrong with this. Any help would be much appreciated.</p>