How to convert array elements in the list format by jquery?

Question

0.00/5 (No votes)

See more:

I want my output should come in the list format but it comes in single line.

Output:
one,two

Expected Ouput:
one
two

What I have tried:

 <script type="text/javascript">
        
  $(document).ready(function(){
  var arr = [];
 
  $("#txtResult").on("click", function(){
       text="";
        if (jQuery("#txtFirstNo").val().match(/^\d{5}$/, '')  )  {
                arr.push("one") ;
            }
        if ( jQuery("#txtFirstNo").val().match(/^\d{5}$/, '') )
            {
                arr.push("two")+"<br>";
            }
        if ( jQuery("#txtFirstNo").val().match(/^\d{7}$/, '') )
            {
                arr.push("three")+"<br>";
            }
        
        jQuery("p").text(arr) ;
        arr=[];
                
  });
});
    </script>
    
</head>
<body>


    <input type="text" id="txtFirstNo" name="txtFirstNo" placeholder="Enter value"  />
    <br><br>
    <input type="submit" id="txtResult"/><br
    <p id="txtPrint" ></p>
 
</body>
</html>

Posted 28-Oct-20 23:27pm

Member 14978380

Updated 29-Oct-20 0:10am

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2020-10-29T00:00:00

Solution 1

Change your script to:

JavaScript

$(function(){
    $("#txtResult").click(function(){
        var firstNo = $("#txtFirstNo").val(); // Cache this value, since you're using it multiple times
        var arr = [];
        
        if (firstNo.match(/^\d{5}$/)) {
            arr.push("one");
            arr.push("two"); // No need for a separate "if" branch with the same condition
        }
        else if (firstNo.match(/^\d{7}$/)) { // Use "else if", since the value can't match both patterns
            arr.push("three");
        }
        
        $("#txtPrint").text(arr.join("\n"));
    });
});

Set the style on your output element so that line-breaks are preserved.

HTML

<p id="txtPrint" style="white-space:pre-line;"></p>

Demo[^]

Posted 29-Oct-20 0:00am

Richard Deeming

Comments

Member 14978380 29-Oct-20 6:14am

No, I have some more regex patterns that are to be used in if conditions, so I want that if both the condition gets true then the value should come in list format.

Member 14978380 29-Oct-20 6:16am

Can I get the output in list format without changing if format ?

Richard Deeming 29-Oct-20 6:20am

Getting the output to display on multiple lines involves two things:
* Using arr.join("\n") to join the array values with the newline character;
* Setting style="white-space:pre-line;" on the output element so that the newlines are preserved.

Member 14978380 29-Oct-20 6:22am

But it doesn't come in the list format. So is there any other option ?
And I have used arr.join("\n") , but it doesn't affects the output.

Richard Deeming 29-Oct-20 6:30am

Look at my demo again. If that's not the output format you want, then you need to explain what you mean by "list format".

Member 14978380 29-Oct-20 6:32am

I want output in
one
two

rather than
one,two

Richard Deeming 29-Oct-20 6:33am

Once again: Look at my demo.

That is precisely how the result is displayed.

What is the problem?

Member 14978380 29-Oct-20 6:41am

What if I use two if conditions ? Because in the code I have skipped the regex pattern

Richard Deeming 29-Oct-20 6:55am

It doesn't matter. So long as you've added multiple strings to the array, join it with a newline, and set the white-space on the output element, you'll get each element on a new line.

Member 14978380 29-Oct-20 6:58am

I am new to the jQuery. So please can you give me an exmaple ?

Richard Deeming 29-Oct-20 7:02am

I have already given you an example, and explained it.
Demo[^]

Member 14978380 29-Oct-20 7:11am

I have conditions like this, so how can I use your method : >

if ( jQuery("#txtFirstNo").val().match(/^\d{10}$/, '') || jQuery("#txtFirstNo").val().match(/^[JJD01|JJD00|JVGL]+\d{7}$/, ''))
{
arr.push("one");
}
if ( jQuery("#txtFirstNo").val().match(/^\d{10,39}$/, '') || jQuery("#txtFirstNo").val().match(/^[GM|LX|RX]+[0-9]{10,39}$/, '') )
{
arr.push("two");
}

Richard Deeming 29-Oct-20 7:18am

Really? 🤦‍♂️

$(function(){
    $("#txtResult").click(function(){
        var arr = [];
        
        if ( jQuery("#txtFirstNo").val().match(/^\d{10}$/, '') || jQuery("#txtFirstNo").val().match(/^[JJD01|JJD00|JVGL]+\d{7}$/, '')) {
            arr.push("one");
        }
        if ( jQuery("#txtFirstNo").val().match(/^\d{10,39}$/, '') || jQuery("#txtFirstNo").val().match(/^[GM|LX|RX]+[0-9]{10,39}$/, '') ) {
            arr.push("two");
        }
        
        $("#txtPrint").text(arr.join("\n"));
    });
});

Updated Demo[^]

Member 14978380 29-Oct-20 7:21am

Thank you so much for your help...
:)