CODEWITHSUNDEEP
javascriptfunction
andjyDev
andjyDev

Reputation: 53

I have no idea how to solve this problem, can you help me?

I have no idea how to solve this problem, can you help me?

How to transform this :

const array = [["1", ["2", ["3"]]]];

In this (and consider that the array can be an infinite loop) :

<p>
    1
    <p>
        2<p>3</p>
    </p>
</p>;

Not this :

array.forEach(el => {
    el.forEach(el => {
        el.forEach(el =>{

        })
    })
})

Upvotes: 1

Views: 85

Answers (4)

Michael M.
Michael M.

Reputation: 11080

You need to use recursion. Other answers seem to make this unnecessarily complicated. All you need is this:

function makeP(arr) {
    if (arr.length == 1) {
        return "<p>" + arr[0] + "</p>";
    }
    return "<p>" + arr[0] + makeP(arr[1]) + "</p>";
}

// Remove the unneeded extra nested array
const array = ["1", ["2", ["3"]]];

console.log(makeP(array));
// output: "<p>1<p>2<p>3</p></p></p>"

Upvotes: 1

andjyDev
andjyDev

Reputation: 53

Thank you all! This allowed me to understand how to achieve it is example below:

const demo = [
    {
        content: "ligne 1",
        items: [],
    },
    {
        content: "ligne 2",
        items: [
            {
                content: "ligne 2.1",
                items: [
                    {
                        content: "ligne 2.1.1",
                        items: [],
                    },
                   {
                        content: "ligne 2.1.2",
                        items: [],
                    },
                ],
            },
        ],
    },
    {
        content: "ligne 3",
        items: [],
    },
];


const type = "ol"

const createList = (items, type) => {
    let li = "";

    const loop = (items, type) => {

      items.forEach((el) => {
            if (el.items.length == 0) {
                li += `<li>${el.content}</li>`;              
                return;
            }
            li += `<li>${el.content}</li><${type}>`;
            loop(el.items, type);
                li += `</${type}>`;
        });
    };
    loop(items, type);
    return li;
};

const result = createList(demo, type)
console.log(`<${type}>`,result,`</${type}>`)
document.getElementById('container').innerHTML = result
<ol id='container'></ol>

Upvotes: 0

Richard Henage
Richard Henage

Reputation: 1798

NOTE: You can't actually nest <p> elements, so this is with <divs>

(This works even if you have a weird array like ["1", "2", ["3", [["5", "6"]]]])
Use a recursive function:

const array = [["1", ["2", ["3"]]]];

document.body.innerHTML += createDivs(array)

function createDivs (array) {
  let result = "<div>"
  array.forEach(elem=>{
    if (typeof elem === "string") {
      result += elem
    } else if (typeof elem === "object") { // Arrays are objects, too
      result += createDivs(elem)
    }
  })
  result += "</div>"
  return result
}
div {
  border: 1px solid black;
  padding: 10px;
}

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386654

You could check the value and if an array map the values with p tag otherwise take only the value.

const
    format = value => Array.isArray(value)
        ?`<p>${value.map(format).join('')}</p>`
        : value,
    data = ["1", ["2", ["3"]]],
    result = format(data);

console.log(result);

Upvotes: 0

Related Questions