deadant88
deadant88

Reputation: 1008

Display data scraped from web on Flask website

I am trying to make a list of cafes that have been scraped from a website appear on the cafe_form template. The scraper works properly but I can't get it to display the results in html template.

I am trying to use a for loop but can't seem to figure it out..

Here is the .py routes code:

@app.route('/cafes', methods = ['GET', 'POST'])
def cafe():
    cafe_form = CafeForm()
    cafes_user_city = CafeForm
    if cafe_form.validate_on_submit():
        ##flash(f'The city you chose is {cafe_form.city.data}, The Suburb {cafe_form.suburb.data}')

        url_cafes = f"https://www.broadsheet.com.au/{cafe_form.city.data}/guides/best-cafes-{cafe_form.suburb.data}" #f-string adds user suburb
        html_cafes = urlopen(url_cafes)

        soup_cafe_list = BeautifulSoup(html_cafes, 'html.parser') 
        type(soup_cafe_list)

        cafe_container = soup_cafe_list.find_all("h2", class_= "venue-title") 

        cafes =[]
        for container in cafe_container:
            cafes.append(container.text)

        print(cafes) 

    return render_template('cafeform.html', title= 'Search', cafe_form=cafe_form)

And here is the html template.

{% extends "base.html" %}

{% block content %}
  <h1>Cafes Search</h1>
  <form action="" method="post" novalidate>
    {{ cafe_form.hidden_tag() }}

    <p>
        {{ cafe_form.city.label }}<br>
        {{ cafe_form.city(size=32) }} <br>
    </p>

    <p>
      {{ cafe_form.suburb.label }}<br>
      {{ cafe_form.suburb(size=32) }} <br>
    </p>

    <p>
      {{ cafe_form.submit() }}
    </p>

  </form>

    <h1>Results</h1>
    {% for cafe in cafes %}
    <div><p> {{ cafes }} </p></div>
    {% endfor %}

{% endblock %}

Upvotes: 0

Views: 416

Answers (1)

FluidLight
FluidLight

Reputation: 471

It seems you're not passing the cafes variable to the template. Which can be fixed with:

return render_template('cafeform.html', title= 'Search', cafe_form=cafe_form, cafes=cafes)

As for your template you're displaying the whole cafes array so instead just change cafes to cafe to display the element:

<h1>Results</h1>
{% for cafe in cafes %}
<div><p> {{ cafe }} </p></div>
{% endfor %}

Upvotes: 1

Related Questions