How to generate multiple ulr in javascript?

Question

Here is my trying code, I am trying to generate string to multiple URLs

var customfield_13731 = "one,two,three,four,one,two,three,four"
let chunks = customfield_13731.split(",");
let res = [];
let output = [];
while (chunks.length) {
    let [id, name, key, test] = chunks.splice(0, 4);
    output.push({ id, name, key, test });
}

output.map((item) => {
    let url = `https://test.io/639422/${item.id}/${item.name}/${item.key}/${item.test}`;
    console.log(url)
    document.getElementById("URL").innerHTML = url;
    document.getElementById("URL").setAttribute("href", url);
});

when I am getting console.log(URL), I get multiple URL links, but I need to display a browser by dom. I can not display multiple URL in UI

My expected output would be :

https://test.io/639422/one/two/three/four
https://test.io/639422/one/two/three/four

A single link can only point to a single url at the same time. You are changing the url of the same link over and over again. — Thomas
– Thomas, Commented Jul 22, 2020 at 12:04
I want to generate every 4 string is a link , if 100 string are appeared , then it generate 25 url . For example, If my string 1,2,3,4 , then the url would be test.io/639422/1/2/3/4 — Shahaparan
– Shahaparan, Commented Jul 22, 2020 at 12:06

MauriceNino · Accepted Answer · 2020-07-23 08:57:53Z

1

You need to append it by using += and not = in your innerHTML assignment.

Also:

Use forEach not map if you don't change the array
You can do the href and text adding in one step, by simply appending an a tag

var customfield_13731 = "one,two,three,four,five,six,seven,eight"
let chunks = customfield_13731.split(",");
let res = [];
let output = [];
while (chunks.length) {
    let [id, name, key, test] = chunks.splice(0, 4);
    output.push({ id, name, key, test });
}

output.forEach((item) => {
    let url = `https://test.io/639422/${item.id}/${item.name}/${item.key}/${item.test}`;

    document.getElementById("url").innerHTML
            += `<a href="${url}">${url}</a><br>`; // append not replace!
});

<div id="url"></div>

Edit (Thank you @Thomas)

A better way would be to concat the strings before adding them to the DOM, opposed to adding them one after the other. This would be a way to do this:

var customfield_13731 = "one,two,three,four,five,six,seven,eight"
let chunks = customfield_13731.split(",");
let res = [];
let output = [];
while (chunks.length) {
    let [id, name, key, test] = chunks.splice(0, 4);
    output.push({ id, name, key, test });
}

const urlParts = output.map((item) => {
    let url = `https://test.io/639422/${item.id}/${item.name}/${item.key}/${item.test}`;

    return `<a href="${url}">${url}</a><br>`;
}).join('');

document.getElementById("url").innerHTML = urlParts;

<div id="url"></div>

edited Jul 23, 2020 at 8:57

answered Jul 22, 2020 at 12:05

MauriceNino

6,8851 gold badge32 silver badges76 bronze badges

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

4 Comments

Thomas Over a year ago

No! Don't! innerHTML += is bad. Really really bad. Not only is it bad for performance (especially in a loop), but if you had added event-listener, or hold a reference to one of the existing elements in #url you would have just broken your code. Concat the strings first and do a single innerHTML = entireMarkup;

MauriceNino Over a year ago

Yeah, if you want to preserve event listeners, you need to use DOM functions. Seeing that this isn't the case here, this was the easiest fix in my view. Maybe not the best

Thomas Over a year ago

Even if you only add 10 elements. The code will have parsed markup 10 times, created 55 DOM-Nodes and thrown away 45 of them. At 100 items we'Re at ~5000 unnecessary nodes and for 200 at ~20K. That's a lot of garbage produced for "the easiest fix in my view". And especially inexperienced users, the kind that reads this kind of answers, will not be aware of that.

MauriceNino Over a year ago

It still is the easiest fix for the given problem in my opinion. Either way, I have added your suggestion as an edit.

User863 · Accepted Answer · 2020-07-22 12:05:20Z

1

You can use createElement() to create multiple anchor elements

var customfield_13731 = "one,two,three,four,one,two,three,four"
let chunks = customfield_13731.split(",");
let res = [];
let output = [];
while (chunks.length) {
    let [id, name, key, test] = chunks.splice(0, 4);
    output.push({ id, name, key, test });
}

output.map((item) => {
    let url = `https://test.io/639422/${item.id}/${item.name}/${item.key}/${item.test}`;
    console.log(url)
    
    let a = document.createElement('a');
    a.innerHTML = url;
    a.setAttribute("href", url);
    
    document.getElementById("URL").appendChild(a);
});

a { display: block }

<div id="URL"></div>

answered Jul 22, 2020 at 12:05

User863

20.1k3 gold badges20 silver badges45 bronze badges

Comments

Thomas · Accepted Answer · 2020-07-22 12:38:30Z

1

Yet another version.

I have added a utility function, because it's not the first time I had to turn a long list into rows/pages/groups, and DRY.

// DRY, not the first time I needed this.
const toGroupsOf = (n, array) => Array.from({ length: Math.ceil(array.length/n)|0 }, (_,i) => array.slice(n*i, n*i+n));

var customfield_13731 = "one,two,three,four,five,six,seven,eight";

document.getElementById("URL").innerHTML = toGroupsOf(4, customfield_13731.split(","))
  .map(([id,name,key,test]) => {
    let url = `https://test.io/639422/${id}/${name}/${key}/${test}`;
    return `<a href="${url}">${url}</a>`;
  })
  .join("\n");

a { display: block }

<div id="URL"></div>

answered Jul 22, 2020 at 12:38

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to generate multiple ulr in javascript?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related