Javascript array item that shows only 3 values-CodePudding

I need the code to show all 5 values (with one being a link) in the array item but it is only showing 3 values. This is the code that I'm using:

myArrayValues.innerHTML  =
    "<li><h2>"  
    myArrayEvent[i][0]  
    '</h2><p><a href="myPage.php?itemID='  
    [i]  
    '">'  
    myArrayEvent[i][1]  
    "</a><br/>"  
    myArrayEvent[i][2]  
    "</p></li>";
}

and this is the array values:

var myArrayEvent = [
  ["United States", "Drew Bird Photography — California", "Rockville", "Contact Info", "Email Address"]

It is only showing until "Rockville".

I am still new to javascript array, and that is the code that I was provided with. In the original sample, there were only 3 values in one array item, and I was asked to turn it into a 5-value array item with headline 1, headline 2, and a link.

CodePudding user response：

You have used static values from 0 to 2, that's why it is showing 3 values. Use map of map for accessing all elements dynamically of the 2D array myArrayEvent . Check my demo, Hope it will be helpful for you.

var myArrayEvent = [["United States", "Drew Bird Photography — California", "Rockville", "Contact Info", "Email Address"]];
    let myArrayValues = document.getElementById("demo");
    myArrayEvent.map((innerArray) => {
        innerArray.map((elem, index) => {
            myArrayValues.innerHTML  = (index == 0) ? `<h2> ${elem} </h2>` : `<li> ${elem}</p></li>`;
        })
    })

<div id="demo"></div>

CodePudding user response：

You could iterate over the myEventArray and use the key as a comparator in a switch.

I am not 100% sure how you want your code to format but I assume you want each event in a list with the contact php page myPage.php?itemID= => equal to an id that is for that list and its <a> tags textContent to be Drew Bird Photography — California.

After that I am not sure how you want the code to parse, but you could add the properly formatted HTML using a parent element in the DOM like a UL element. Then using insertAdjacentHTML place the formatted HTML into the DOM. Then in your switch statement depending on the key value with each iteration of the loop, the method returns the switch logic per case querying the proper section and adding textContent or HTML.

const ul = document.querySelector('ul')

// so code does not break, initial code does not explain where i comes from
// assuming it is the ID for this arrayEvent I will make it static

let i = 1;

var myArrayEvent = ["United States", "Drew Bird Photography — California", "Rockville", "Contact Info", "Email Address"]

ul.insertAdjacentHTML('beforeend', `<li ><h2></h2><p><a href="myPage.php?itemID=${i}"></a></p></li>`)
const parseEvent = (ev) => {
  const pTag = ul.querySelector('.arrEv p')
  const aTag = ul.querySelector('.arrEv a')
  const hTag = ul.querySelector('h2')
  return ev.map((item, k) => {
    switch (k) {
      case 0:
        hTag.textContent = item
        break;
      case 1:
        aTag.textContent = item
        break;
      case 2:
        pTag.insertAdjacentHTML('beforeend', `<span >${item}</span>`)
        break;
      case 3:
        pTag.insertAdjacentHTML('beforeend', `<span >${item}</span>`)
        break;
      case 4:
        pTag.insertAdjacentHTML('beforeend', `<span >${item}</span>`)
        break;
    }
  })
}

parseEvent(myArrayEvent)

.blk {
  display: block;
}

<ul></ul>