Creating a list of links from an array

Question

I'm trying to pass an array and return a list of links from the values in the array.

This is what I want in the end from

var list = ["Link 1", "Link 2", "Link 3"]

I've tried a few different ways and I'm getting different errors. I was hoping someone could point me in the right direction or point out where my issue is.


  var list = document.createElement('ul').attr("id", "ticketList"); // Create the list element

  $.each(arr, function(i, arr) {
    $("#ticketList").append("<li><a href="'https://jeng.internal.com/browse/'+arr[i]+'"  id="'+arr[i]+'_link">'+arr[i]+'</a></li>");

    return list;
  }

I get the error

Uncaught ReferenceError: onSearchClickHandler is not defined

I've also tried:

function makeUL(arr) {  

  var list = document.createElement('ul'); // Create the list element

  for (var i = 0; i < arr.length; i++) { //loop through the array to make the list
        var z = document.createElement('li');
        var item = '<a href="https://jeng.internal.com/browse/'+arr[i]+'"  id="'+arr[i]+'_link">'+arr[i]+'</a>';
        z.appendChild(item)
        list.appendChild(z); // Add it to the list
    }
    return list;
  }

From this I get the error

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

I looked around and based off this question and answer I tried adding in .innerHTML, but it takes me back to the same error originally Uncaught ReferenceError

Any help would be much appreciated.

onSearchClickHandler where are you referencing this? It doesn't appear in any part of the code you posted here — Calvin Nunes
– Calvin Nunes, Commented Sep 17, 2019 at 20:02

Naga Sai A · Accepted Answer · 2019-09-17 20:36:26Z

1

To achieve expected result, make below changes to your code

Create ul element and append to body

var list = document.createElement('ul'); // Create the list element $("body").append(list)
Then add attribute id -ticketList

$('ul').attr("id", "ticketList");
Loop arr using $.each

working code for reference

var arr = ["Link 1", "Link 2", "Link 3"]

var list = document.createElement('ul'); // Create the list element
$("body").append(list)
$('ul').attr("id", "ticketList");
  $.each(arr, function(i, arr) {
    $("#ticketList").append("<li><a href='https://jeng.internal.com/browse/"+arr+"'  id="+arr+"_link>"+arr+"</a></li>");
  })

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

codepen - https://codepen.io/nagasai/pen/LYPJoaN?editors=1010

edited Sep 17, 2019 at 20:36

answered Sep 17, 2019 at 20:30

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

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

2 Comments

VVV Over a year ago

I believe the return list; is not necessary as it's not even in the scope of the function.

Naga Sai A Over a year ago

@VVV, yes, I just reused same code, updated code now , thanks

Collectives™ on Stack Overflow

Creating a list of links from an array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related