Question 243675 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – how to display text file data in html table?

I tried but it is showing only one td. all I wanted is to display below data into two td’s

here is the data

Survey Description                       SuerveyCode
customer-Behavioral                      U4
Customer-Government/Medicare Advantage   U1
Customer-ALL ELSE                        U2
Provider-Behavioral                      U4
Provider-All ELSE                        U3
Account Specific:Amazon                  A1
HIL NURSE                                C1

<!DOCTYPE html>
<html>
<head>
<title>Survey Gadget</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.gadget-title{
    color:blue;
    text-align:center;
}
#tablediv{
    border:1px solid #ddd;
}
.gadget-body{
    display: table; margin: 0 auto;

}
div {
    display: inline-block;
    padding: 0px 15px 15px 15px; 
}
p{
    font-weight:bold;
    font-size:18px;
}
.green-text{
    color:green;
}
.yellow-text{
    color:yellow;
}
.red-text{
    color:red;
}
.s-logo{
    display:block;
    text-align:center;
    padding-bottom:0px;
}
.dot{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
}
.green-text .dot{
    background-color:green;
}
.yellow-text .dot{
    background-color:yellow;
}
.red-text .dot{
    background-color:red;
}
.s-text{
    padding:0px;
}
</style>
</head>
<body>

<h1 class="gadget-title">Survey Gadget</h1>

<div class="gadget-body">
    <div class="s-logo">
        <img src="survey-icon.png" width="50px;"/>
    </div>
    <div>
        <p class="green-text"><span class="dot"></span> <span class="s-text">Automation On</span></p>
    </div>
    <div>
        <p class="yellow-text"><span class="dot"></span> <span class="s-text">Manual</span></p>
    </div>
    <div>
        <p class="red-text"><span class="dot"></span> <span class="s-text">Restricted</span></p>
    </div>
</div>


<div id="output"></div>
<div id="tablediv"></div>
</body>
<script>
$(document).ready(function(){
  populateTable();
});

function populateTable() {
    var tableContent = '';
    $.get( 'http://localhost/survey/surveydetails.txt', function( data ) {
      //alert(data);
      var lineByline = data.split('n')
        $.each(lineByline , function(index,value){
            tableContent += '<tr>';
            tableContent += '<td>' + value + '</td>';
            tableContent += '</tr>';
        });
        $('#tablediv').html(tableContent);
    });
};
</script>
</html>

Thanks in advance. Any help would be appreciated.

Tags:

2

Answers


  1. 0

    First thing you’ve not got any table HTML, I’d suggest updating the markup to:

    <table id="tablediv"></table>

    So you need to split the line by places where there are two or more whitespace characters as that text isn’t tab delimited based on what you provided so:

    $.each(lineByline , function(index, value){
  // Skip if the line is empty
  if(value.trim() === "") return;

  // Split each line into its two components (Description and SurveyCode)
  var parts = value.split(/s{2,}/); // Split at 2 or more whitespace characters

  // Append to the table content
  tableContent += '<tr>';
  tableContent += '<td>' + (parts[0] || "") + '</td>'; // Description
  tableContent += '<td>' + (parts[1] || "") + '</td>'; // SurveyCode
  tableContent += '</tr>';
});

    That’ll split each lineByLine value into two parts based on places where there are 2 or more whitespace characters.

    If the content is actually tab delimited then you can swap the parts line to:

     var parts = value.split('t');
    Login or Signup to reply.
  2. 0

    You need to add the <table><table> structure in your jQuery code.

    Also while looping the split file text you need to further split them based on spaces so that you can get both <td> values to show on:

    Do it like below:

    function populateTable() {
    var tableContent = '<table>';
    $.get( 'http://localhost/survey/surveydetails.txt', function( data ) {
      var lineByline = data.split(/s{2,}/);
        $.each(lineByline , function(index,value){
            var arr = value.split(/s+/);
            tableContent += '<tr><td>' + arr[0] + '</td><td>' + arr[1] + '</td></tr>';
        });
        tableContent += '</table>';
        $('#tablediv').html(tableContent);
    });
};

    Working sample: https://jsfiddle.net/su2Lzgdm/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search