迭代对象值

Question

我有一个食物json文件，可以从中获取多个值。我的问题是，我能够遍历数组和对象，例如，对于不同的配方，方向并不总是相同的步数。我想在html中将它们创建为li，但它只是存储为一个大字符串。我希望能够为每个步骤创建一个单独的li，而不是为所有步骤都创建一个li ...

我尝试过的有效方法是array [index]-但是正如Ive所说，我希望能够遍历每个变量并将其创建为自己的li，因为并非所有配方方向都具有相同的步骤数。 / p>

function getJson() {
    fetch("url")
    .then(function(res){
       return res.json();
})
    .then(function(data){

        let ran = Math.floor(Math.random() * data.length);

        const directions = Object.entries(data[ran].directions);

        let newDirections = [];

        for(const [count, direction] of directions) {
            newDirections.push(count, direction);
        }

        document.getElementById('recipe').innerHTML = `
        <h1>${data[ran].name}</h1>
        <p>${data[ran].description}</p>
        <img src='${data[ran].image}'>
        <h3>Directions: </h3>
        <li>${newDirections}</li>
        `;

    })
    .catch(function(err){
        console.log(err);
    })
}

一切正常，没有错误。但是，我想要的是在字面上的字符串“ newDirections”为每个步骤/方向创建一个li，在这种情况下，最好说4个步骤。我想让4个人的li列出他们的每个步骤，而不是其中包含所有内容的1 li

这就是它的样子...

但是，在此示例中有4个步骤，我希望它们位于自己的li之下