How to pull data from JSON to PUG using a loop?

  • 0
    I still don't fully understand how to use a loop in pug.
    I have JSON:
    "nav": [
        {
          "link": {
            "title": "banana",
            "href": "/banana"
          }
        },
        {
          "link": {
            "title": "tomato",
            "href": "/tomato"
          }
        },
        {
          "link": {
            "title": "mango",
            "href": "/mango"
          }
        }
      ]

    I wanted something like this to work.
    ul
        each entry in nav.link
          li: a(href= entry.href)= entry.title


    if it is possible of course.
    maybe I wrote something out of the ordinary, but how many googled I myself did not figure it out.
    JavaScript Molly Kirk, Mar 14, 2020

  • 2 Answers
  • 0
    I don't fully understand how to use a loop in pug yet.


    It's not about pug, it's about misunderstanding javascript of objects and arrays.



    -
    const data = {
    "nav": [
    {
    "link": {
    "title": "banana",
    "href": "/banana"
    }
    },
    {
    "link": {
    "title": "tomato",
    "href": "/tomato"
    }
    },
    {
    "link": {
    "title": "mango",
    "href": "/mango"
    }
    }
    ]
    };

    each item in data.nav
    li: a(href=item.link.href) !{item.link.title}
    Anonymous

  • 0
    https://pugjs.org/language/iteration.html

    The very first example
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!