Combine arrays and output to HTML

Question

There are 2 arrays with variables, you need to combine them, create button elements with the btn-menu class, data element category (with a variable from the array), and text from the array.

let category = ['Pizza 🍕', 'Rolls 🍣', 'Sets 🍱', 'Hot dish🥘', 'Salads🥗'];
let slug_id = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads'];

The order of the first and second arrays corresponds to the content, that is, Pizza 🍕(0) and pizza(0) need to output all these elements to the HTML nav object with the container class.

You should get a horizontal menu with buttons:

<nav class="container">
    <button class="btn-menu ripple-btn" category="pizza">Pizza 🍕</button>
    <button class="btn-menu ripple-btn" category="rolls">Rolls 🍣</button>
    <button class="btn-menu ripple-btn" category="sets">Sets 🍱</button>
    <button class="btn-menu ripple-btn" category="hot-dish">Hot dish🥘</button>
    <button class="btn-menu ripple-btn" category="salads">Salads 🥗</button>
</nav>

You need the code in js or jQuery. Please help me solve the problem :)

Here's what I tried:

var category = ['Pizza 🍕', 'Rolls 🍣', 'Sets 🍱', 'Hot dish🥘', 'Salads🥗'];
var slug_id = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads'];

var nav = $('.container');
for (var i = 0; i < category.length; i++) {
    var btn = $('<button/>');
    var class_btn = $(btn).attr('class','btn-menu ripple-btn');
    var text_btn = $(class_btn).text(category[i]);
 }
$(btn).appendTo(nav);

Please show your attempt to solve this coursework. SO is here to help you debug code, not to write it for you — Rory McCrossan
– Rory McCrossan, Commented Nov 6, 2020 at 11:12
You just need a for loop over one of the arrays, using the index to get the corresponding value from the other array, then you can use those values in a template string. — Nick
– Nick, Commented Nov 6, 2020 at 11:12
Added the code that I write, but I only output one value and I do not know how to add a second array :( — Дмитрий Невский
– Дмитрий Невский, Commented Nov 6, 2020 at 11:20

Swati · Accepted Answer · 2020-11-06 13:23:54Z

1

As you are already iterating through the array and length of both array are same simply you can use $(btn).attr('category', slug_id[i]); this will add array value at i position on every iterating inside button.

Demo Code :

var category = ['Pizza 🍕', 'Rolls 🍣', 'Sets 🍱', 'Hot dish🥘', 'Salads🥗'];
var slug_id = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads'];

var nav = $('.container');
for (var i = 0; i < category.length; i++) {

  var btn = $('<button/>');
  $(btn).attr('class', 'btn-menu ripple-btn');
  $(btn).text(category[i]);
  $(btn).attr('category', slug_id[i]); //use this to add attribute with value from array
  $(btn).appendTo(nav); //add button created inside nav
}

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

answered Nov 6, 2020 at 13:23

Swati

28.5k4 gold badges26 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Combine arrays and output to HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related