CODEWITHSUNDEEP
javascriptarraysdom
Shahaparan
Shahaparan

Reputation: 33

How to generate multiple ulr in javascript?

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

Upvotes: 2

Views: 67

Answers (3)

MauriceNino
MauriceNino

Reputation: 6757

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>

Upvotes: 1

Thomas
Thomas

Reputation: 12637

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>

Upvotes: 1

User863
User863

Reputation: 20039

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>

Upvotes: 1

Related Questions