0

I've made a JSON file with Lunr search data according to the instructions here. So it's a JSON file that's structured like {"documents":[{"body":"....

And I can manage to run these commands fine in the console: 

var response = $.getJSON('/includes/js/lunr-index.json');
var docs = response.responseJSON.documents;

Yet when I have the same thing in my script, like this: 

$( document ).ready(function() {
    var response = $.getJSON('/includes/js/lunr-index.json');
    var docs = response.responseJSON.documents;

    var idx = lunr(function () {
        this.ref('title');
        this.field('body');

        docs.forEach(function (doc) {
            this.add(doc);
        }, this);
    });
});

I get Cannot read property 'documents' of undefined.

Is there something missing about JQuery's .getJSON method? I'm not a Javascript programmer, so sorry in advance.

Here's what it looks like when I run it in the console: 

>>> var response = $.getJSON('/includes/js/lunr-index.json');

>>> response

{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}

>>> var docs = response.responseJSON.documents;

docs
(53) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

So the JSON works. It's just that this doesn't work in the script.

Edit:

Ok, so this looks like an async issue. I've been trying to rewrite it like this: 

fetch('/includes/js/lunr-index.json')
    .then(response => response.json())
    .then(json => lunr(function () {
        this.ref('title');
        this.field('body');

        json.documents.forEach(function (doc) {
            this.add(doc);
        }, this);
    }));

But I don't think I know how this promise stuff works.

Jonathan
  • 10,571
  • 13
  • 67
  • 103
  • 2
    can you `console.log(response)` to see the structure. Maybe `response.responseJSON.documents` is not a JSON? – fefe Dec 31 '19 at 16:29
  • Can you share the content of `/includes/js/lunr-index.json` ? – stud3nt Dec 31 '19 at 16:35
  • If this `{documents = [ ... ]}` is not a typo in this post, then the `=` is a problem. Not allowed in JSON. Which leads me to believe that there are more syntax errors in the JSON-file. – Mouser Dec 31 '19 at 16:38
  • The JSON isn't the problem, since it loads fine in the console. But when I load it in the script, it comes back as undefined. – Jonathan Dec 31 '19 at 16:40
  • What's the content of `response`? – Mouser Dec 31 '19 at 16:41
  • I added what my console output looks like. It just doesn't work in the script. – Jonathan Dec 31 '19 at 16:43
  • 1
    This is a typical `async` issue: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – Mouser Dec 31 '19 at 16:45
  • Hm yeah I guess this is an async issue. Is there a way I can rewrite this with `fetch`? – Jonathan Dec 31 '19 at 16:59
  • `$.getJSON( "/includes/js/lunr-index.json", function( data ) {});` and you can consume the data – fefe Dec 31 '19 at 17:03

0 Answers0