遍历哈巴狗中的javascript对象 [英] Iterate over javascript object in pug

问题描述

我已经看过其中一些问题，但答案似乎从未明确.我需要在哈巴狗视图中遍历一个javascript对象.第一次使用哈巴狗，所以我可能会错过一些明显的东西.

I've seen a few of these questions but the answers never seem to be clear cut. I need to iterate through a javascript object in my pug view. First time using pug, so I may be missing something obvious.

控制器:

app.get('/search/:keyword', (req, res) => {
        scraper
        .searchDictionary(req.params.keyword)
        .then(words => {
        res.render('result', console.log(words))
    });
})

以下是制作对象的实际功能:

Here is the actual function that makes the object:

function searchDictionary(searchTerm){
    const url = `https://www.dictionary.com/browse/${searchTerm}?s=t`
    return fetch(`${url}${searchTerm}`)
        .then(response => response.text())
        .then(body => {
        const words = []
        const $ = cheerio.load(body);
        $('ol').each(function(i, element){
            const $element = $(element)
            const $definition = $(element).find('li')
            const word = {
                keyword: searchTerm,
                definition: $definition.text(),
                speechParts: $('span.luna-pos').text(),
                tenses: $('span.luna-inflected-form').text()
            }
            words.push(word);
        });
        return words
    });
}

现在，剩下的就是遍历我视图中的对象.我不断收到令人恐惧的无法读取未定义的属性'length'.Console.log显示控制器显示正确的数据.

Now, all that is left is iterate over the object in my view. I keep getting the dreaded Cannot read property 'length' of undefined. Console.log shows the controller displaying the right data.

[{ keyword: 'cat',
    definition: 'a person, especially a man.a devotee of jazz.',
    speechParts: 'nounverb (used with object),verb (used without object),Verb PhrasesIdioms',
    tenses: 'cat·ted,cat·ting.cat·ted,cat·ting.' }]

(有更多对象，只想显示一个例子)

(there are more objects, just wanted to show an example)

我的视图如下:

body
h1
    ul
        each word in words
            li= word.keyword

推荐答案

您的问题在render函数中，只需进行一些小的更改即可轻松解决.

Your issues are in the render function, easily fixed with a few small changes.

代替此:

res.render('result', console.log(words))

您应该这样做:

console.log(words);
res.render('result', {"words": words});

console.log 没有

console.log doesn't have a specified return type so you should only use it as a log writer and not depend on it returning anything. Keep log entries on their own separate lines.

请注意，单词集合是如何包含在以单词"为键的对象中的.这样可以正确设置它，以便pug模板使用变量名 words 引用它.

Note how the words collection is contained inside an object with "words" as the key. This sets it up properly for the pug template to reference it using the variable name words.

您在模板中设置的每个循环看起来都不错，并且在进行了上述更改后应该可以正常工作.

The each loop you set up in the template looks good and should work once you make the changes above.

要更进一步，假设您还想在模板中添加每日一词".渲染函数如下所示:

To take this one step further, let's say you also wanted to add a "word of the day" to your template. The render function would look like this:

res.render('result', {
  "words": words,
  "wordOfTheDay": "lorem"
});

您的模板将如下所示:

h1 Word Of The Day
p= wordOfTheDay
br
h1 Word List
ul
  each word in words
    li= word.keyword

这篇关于遍历哈巴狗中的javascript对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！