CODEWITHSUNDEEP
javascripthtmlarrays
katjass
katjass

Reputation: 319

Javascript - Count in numbers the length of an array of strings

It's a bit strange to explain, but I have an array of strings, I get the length of it, for example 5. I can easily print out the number '5', right.

const myArray = ['A', 'B', 'C', 'D', 'E'];

myArray.length = 5;

BUT what to do when I want to display the numbers '1 2 3 4 5' on my page, let's say each in their individual p tag? The contents of my array are not numbers. There's just 5 of them. I would need to count that out on the page if that makes sense.

myArray.??? = 1, 2, 3, 4, 5 or 1 2 3 4 5

If anyone has any ideas, let me know.

Upvotes: 1

Views: 237

Answers (4)

Scott Sauyet
Scott Sauyet

Reputation: 50787

This is often called a range function. There are many ways to do this in Javascript. Here's one I sometimes use:

const range = (lo, hi) => [...Array(hi - lo + 1)].map((_, i) => lo + i)

const vals = ['A', 'B', 'C', 'D', 'E']

console.log(range(1, vals.length))

This does not check that your inputs are integers or that hi >= lo. Those are easy enough to add, depending upon your needs.

Explanation

We start by creating the number of elements we want by subtracting the lo value from the hi one and adding 1. (Adding one is because we include both ends of the range. range(5, 7) should have three elements, not two: 5, 6, and 7.) We pass this value to the Array constructor, which creates a sparse array with length n.

The trouble is that when Javascript tries to iterate this new array, it doesn't bother visiting the missing elements, so we turn it into a similar, but not identical array by treating it as an iterable and turning that back into an array: [...Array(5)]. The difference is simple. The first array had a length of 5, but no properties such as 0, 1, 2, 3, or 4. The new one has such properties, each with the value undefined. (3 in Array(5) //=> false, but 3 in [...Array(5)] //=> true.)

Now we map over these values, using the second parameter to map, which tracks the index of the elements in our array. Because we're ignoring the first parameter, we give it the throw-away name of _. Adding that index to the low value gives us our range element.

So range(3, 8) //=> [3 + 0, 3 + 1, 3 + 2, 3 + 3, 3 + 4, 3 + 5] which is [3, 4, 5, 6, 7, 8].

Variations

If you're always going to use 1 for the start of your range, you could write a version without it, but the code will be only a little simpler and the function will be less flexible. But if you wanted it, that would be

const range = (hi) => [...Array(hi)].map((_i) => i + 1)

But more flexibility could be created by currying the original function:

const range = (lo) => (hi) => [...Array(hi - lo + 1)].map((_, i) => lo + i)
const rangeFrom1 = range(1)

which you could use like this:

console.log(rangeFrom1(vals.length))

This gives you both the generic range and one that always starts at one.

Upvotes: 1

Zack
Zack

Reputation: 292

You could use JSX with ES6 to do something like this:

render() {
  return <div>
    {
      myArray.map((element, index)) =>
        <p>Element #{index} is {element}</p>
    }
  </div>
}

Upvotes: 2

A l w a y s S u n n y
A l w a y s S u n n y

Reputation: 38502

Though I'm not sure that, this is what you want or not? but Let's do it with simple forEach() if I understood your question properly,

const myArray = ['A', 'B', 'C', 'D', 'E'];

myArray.forEach((element, index)=> {
  var para = document.createElement("P"); // Create a <p> element
  var t = document.createTextNode(`${index+1}`); // Create a text node
  para.appendChild(t); // Append the text to <p>
  document.body.appendChild(para); // Append <p> to <body> 

})

Upvotes: 2

pouyan
pouyan

Reputation: 3439

If I got your point correctly this is what you are looking for (using ES6):

var dt = ["a", "b","c", "d"];

for (let idx in dt)
{
  let new_node = document.createElement("p");
  new_node.innerHTML=idx;
  document.getElementById("container").appendChild(new_node);
}
<div id="container"></div>

Upvotes: 1

Related Questions