CODEWITHSUNDEEP
javascriptreactjs
Nick
Nick

Reputation: 13

How to change the logic for the last element while mapping an array

Let's say there exists an array of keys:

[ "link1", "link2", "link3" ]

and there is a JSON object called links that is in the following format:

{
  "link1": "https://google.com/",
  "link2": "https://facebook.com/",
  "link3": "https://stackoverflow.com/"
}

I'm currently working on a React project to practice my JS, and in this project, I needa figure out how to print out these as anchor tags, separated by commas besides for the last element. The desired output for the example would be something along these lines:

link1, link2, and link3

Except they would be anchor tags correlating to the proper links. How would you recommend I approach this problem?

Edit: Currently this is my approach: 

return links.map((key) => {
  return (
    <span><a href={this.props.content.links[key]} key={key}>{key}</a></span>
  )
})

So far, it's returning them like Link1Link2Link3 (as expected). To clarify my question. I'm just looking for a pointer on if there's any methods or whatnot that would make it possible to detect if the key that I'm on is the last key in the array.

Upvotes: 0

Views: 938

Answers (4)

Matthew Moore
Matthew Moore

Reputation: 866

JS has the built in function, array.join(). It loops through the array, creating a single string of all items, separated by the character used as an argument.

If the arguments are left blank ( .join() ), it defaults to a single comma; any string put in the argument will be used (e.g. .join('-') or .join('apple').

See my snippet below for it in action:

var linksObj = {
  "link1": "https://google.com/",
  "link2": "https://facebook.com/",
  "link3": "https://stackoverflow.com/"
}

var linksAnchor = []; // Prepare empty array

for (let item in linksObj) {
  // Poplate array with the span and anchors, set to the original object
  linksAnchor.push('<span><a href="' + linksObj[item] + '">' + item + '</a></span>');
}

// Empty (default) join, uses a single comma
document.getElementById('navlistjoin').innerHTML = linksAnchor.join();

// Join using space, comma, then another space
document.getElementById('navlistjoinscs').innerHTML = linksAnchor.join(' , ');

// Join using a dash
document.getElementById('navlistjoindash').innerHTML = linksAnchor.join('-');

// Join using the string 'apple'
document.getElementById('navlistjoinapple').innerHTML = linksAnchor.join('apple');
a {
  text-decoration: none;
  color: #FF0000;
}

a:hover {
  text-decoration: underline;
}
<h4>.join()</h4>
<nav id="navlistjoin"></nav>
<h4>.join(' , ')</h4>
<nav id="navlistjoinscs"></nav>
<h4>.join('-')</h4>
<nav id="navlistjoindash"></nav>
<h4>.join('apple')</h4>
<nav id="navlistjoinapple"></nav>

Upvotes: 0

Naftali
Naftali

Reputation: 146302

You can use css:

(I used scss, but can be with css too)

  span {
    &::after {
      content: ', ';
      display: inline-block;
    }
    &:nth-last-child(2)::after {
      content: ' and ';
    }
    &:nth-last-child(1)::after {
      content: '';
    }
  }

See example: https://jsfiddle.net/maniator/oqrw2ukh/

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use the index parameter of map method:

return links.map((key, index, arr) => {
  console.log(arr.length - 1 === index) // true if last index
})

Upvotes: 2

user1726343
user1726343

Reputation:

When mapping an array in JS, it is possible to simultaneously access the index. You simply need to pass a function (key, index) => ... instead of only asking for the key. If the current index is equal to the length of the array minus 1 (because indices start from 0), you are on the last element of the array.

Here's an example:

const arr = ["foo", "bar", "baz"]
const result = arr.map((x, i) => i === arr.length - 1 ? "Hello" + x : x)

console.log(result) // => ["foo", "bar", "Hello baz"]

Upvotes: 3

Related Questions