What is the best way to fill a list-group using JavaScript?

Fetching ticket data from a controller is done using the code snippet below:

       $.ajax({
            type: "GET",
            url: "/Tickets/List/",
            data: param = "",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successFunc,
            error: errorFunc
        });

        function successFunc(data, status) {

            var ds = [];

            // d.ticket_no, d.ticket_subject, d.ticket_date,

            data.forEach((d) => {
                
            });
        }

How can I format this data using the HTML structure provided below?

  <a class="list-group-item list-group-item-action" id="list-tickets-list" data-toggle="tab" 
  href="#ticket-info" role="tab" aria-controls="list-tickets">
  <div class="d-flex w-100 justify-content-between">
      <h5 id="ticket_subject" class="mb-1">**Ticket Subject Example**</h5>
         <small id="ticket_date">**02-Aug-2021**</small>
  </div>
  <p id="ticket_no" class="mb-1"><strong>**TKT-2021010678**</strong></p>
javascript

Answer №1

var data = [{
    "ticket_no":1234,
  "ticket_subject":"myticker",
  "ticket_date":"1-2-3"
},{
    "ticket_no":1235,
  "ticket_subject":"myticker1",
  "ticket_date":"1-2-4"
}];
var mydiv = document.getElementById('ticketdiv');

data.forEach((d) => {
    mydiv.innerHTML +=`<a class="list-group-item list-group-item-action" id="list-tickets-list" data-toggle="tab" 
  href="#ticket-info" role="tab" aria-controls="list-tickets">
  <div class="d-flex w-100 justify-content-between">
      <h5 id="ticket_subject" class="mb-1">${d.ticket_subject}</h5>
         <small id="ticket_date">${d.ticket_date}</small>
  </div>
  <p id="ticket_no" class="mb-1"><strong>${d.ticket_no}</strong></p>`
            });
<div id="ticketdiv">

</div>

Utilize JS innerHTML for this task, in which I am iterating through the data using foreach and appending HTML content to the div with mydiv.innerHTML +=

For more information on JS innerHTML, please refer to this link

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

Discovering the status of a wrapped component using Jest

const wrapper = mount( <ContextProvider> <FreeformEquationQuestionPractice question={question} /> </ContextProvider> ) console.log('freeform state: ', wrapper.childAt(0).instance().state) FreeformEquationQues ...

javascriptreactjsjestjsenzyme

Utilizing a material-ui button within a React application as the trigger for a Popup using MuiThemeProvider

