loop through each li and store values into multidimensional array using javascript / jQuery

Question

I have a HTML list. I want to loop through each li and store the text in an array. My final array should be as below :

[{
  text: ["country", "city", "poste code", "address", "name", "surname", "email", "tel number"],
  textwithBrackets: ["[country]", "[city]", "[poste code]", "[address]", "[name]", "[surname]", "[email]", "[tel number]"]
}]

What I did was :

1- loop through each li using map and return the text to an array 1

2- do the same step as the first but returning each text with brackets to an array 2

3- create a final array and pushing both array 1 and array 2 by key / value

Below is my code. It's working but is there any better solution using jQuery I am not aware of ? how can I do both map in one step for example and assign the merge into the final array directly ?

Thank you very much for your suggestions.

var liText = $('ul > li').map(function(){ return $(this).text(); }).get();

var liTextwithBrackets = $('ul > li').map(function(){ return '[' + $(this).text() + ']'; }).get();


var result = [];
result.push({
  text: liText, 
  textwithBrackets: liTextwithBrackets });
        
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>country</li>
  <li>city</li>
  <li>poste code</li>
  <li>address</li>
  <li>name</li>
  <li>surname</li>
  <li>email</li>
  <li>tel number</li>
</ul>

Reading DOM is relatively slow. So you could run the first map, then use map on the first array to generate the second (rather than re-read ul>li .text) — fdomn-m
– fdomn-m, Commented Feb 2, 2022 at 14:13

ruleboy21 · Accepted Answer · 2022-02-02 14:20:58Z

1

Kindly try this. Its a bit performant than your approach.

var liText = $('ul > li').map(function() {return $(this).text();}).get();
var result = [{
  text: liText,
  textwithBrackets: liText.map(val => '[' + val + ']')
}];

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>country</li>
  <li>city</li>
  <li>poste code</li>
  <li>address</li>
  <li>name</li>
  <li>surname</li>
  <li>email</li>
  <li>tel number</li>
</ul>

answered Feb 2, 2022 at 14:20

ruleboy21

6,5215 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

loop through each li and store values into multidimensional array using javascript / jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related