2

I'm trying to create an array and have it loop through the array and append it to a div.

HTML/PHP:

<ul id="menu" class="menu">
    <li id="menu-item-1">
        <a href="#">
        </a>
    </li>
    <li id="menu-item-2">
        <a href="#">
        </a>
    </li>
    <li id="menu-item-3">
        <a href="#">
        </a>
    </li>
</ul>

JS

$(document).ready(function(){
    $('a').append("
        <div class='CLASS_NAME_HERE'>
            <span class='vertical-align-middle'></span>
            <img src='IMG_HERE'>
        </div>
        <div class='filter-label'>LABEL_HERE</div>");
});}

JS ARRAY

var arrayTest= [
    {className: "class-01", urlSrc: "www.url01.com", labelName: "01 Label Name"},
    {className: "class-02", urlSrc: "www.url02.com", labelName: "02 Label Name"},
    {className: "class-03", urlSrc: "www.url03.com", labelName: "03 Label Name"},
]

Basically, it would loop through the array and append each one to look like this:

<li id="menu-item-1">
    <a href="#">
        <div class='class-01'>
            <span class='vertical-align-middle'></span>
            <img src='www.url01.com'>
        </div>
        <div class='filter-label'>01 Label Name</div>");
    </a>
</li>

I haven't been able to work out the loop properly. Any help would be appreciated.

1 Answer 1

1

You have to loop the array. Using .forEach() you can use the two arguments that are provided:

  • item
  • index.

At each loop iteration, using the item, you can access the objects properties like className, urlSrc and labelName.

Using the index, you can target the right a element with the .eq() method.

You will also notice the use of templating literals to insrt the variables in the string to append.

var arrayTest = [
  {
    className: "class-01",
    urlSrc: "http://via.placeholder.com/100x100?text=Image 1",
    labelName: "01 Label Name"
  },
  {
    className: "class-02",
    urlSrc: "http://via.placeholder.com/100x100?text=Image 2",
    labelName: "02 Label Name"
  },
  { className: "class-03",
   urlSrc: "http://via.placeholder.com/100x100?text=Image 3",
   labelName: "03 Label Name"
  }
];

$(document).ready(function () {
  arrayTest.forEach(function (item, index) {
    $("#menu a").eq(index).append(
`<div class="${item.className}">
  <span class='vertical-align-middle'></span>
  <img src="${item.urlSrc}">
</div>
<div class='filter-label'>${item.labelName}</div>`
    );
  });
});
a{
  text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="menu" class="menu">
  <li id="menu-item-1">
    <a href="#">
    </a>
  </li>
  <li id="menu-item-2">
    <a href="#">
    </a>
  </li>
  <li id="menu-item-3">
    <a href="#">
    </a>
  </li>
</ul>

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.