Home Data is not getting listed using <ul><li> tags in javascript
Reply: 3

Data is not getting listed using <ul><li> tags in javascript

Rahul
1#
Rahul Published in 2018-01-13 11:16:23Z

I am trying following code to list the data using <ul><li> tags in javascript .But bullets are displaying only in first data not all data.

  var prjlist;
    var output; 
    var proh;
    var statuss;
    var status;


    for (var i = 0; i < tabList.length; i++) {
        for (var j = 0; j < responseText.length; j++) {          


      prjlist= responseText[j].projectDescription;
      statuss= '<ul><li>'+ responseText[j].currentStatus + '</li></ul>';

     /*  output= prjlist.split("&");
      proh=output.join("/n");
       */
     proh=prjlist.replace(/&/g, '<br>');
     status =statuss.replace(/&/g, '<br>');

            var Obj = {

                projectName: '<h3>'+ responseText[j].projectName +'</h3>',

                projectDescription: '<p>'+ proh + '<p>',


                 currentStatus: '<b>'+ "Current Status:" +'</b>' + '<br>'+  status 
                }

I am getting following output from DB for current Status value.

DrNeverMind
2#
DrNeverMind Reply to 2018-01-13 11:25:35Z

Due to small information on your code. I do have the same assumption with Anniket. And also projectDescription: '< p>'+ proh + '< p>' , because you dont close the < /p> correctly. Please provide a jsfiddle as Aniket suggested to have a better picture.

grizzthedj
3#
grizzthedj Reply to 2018-01-13 12:12:06Z

You are rendering <ul> in every iteration in your for loops.

You should render the <ul> once(before the loop starts), then render the <li> inside the loop, then close the </ul> tag after the loop.

e.g.

var statuss = '<ul>';

for () {
   statuss += '<li>'+ responseText[j].currentStatus + '</li>';
}

statuss += '</ul>';

Full code here:

var prjlist;
var output;
var proh;
var statuss = '<ul>';
var status;

for (var i = 0; i < tabList.length; i++) {
  for (var j = 0; j < responseText.length; j++) {
    prjlist = responseText[j].projectDescription;
    statuss += '<li>' + responseText[j].currentStatus + '</li>';

    /*  output= prjlist.split("&");
     proh=output.join("/n");
      */
    proh = prjlist.replace(/&/g, '<br>');
    status = statuss.replace(/&/g, '<br>');

    var Obj = {
      projectName: '<h3>' + responseText[j].projectName + '</h3>',
      projectDescription: '<p>' + proh + '<p>',
      currentStatus: '<b>' + "Current Status:" + '</b>' + '<br>' + status
    }
  }
}

statuss += '</ul>';

For these types of issues, I would recommend using the developer tools that are available in modern browsers to troubleshoot. Using Inspect element in Chrome for example, is really useful, and you could have caught this really quickly.

Manoj Shukla
4#
Manoj Shukla Reply to 2018-01-13 13:55:20Z

The line where you are using replace() method, you are adding <br> tag.

The function of <br> tag is to move the content on next line.

So, the <UL> tag puts a bullet before each <LI> content, but you explicitly break it to move to next line, hence only one bullet is seen.

<ul>
  <li>Coffee <br> Bread</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

See the output of the above code. !!

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.320673 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO