Can I call a function from within a js object?

Question

I'm working on creating a "garage sale-isque" page and currently learning handlebars.

I'm trying to call a function from within one of the properties' definitions and have the returned value be the property value.

The setup I have right now is:

var lawnGarden = [{
    title: "Lawn Mower",
    price: 75.00,
    img: "./img/lawnMower.jpg",
    desc: "Great mower, kept in great condition, runs smooth.",
    link: genLink(this.title);
}, {
    title: "Hedge Clippers",
    price: 25.00
}, {
     title: "Shovel",
    price: 10.00
}, {
    title: "Post Hole Digger",
    price: 20.00
}]

function genLink(title) {
    var baseURL = "https://pensacola.craigslist.org/search/sss?sort=rel&query=";
    return baseURL + title.replace(" ", "%20");
}

Is there anyway for me to do this? Or perhaps a better way?

I should mention I'm working in nodeJS.

BTW `.replace(" ", "%20")` is a poor url encoder. It will only replace a single space, and will not encode other characters. Use `encodeURIComponent`. — Alexander O'Mara, Sep 07 '16 at 04:55
You can call a function from within a JS object like that, but in your code `this` does not refer to the object, it refers to the `this` of the scope the object is declared in. `this` only has any modified meaning when found inside a function declaration. — 4castle, Sep 07 '16 at 04:58

score 1 · Answer 1 · answered Sep 07 '16 at 05:17

You could make a class for each entry type.

class LawnGardenEntry {

    constructor(title, price, img, desc) {
        this.title = title;
        this.price = price;
        this.img = img || "stockimg.png";
        this.desc = desc || "default description";
        this.link = this.genLink(title);
    }

    genLink(title) {
        var baseURL = "https://pensacola.craigslist.org/search/sss?sort=rel&query=";
        return baseURL + title.replace(" ", "%20");
    }

}

var lawnGarden = [
    new LawnGardenEntry(
            "Lawn Mower",
            75.00,
            "./img/lawnMower.jpg",
            "Great mower, kept in great condition, runs smooth."
            ),
    new LawnGardenEntry("Hedge Clippers", 25.00),
    new LawnGardenEntry("Shovel", 10.00),
    new LawnGardenEntry("Post Hole Digger", 20.00)
];

You should probably even make a factory method for it, and another class to better hold the entries. It also depends on how these are being generated.

also, you do need a better genlink function

score 1 · Answer 2 · answered Sep 07 '16 at 05:27

Following advice from @Alexander O'Mara's linked post and his comment underneath I've gone ahead and revised my code to:

var lawnGarden = [{
    title: "Lawn Mower",
    price: 75.00,
    img: "./img/lawnMower.jpg",
    desc: "Great mower, kept in great condition, runs smooth.",
}, {
    title: "Hedge Clippers",
    price: 25.00
}, {
    title: "Shovel",
    price: 10.00
}, {
    title: "Post Hole Digger",
    price: 20.00
}]

//Url Generation and Endcoding
for (i = 0; i < lawnGarden.length; i++) {
    lawnGarden[i].link = genLink(lawnGarden[i].title);
}

function genLink(query) {
    var uri = "https://pensacola.craigslist.org/search/sss?sort=rel&query=" + query;
    return encodeURI(uri);
}

Thank you for your comments and answers, when I originally made this post I wasn't sure exactly what the problem was when I read through the error logs and because of that was a bit ignorant on the best way to phrase my question.

This seems for now to be the best way to address the problem as of now.

Cool, but `lawnGarden.forEach(item => item.link = genLink(item.title))` would be neater than the *for* loop. ;-) — RobG, Sep 07 '16 at 06:30

Can I call a function from within a js object?

2 Answers2