I want to trigger a Popup in React using a button with a custom theme: <PopUp modal trigger={ <MuiThemeProvider theme={buttonTheme}> <Button variant="contained" color="secondary">Excluir& ...

javascriptreactjsmaterial-ui

Value comparison displayed in text boxes

Having two textboxes and a script to compare their values can sometimes result in unexpected behavior. For instance, when the value in Textbox2 comes from the database and it happens to be 0, it can cause issues. One possible solution is to allow Textbox1 ...

javascriptjquery

Transfer the array using Ajax to a PHP script

I have an array generated using the .push function that contains a large amount of data. What is the most effective way to send this data to a PHP script? dataString = ??? ; // Is it an array? $.ajax({ type: "POST", url: "script.php" ...

phpjavascriptjqueryajax

Increasing the token size in the Metaplex Auction House CLI for selling items

Utilizing the Metaplex Auction House CLI (ah-cli) latest version (commit 472973f2437ecd9cd0e730254ecdbd1e8fbbd953 from May 27 12:54:11 2022) has posed a limitation where it only allows the use of --token-size 1 and does not permit the creation of auction s ...

javascripttypescriptcommand-line-interfacesolanametaplex

Mobile Image Gallery by Adobe Edge

My current project involves using Adobe Edge Animate for the majority of my website, but I am looking to create a mobile version as well. In order to achieve this, I need to transition from onClick events to onTouch events. However, I am struggling to find ...

javascripthtmlcssimage-galleryadobe-edge

php executing javascript - error

I have a question regarding my PHP file code: echo '<script type="text/javascript">'; echo '<audio id="player" src="../cdh/ba1.mp3"></audio>'; echo '<a onclick="document.getElementById( ...

javascriptphphtmlcss

Implementing swipe functionality to Bootstrap carousel

This is the code snippet I am working with: <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"> <!--Indicators--> <ol class="carousel-indicators"> ...

javascriptjqueryhtmltwitter-bootstrap

Error: Unexpected token : encountered in jQuery ajax call

When creating a web page that requests remote data (json), using jQuery.ajax works well within the same domain. However, if the request is made from a different domain (e.g. localhost), browsers block it and display: No 'Access-Control-Allow-Or ...

javascriptjqueryjsonajax

TypeScript will show an error message if it attempts to return a value and instead throws an

Here is the function in question: public getObject(obj:IObjectsCommonJSON): ObjectsCommon { const id = obj.id; this.objectCollector.forEach( object => { if(object.getID() === id){ return object; } }); throw new Erro ...

javascriptfunctiontypescripttypescript-typings

Initiate a jQuery modal dialogue box

As an apprentice with no prior experience working with JavaScript, I encountered a problem with my function that calls a popup. The function works fine on the first button, but fails to work on all subsequent buttons. Since the application keeps adding b ...

javascriptjquerybutton

Having trouble with the response function not functioning properly within an AJAX autocomplete

I have implemented an autocomplete feature using the jQuery UI plugin from http://jqueryui.com/autocomplete/#remote-jsonp. $("#city" ).autocomplete({ source: function( request, response ) { $.ajax({ url: 'index.php?secController= ...

javascriptjqueryajaxautocomplete

What is the process for sending values to a component?

I am working with a component called MyComponent: export class MyComponent { @Input() active:boolean; constructor() { console.log(this.active); } } In this component, I have declared an Input, and I pass it in as follows: <mycomp ...

javascriptangular

Ways to extract a number that comes after a specific word in a URL

I have a URL and need to extract a specific value from it by removing a certain step. I am looking for a regex solution to accomplish this task For example, if I have the window.location.href, the URL might look like this: https://mypage/route/step-1/mor ...

javascriptregex

The age calculator is failing to display the accurate age calculation

This code is designed to compute the age based on the selected value in the combo box, and display the result in the text box below. The age should update every time the user changes the selected value in the combo box. However, the computed age is not cur ...

phpjavascripthtml

Retrieving the initial entry from a JavaScript ES2015 Map

I am working with a Map structured as follows: const m = new Map(); m.set('key1', {}) . m.set('keyN' {}) The Map may contain one or multiple items. I am wondering if there is a way to retrieve the first item by index, without using m. ...

javascriptdictionaryecmascript-6

Integrate fresh data into an array using Vue

Exploring VUE for the first time, I am working on a project where I need to update an array by passing an object. The scenario involves two buttons named BUTTON 1 and BUTTON 2. Clicking on BUTTON 1 sets an object in the list[] using this.$set. However, whe ...

javascriptarraysvue.jsarraylist

The uploading of a file in NodeJS is not possible as the connection was closed prematurely

When I created a website using nodejs, there was a specific page for uploading images to the server. It worked perfectly fine when tested on my computer. However, upon deploying it to the server, the upload functionality stopped working. Upon checking the ...

javascriptnode.jsnginx

Exporting ExpressJS from a TypeScript wrapper in NodeJS

I've developed a custom ExpressJS wrapper on a private npm repository and I'm looking to export both my library and ExpressJS itself. Here's an example: index.ts export { myExpress } from './my-express'; // my custom express wrap ...

javascriptnode.jstypescriptexpressnpm

Launching a React build using Docker on Apache or AWS

I am a beginner to the world of docker and react. My goal is to successfully deploy a production build on AWS. Here are the steps I have taken so far: Created a dockerfile. Built and ran it on the server. npm run and npm run build commands are functionin ...

javascriptreactjsapacheamazon-web-servicesdocker