Home > Software design >  How Do I Create Hyperlink From URL Automatically When Passing JSON Data from Flask to HTML Table
How Do I Create Hyperlink From URL Automatically When Passing JSON Data from Flask to HTML Table

Time:03-13

I'm working on a small project where I'm parsing some JSON data out of a file, grabbing 4 different objects from each line of JSON and displaying them as a table in a webpage using FLASK.

One of the objects is a URL and I want to make it "clickable", hyperlinked, on the output webpage.

On the flask side I have:

@app.route("/")
def table():

    for line in filein:
        try:
            jsonline = json.loads(line)
            URL = ("http://myurl.com/"   jsonline["name"])
            #print(URLToTweet)

            objectforlist = (jsonline["time"], jsonline["name"], URL, jsonline["content"])
            newdata.append(objectforlist)
        except:
            pass


    return render_template('index.html', headings=headings, data=newdata)

On the HTML side I have:

<table>
   <tr>
      {% for header in headings %}
         <th>{{ header }}</th>
      {% endfor %}
   </tr>
      {% for row in data %}
         <tr>
            {% for cell in row %}
               <td> {{cell}} </td>
            {% endfor %}
         </tr>                
      {% endfor %}
</table> 

This creates the desired table output on a webpage of the selected JSON content however the URL's are just text. How do do I go about turning them into hyperlinks? I assume it's something like an "if contains urls then xxxxxx" in the html table but I'm not sure.

CodePudding user response:

Since you're using a tuple for each row, you can just unpack the columns inside the loop. The individual elements of the tuple are assigned to the variables in order.

<table>
  <tr>
    {% for header in headings %}
    <th>{{ header }}</th>
    {% endfor %}
  </tr>

  {% for tm, name, url, content in data %}
  <tr>
    <td>{{tm}}</td>
    <td>{{name}}</a></td>
    <td><a href="{{url}}" title="{{name}}">Link</a></td>
    <td>{{content}}</td>
  </tr>
  {% endfor %}
</table>
  • Related