How can I wrap each multidimensional array into html element?-CodePudding

I have array

0: ['a', 'n', 'i', 'm', 'a', 'l'] 
1: ['c', 'a', 'r'] 
2: ['f', 'l', 'o', 'w', 'e', 'r']

I want to wrap each array into html element. for example

<div><span>c</span><span>a</span><span>r</span></div>

<div><span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>l</span></div>

i already try

for(x=0; x<arr.length; x  ){
    for(k=0; k<arr[x].length; k  ){
        arr_html  = "<span>" arr[x][k] "</span>"
    }
    words_html  = "<div>" arr_html "</span>"
}

but the output become

animal
animal car
animal car flower

How can I achieve this using jQuery?

CodePudding user response：

const input = [
  ['a', 'n', 'i', 'm', 'a', 'l'],
  ['c', 'a', 'r'],
  ['f', 'l', 'o', 'w', 'e', 'r']
];

for (let i in input) {
  console.log('<div><span>'   input[i].join('</span><span>')   '</span></div>');
}

CodePudding user response：

You can use Array.prototype.map.

You want to map over the outer array so that each element is converted to:

`<div>${element}</div>`

And map the inner array so that each element is converted to:

`<span>${element}<span>`

CodePudding user response：

You can use vanilla JS also.

var arr = [
  ["a", "n", "i", "m", "a", "l"],
  ["c", "a", "r"],
  ["f", "l", "o", "w", "e", "r"]
];

let html = "";

arr.forEach((letters) => {
  html  = "<div>";

  letters.forEach((l) => {
    html  = `<span>${l}</span>`;
  });

  html  = "</div>";
});

CodePudding user response：

I think you have an array contain object as you mentioned in the question. You could use for loop to loop the array and use appendTo.

let array =[{
0: ['a', 'n', 'i', 'm', 'a', 'l'] ,
1: ['c', 'a', 'r'] ,
2: ['f', 'l', 'o', 'w', 'e', 'r'],
}]
for(let i =0;i<Object.keys(array[0]).length;i  ){
for(let j =0;j<Object.values(array[0])[i].length;j  ){
$("<span>" Object.values(array[0])[i][j] "</span>").appendTo('body');
}
}

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

CodePudding user response：

You can use

let arr = [
  ["a", "n", "i", "m", "a", "l"],
  ["c", "a", "r"],
  ["f", "l", "o", "w", "e", "r"]
];

let text = "";
$.each(arr, function(i, e) {
  text  = "<div>";
    $.each(e, function(key, val) {
      text  = "<span>"   val   "</span>";
    });
    text  = "</div>";
});
$( "body" ).append( text );