Итерация объекта Val

Question

У меня есть файл json с едой, из которого я получаю несколько значений.Моя проблема в том, что я могу перебирать как массивы, так и объекты, например, направления не всегда одинаковы для разных рецептов.Я хочу создать их как li в HTML, но он просто хранится как одна большая строка.Я хочу иметь возможность создавать отдельный li для каждого шага, а не один li для всех шагов ...

То, что я попробовал, сработало, это массив [index] - однако, как я сказал, я хочу бытьвозможность перебирать каждый из них и создавать его как свой собственный li, поскольку не все направления рецептов имеют одинаковое количество шагов.

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 отдельных пользователя перечислили каждый их шаг, а не 1 li со всем, что в нем

, вот как это выглядит ...

однако в этом примере есть 4 шага, и я хочу, чтобы они находились под своими собственными именами