CODEWITHSUNDEEP
javascriptjqueryhtml
user9565299
user9565299

Reputation:

Append to a specific element

I have a JSON like this:

{  
   "data":[  
      "26325",
      "26337",
      "26340"
   ],
   "titles":[  
      "CID",
      "CID",
      "CID"
   ]
}

I need to create only one column (because they all say CID). Also how do I append the html to the tr??

Basically it should create a table with 1 column with title CID and 3 rows with the data.

Jquery:

 success: function (result) {
          console.log(result);
          var titles = result.titles;
          var data = result.data;

          $.each(titles, function (index, title) {
             var titleHTML = '<th class="text-center text-primary">' + title + '</th>';
             $('#result-table thead tr').append(titleHTML);
          });
      },

HTML

 <div id="results">
                    <%--Javascript generated--%>
                    <table id="result-table">
                        <thead>
                        <tr>

                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

Upvotes: 0

Views: 72

Answers (4)

Rush.2707
Rush.2707

Reputation: 683

You could just print data. In case you got only one column. let me know if any other column is going to come.

var result  = {  
   "data":[  
      "26325",
      "26337",
      "26340",
      "96586"
   ],
   "titles":[  
      "CID",
      "BDI",
      "ACN",
      "CID"
   ]
}
          var titles = result.titles;
          var uniqTitles = result.titles.filter(onlyUnique);
          var data = result.data;
          $.each(uniqTitles, function (index, title) {
            var html = '<th>' + title + '</th>';
            $('#result-table thead tr').append(html);
          });
          $.each(titles, function (index, title) {
             var indexTitle = uniqTitles.indexOf(title);
             var html = '<tr>';
             for(var i=1; i<= indexTitle; i++){
              html += '<td></td>';
             }
             html += '<td>'+ data[index] + '</td>';
             html += '</tr>';
             $('#result-table tbody').append(html);
          });
          
          function onlyUnique(value, index, self) {
            return self.indexOf(value) === index;
          }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="results"> 
                    <table id="result-table">
                        <thead>
                        <tr>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

Hope this updated answer work for you.

Upvotes: 1

Chandan Sarma
Chandan Sarma

Reputation: 308

HI try the bellow code

$(document).ready(function(){

     $("#table").append('<tr><th>'+data.titles[0]+'</th></tr>')
      $.each(data.data, function (index, title) {
           $("#table").append('<tr><th>'+title+'</th></tr>')
         });

});

Upvotes: 0

wayneOS
wayneOS

Reputation: 1425

If titles is always CID you can ignore it and hard-code the head. Then appending the data can achieved with a simple loop. Here is an example.

var data = {  
  "data":[  
    "26325",
    "26337",
    "26340"
  ],
  "titles":[  
    "CID",
    "CID",
    "CID"
  ]
}

//set column-title
if (data.titles.length > 0)
  $('thead').append ('<th>' + data.titles[0] + '</th>');

//loop through data and append to table-tbody
for (var i in data.data)
  if (data.data.hasOwnProperty (i))
    $('tbody').append ('<tr><td>' + data.data[i] + '</td></tr>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <thead></thead>
  <tbody></tbody>
</table>

Upvotes: 0

Muhammad Usman
Muhammad Usman

Reputation: 10148

Well, you can try this way

var data = {  
   "data":[  
      "26325",
      "26337",
      "26340"
   ],
   "titles":[  
      "CID",
      "CID",
      "CID"
   ]
}
 $("#table").append(`<tr><th>${data.titles[0]} Title</th></tr>`)
$.each(data.titles, function (index, title) {

 
 $("#table").append(`<tr><th>${this}</th></tr>`)
 
             
          });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table">
</table>

I don't know on what base you decide to name the column as CID. I just took it from the first element of data.titles. You can hard code it or whatever you want.

Moreover, I am using template literals. They just come handy when generating dynamic html or some stuff like that. You can read more about it here

Upvotes: 0

Related Questions