TypeError: cannot read property 'url' of null

Ask the community
,
1

I want to be able to use a dropdown value to navigate to another page but am getting a ‘null’ type error. After having read a number of posts on here, I am no closer to solving the problem. Would appreciate any advice where to look / what to do. I’ve highlighted the line in my code causing the problem.

import wixData from 'wix-data';
import wixLocation from "wix-location";

$w.onReady(function () {
    uniqueDropDown1();

});

function uniqueDropDown1() {

    wixData.query("servSummary")
        .limit(1000)
        .find()
        .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
            $w("#type").options = buildOptions(uniqueTitles);
        });

 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.busType);
 return [...new Set(titlesOnly)];
    }

 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return { label: curr, value: curr };
        });
    }
}

export function type_change(event, $w) {
    uniqueDropDown2();
    $w("#category").enable();
}

function uniqueDropDown2() {
    wixData.query("servSummary")
        .contains("busType", $w("#type").value)
        .limit(1000)
        .find()
        .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
            $w("#category").options = buildOptions(uniqueTitles);
        });

 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.servCat);
 return [...new Set(titlesOnly)];
    }

 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return { label: curr, value: curr };
        });
    }
}

export function category_change(event, $w) {
    uniqueDropDown3();
    $w("#name").enable();
}

function uniqueDropDown3() {
    wixData.query("servSummary")
        .contains("busType", $w("#type").value)
        .contains("servCat", $w("#category").value)
        .limit(1000)
        .find()
        .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
            $w("#name").options = buildOptions(uniqueTitles);
        });

 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.servName);
 return [...new Set(titlesOnly)];
    }

 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return { label: curr, value: curr };
        });
    }

 let title = $w('#name').value;
        $w("#toFilter").onReady(() => {
            console.log("Dataset ready.");

            $w("#toFilter").setFilter(wixData.filter()
                    .eq("title", title)
                )
                .then(() => {
                    console.log("tofilter dataset filtered with matching title.");
 let getItem = $w("#toFilter").getCurrentItem();
 let url = getItem.url;
                    wixLocation.to(url);
                })
                .catch((err) => {
                    console.log(err);
                });

        });
}
2

Hello Dean Pitout,

look here at this little example, perhaps it can help you to solve your problem…
https://russian-dima.wixsite.com/meinewebsite/website-navigation
It will show, how to use a drop-down to navigate by URL.

3

Thank you for your reply. Unfortunately it doesn’t help. The dropdown that I’m using to navigate doesn’t have a static number of options. It varies depending on the choices made in other dropdowns. With every selection in the other dropdowns, not only does the number of options change, but the url’s to navigate to also change.

4

Ok, did you already try to make a console.log of (" getItem") and of (“getItem.url”), what are the outputs?

5

I don’t know how to do that.

6

Ok :grin:.
Did you really wrote this CODE?

But you already used console-logging here…

console.log("tofilter dataset filtered with matching title.");

Now try to console-log (“getItem”) and of (“getItem.url”) in the last part of your code…

console.log("tofilter dataset filtered with matching title.");
 let getItem = $w("#toFilter").getCurrentItem();
 let url = getItem.url;
 
 console.log(getItem)
 console.log(url)
 
                    wixLocation.to(url);
                })
                .catch((err) => {
                    console.log(err);
                });

        });
}

You can see the console-output in the “previewmode” on the buttom of your Wix-Editor, or you can press F-12 in your google-Chrome Browser and then go to CONSOLE. There you also will see the OUTPUTS.

Then look at your outputs and decide, try to recognice, if these outputs are the outputs you want. If they are what you want then think about what to do with this outputs further.

Obviously, if these are not the OUTPUTS you want to, then try to modify your CODE again and look again at the console-logs and so on, till you get what you need.

7

Nothing is being logged in the console because the TypeError is displayed as soon as the dropdown is enabled.

8

Ok, then try to comment-out this line. Run your code without the line causing error.

//let url = getItem.url;
9

Ok. Thank you very much for your amazing help. Much appreciated.

10

I hope i could help you.