"Incorporate multiple data entries into a table with the help of Jquery

How can I store multiple values in a table row using jQuery or JavaScript when the values come from a database via Ajax?

<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table id='company-details'>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>--</td>
    <td>---</td>
    <td>---</td>
  </tr>

</table>

</body>
</html>

The values retrieved through Ajax are:

0:
Company: 'Alfreds Futterkiste'
Contact: 'Maria Anders'
Country: 'Germany'
1:
Company: 'Centro Comercial Moctezuma'
Contact: 'Francisco Chang'
Country: 'Mexico'
2:
Company: 'Ernst Handel'
Contact: 'Roland Mendel'
Country: 'Austria'

I want to know how to dynamically add these values to the table using jQuery.

Answer №1

To achieve this functionality, you can follow the code snippet below:

$.each(datafromAjax,function() {
  $('#company-details tbody').append(`<tr><td>${this.Company}</td><td>${this.Contact}</td><td>${this.Country}</td></tr>`)
})

This piece of code iterates through the data retrieved from your AJAX call and adds it to your table dynamically.

Check out the demo:

var datafromAjax = [{
  Company: 'Alfreds Futterkiste',
  Contact: 'Maria Anders',
  Country: 'Germany',
}, {
  Company: 'Centro Comercial Moctezuma',
  Contact: 'Francisco Chang',
  Country: 'Mexico',
}, {
  Company: 'Ernst Handel',
  Contact: 'Roland Mendel',
  Country: 'Austria',
}]

$.each(datafromAjax,function() {
  $('#company-details tbody').append(`<tr><td>${this.Company}</td><td>${this.Contact}</td><td>${this.Country}</td></tr>`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='company-details'>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>--</td>
    <td>---</td>
    <td>---</td>
  </tr>

</table>

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

Ensure that you include validation in the ajax request when loading the message content from a separate file

ajax code for adding data to the database <script type="text/javascript"> $(function() { $(".submit_button").click(function() { var textcontent = $("#content").val(); var dataString = 'content='+ textcontent; if(textcontent=='') ...

JavaScript embedded within LD-JSON format

Is it feasible to run JavaScript code within an ld+json script? Like for instance, "window.location.hostname" <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "http://" + window.location.ho ...

Arranging Columns in JQuery Sortable and Bootstrap Causes Item to Disappear from the First to Last Column

Currently experimenting with integrating JQuery Sortable with Bootstrap v3. My layout consists of 3 columns, where I aim to drag and drop items from column 1 to column 3, with column 2 hosting buttons for bidirectional movement. Despite the functionality ...

Struggling with parsing JSON strings into PHP arrays

I'm looking to transmit a JSON string using JavaScript and later convert it into an array using a PHP encoding function. After successfully converting the string in JavaScript and transmitting it via Ajax to a PHP page, I am encountering difficulties ...

What is the best way to navigate to a new page following an ajax request in AngularJS

I have implemented angularjs and nodejs in my project to handle authentication. After a successful background authentication, I need to know how to redirect the user to the dashboard. Below is the login section of my code: <div ng-controller="loginCt ...

The chat message section is failing to update due to AJAX not refreshing

I recently launched a new website and am facing challenges with the chat feature. Despite using ajax to update the chat messages without refreshing the page, the other user still needs to refresh in order to see the latest message. We are both in the sam ...

How can I remove a specific JSON object from localStorage based on the data associated with the element that is currently being clicked on?

Unique Scenario A user interacts with an element, triggering a change in the background image and storing data related to that element in localStorage: this process functions correctly. Next, the toggle variable is set to 0, the background image change ...

Generate a Calendar Table using JavaScript in the Document Object Model (DOM

I have set up a table with 6 rows and 5 columns. The purpose of the table is to represent each month, which may have varying numbers of days. I want each column to display dates ranging from 1-30 or 1-31, depending on the specific month. Here's what ...

Assigning null values, or initializing values in AngularJS

How can I clear input values to null after clicking on a button? Empty fields: Fields with existing values that I want to reset back to empty fields. HTML: <label class="item item-input"> <input id="tezina" type="number" placeholder ...

Preventing onbeforeunload event in ASP.NET AJAX when sending requests from updatepanel

I have a challenge with the window.onbeforeunload event in an aspx page. My goal is to prevent it from firing when I navigate a GridView inside an UpdatePanel on the same page. So far, I've attempted to connect the PageRequestManager's initializ ...

How do I pass input values when calling an AJAX function to submit a form in HTML?

Utilizing a modal to submit new data via AJAX API consumption. Although sending the data through the API is not an issue, my lack of HTML skills makes it confusing on how to pass form data values. This scenario involves displaying a modal for users to in ...

I recently installed Bootstrap 5 and jQuery 3.6 on my website, but I'm encountering an issue where the dropdown button is not functioning properly when I try to embed them. Could there be

I have this code: I recently downloaded Bootstrap 5 and JQuery 3.6, but I am facing an issue where the dropdown button is not working when I embed them in my project. Can you take a look at my code to see if anything is missing? <head> <ti ...

Executing a code inside a jQuery modal element

I am utilizing a jquery plugin called jQuery Image Scale to automatically resize individual images on my website. Below is a simple example: // HTML: <div class='parent_container'> <img src='image.jpg' class=&apos ...

Is there a way to prevent elements on a web page from shifting when the page width becomes narrow enough?

Currently, as I delve into the world of web development with Svelte, I am in the process of creating a basic website to put my knowledge to the test. The main aim is to ensure that no matter how much the page is resized, the text and video content remain e ...

The functionality of jQuery touch events on iOS devices is not functioning properly

I'm encountering issues with jQuery touch events on iOS devices. Here is my current script: $(document).ready(function(){ var iX = 0,iY = 0,fX = 0,fY = 0; document.addEventListener('touchstart', function(e) { ...

When using Laravel 8.0, the Route::post method may sometimes display a blank page, while the same route using the get method functions properly

Recently, I started working with Laravel and encountered a confusing issue. Here's what's happening: <form action="{{ route('foo.store', ['idFoo' => $foo->id]) }}" method="POST" accept-charset=&quo ...

Javascript Error - Issue with Fuse.js: e.split() function is not recognized

Scenario - I am in need of implementing a fuzzy search feature, and therefore utilizing fuse.js for this purpose. I obtained the code snippet from fuzzy.min.js at https://github.com/krisk/Fuse/blob/master/src/fuse.min.js Challenge - Despite using the cod ...

Unable to go back after a successful JSON request

I recently made a JSON call using the following function and successfully retrieved the result. However, I am facing an issue when trying to pass this value to another function. get_target_amount(full) Within my function, when I use console.log(get_tar ...

Leveraging the 'this' keyword in TypeScript

In my Javascript class, I used the 'this' keyword as shown below: if (this[this.props.steps[i].stepId].sendState !== undefined) { this.setState({ allStates: { ...this.state.allStates, [thi ...

What causes the index to consistently be the final index when passing it to the MenuItem onClick function while iterating over a State array using map?

There is an array of objects living in a state named talks [ { "firstName": "B", "lastName": "W", "day": "2022-09-30T23:06:26.000Z", "reasons": [ ...