Using Postgres array or JSON to display separate Bootstrap badges within an HTML document

Here is a snapshot from my live server:

https://i.sstatic.net/sq83x.png

In the image attached, I have been working on extracting information from arrays and JSON using Bootstrap. My goal is to display each value from the array or JSON in separate badges.

This is the script I am using:

                                    {% for info in qa_info %}
                                        <tr>
                                            <th>{{info.id}}</th>
                                            <td>{{info.fullname}}</td>
                                            <td><span id="skilltag" class="badge badge-primary light">{{info.skills_a}}
                                            </span></td>
                                            <td>{{info.pos}}</td>
                                            <td class="color-primary">{{info.nickname}}</td>
                                        </tr>
                                    {% endfor %}

The data is retrieved from a Postgresql array and JSON column

Answer №1

Can you provide more details about the contents of qa_info and its structure? Based on the image provided, it appears to be an array of strings, yet it seems like you are interpreting it as a JSON object with key-value pairs. It would be helpful if you could share the actual contents of qa_info.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with accessing the upvote/downvote input within a Django template

Currently, I'm trying to retrieve upvote/downvote data from a Django template in the following manner: <form method="POST" action="{% url 'vote' %}" class="vote_form"> {% csrf_token %} <input type="hidden" id="id_value" name="valu ...

Challenges and solutions in writing Protractor test cases

Recently delving into protractor e2e testing, I have developed my first test code. Seeking feedback and suggestions for improvement. describe("Map feedback Automation",function(){ it("Check if the Url works ",function() { browser.get(browser.params. ...

How can you enhance a jQuery event callback with your own custom functionality?

I have a specialized plugin event callback that triggers on every page: $(document).on('pjax:complete', all.myfunction); What I want to do is enhance myfunction: first calling all.myfunction and then running specific code: // my specific page ...

Diminish, then lead to a fresh page

I have encountered an issue with my code. The wrapper performs a fade out effect before redirecting the user to a URL. However, it only fades out once and I suspect this is due to the browser caching or loading the page quickly. Is there a way to ensure t ...

Properties of MakeTextSprite in THREE.JS

Utilizing the function "MakeTextSprite" from function createTextSprite(message, parameters) { if (parameters === undefined) parameters = {}; var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Helvetica"; ...

The <label> element is failing to recognize the "id" attribute of the input element in HTML

I have developed an Angular application that utilizes ASP.Net Core as a backend and incorporates bootstrap 4 and ngx-bootstrap for styling. Strangely, I am encountering an issue where the ID's on all my HTML <label> tags are not being recognize ...

Utilizing React Classes Based on Conditions

I'm attempting to add the class active if commentBadgeActive is true. The Scholar image should transition from grayscale to colored. <Paper className={classes.paper}> <div className={classes.profile}> < ...

How to reset a variable in jQuery following an AJAX request?

Check out the code snippet below: $selectsPersons = $('select.persons'); // event listener for adding a select $('#button-add-select').on('click', function (e) { $('#container-selects').append('<select ...

Sort through a collection of objects based on their content

I'm having some trouble filtering an array of objects based on its content. Here's the code snippet: https://jsfiddle.net/z7g3unyu/2/ var arr =[ { "uid": "1", "name": "John Doe" }, { "uid": "2", "name": "Kate Roe" } ]; ...

Navigating a FormData object in javascript on a .NET WebAPI version 5.2.2

I am currently working on integrating webcam video recording upload using the example provided in this RecordRTC GitHub repo. However, I have encountered a compiling error when trying to use "Request.Files" as indicated in the screenshot below. The error ...

Utilizing Vue.js: accessing a global value within a template string

I am working on a simple Vue.js application with the following structure: index.html (only the <body> for brevity) <div id="root"></div> main.js var settings = { title: 'My App', } new Vue({ el: '#root', tem ...

Repair copied website data in Excel spreadsheet

I'm currently in the process of extracting a large volume of data from a website. However, when I paste it into Excel, it's not in a table format and appears like this: France Europe Spain Europe Egypt Africa I'm looking for a way to str ...

Using Jquery to handle input data in a form

Using jQuery, I have set up an AJAX function to fetch data from a database in real-time as the user fills out a form with 5 input fields. Currently, my code looks like this: $("#searchtype, #searchtext, #searchtag, #daterangefrom, #daterangeto").on("load ...

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

I'm struggling to figure out the correct way to write this script. Can someone please guide me in the right direction or suggest an alternative method? I've searched but haven't found any relevant examples. I am fetching information from a ...

Script executing single run only

I'm currently working on a side menu that slides open and closed from the left with the press of a button. I have successfully implemented the CSS and HTML code, but I am facing issues with the JavaScript. The functionality works flawlessly at first: ...

The type '{}' cannot be assigned to type '() =>'

Do you have a TypeScript question? I am curious about how to 'specify' a single object in useState using the incoming properties of id, heading, and text with an interface or similar method. Take a look at the code snippet below: import React, ...

Uncertainty arises from the information transmitted from the controller to the Ajax function

In one of my coffee scripts, I have an AJAX call that calls a method in a controller. The AJAX call is structured like this: auto = -> $.ajax url : '<method_name>' type : 'POST' data : <variable_name> ...

smoothly slides into view and playfully bounces

http://jsfiddle.net/E6cUF/ The concept involves a grey box sliding left from behind a green box after the page is fully loaded, with a slight bouncing effect if possible. Update: I created a new version inspired by modifications made by others on the jsf ...

Troubleshooting video playback in Firefox with mediaelement.js

I'm encountering a somewhat common issue where my videos show up perfectly in Chrome and Safari, but fail to display in Firefox. Despite searching for solutions, I haven't come across any definitive answers, so I figured I'd post my query he ...

I am looking to enhance my array of objects by implementing a filter. It is important that the filter does not allow for duplicate checkboxes with the

My website : https://i.sstatic.net/myJAf.png On the left-hand side of my webpage, there is a set of checkboxes with some repeated names that I don't want. For example, "Rice" is repeated twice but I only want it to display once. When checking the Ri ...