Display js array in html

JavaScript
1

Hello,

I feel like an idiot for asking this because I know I am just missing basic terminology.

I have the following js in my page, which is two variables from a cms inside li tags. It’s actually an array (“Hank Smith”,“Jane Doe”,“Steve Hicks”).

 ``` console.log(arr);


The console.log shows the array as expected.

Where I am completely blanking out is how to display the array in my html page.
I have tried the following but only get the first line.

```const oats = '<li>lastname firstname</li>';
```oats.sort();
```document.getElementById("staff-bio2").innerHTML = oats;


 
```function showArray() {
  ```var arr = '<li>lastname firstname</li>';
  ```//console.log(arr);
  ```var names = new Array(arr);
  ```console.log(names);
  ```names.sort();

  ```document.getElementById("staff-bio").innerHTML = names.join("");
```}
```showArray();  

If anyone can point me in the right direction I would super greatly appreciate it.  I know I am missing something obvious.
2

Hello, It would help if you could format this code just put it inside the </> by pressing the button on top of this chat box and removing the comments. Also a link to the challenge. If your only question is putting this in the html file just copy and put iside JS script tags inside the html body.

3

My bad!

console.log(arr);

The console.log shows the array as expected.

Where I am completely blanking out is how to display the array in my html page.
I have tried the following but only get the first line.

const oats = '<li>lastname firstname</li>';
oats.sort();
document.getElementById("staff-bio2").innerHTML = oats;

function showArray() {
 var arr = '<li>lastname firstname</li>';
  console.log(arr);
  var names = new Array(arr);
  console.log(names);
  names.sort();

  document.getElementById("staff-bio").innerHTML = names.join("");
}
showArray();

If anyone can point me in the right direction I would super greatly appreciate it. I know I am missing something obvious.

4

In my html only the last name appears.

5

Hi @petattlebaum

I haven’t tested the code.

Try addition assignment.

Happy coding

6

Thank you so much @Teller !

I am able to bring in my array and split the string using the code below. Where my brain is not working now, if splitting the data in the for loop.

let textArray = "<t4 type="navigation" name="Test Faculty List - Dev - 1-col-carnegiejs" id="480" />";
let text = textArray.slice(0, -1);
const data = text.split("  ");
data.sort();

let list = document.getElementById("staff-bio");
for (i = 0; i < data.length; ++i) {
  let div = document.createElement('div');
  div.innerText = data[i];
  list.appendChild(div);
  console.log(data[i]);
}

Currently the data comes into the console as (last name, first name, phone):

lastname1,firstname1,
lastname2,firstname2,2223334444
lastname3,firstname3,1233211234
lastname4,firstname4,5551112222

And shows correctly in the page within the div tags.

Where I am completely failing, is splitting this data so I can place it where I want. I have tried adding the code below but that only returns the first letter instead of the first part of the array.

const data2 = data[i].split(",");
div.innerText = data2[i][0];

Any ideas pointing me in the right direction and I would be super grateful. I feel like I am missing basic js terminology. I’ve looked up slice and splice but am just not getting it yet.

7

Of course I left out important information…my goal.

What I want to do is position each element within the array.

For example:

<div>firstname lastname<br />phone</div>

So it would look like:

lastname1,firstname1

lastname2,firstname2
2223334444

lastname3,firstname3
1233211234

lastname4,firstname4
5551112222
8

Hi @petattlebaum

let data = ["Adams", "Amy", 1234]
const data2 = data[0].split(",");
let test1 = data2[0][0];
console.log(test1)  // "A"
let test2 = data2[0];
console.log(test2)  // "Adams"

Try removing the [0] from the end of the code, as this will access the first item of the array.

Happy coding

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.