Как перебрать forEach по значениям объекта / массива / ключа из ax ios in JS (make DRY)?

Question

Я изо всех сил пытаюсь сжать этот код в один forEach l oop, чтобы сделать мой код dry. Изображение показывает console.log (res) для того, с чем я работаю.

Вот мой код:

   .get('https://website.went.here/articles')
        .then((res) => { 
            const articles = res.data.articles;
            const js = articles.javascript;
            const bs = articles.bootstrap;
            const jq = articles.jquery;
            const node = articles.node;
            const tech = articles.technology;

            i = 0;

           console.log(articles.values(res));

            js.forEach((item) => {
                card.appendChild(cardCreator(item))
            });
            bs.forEach((item) => {
                card.appendChild(cardCreator(item))
            });
            jq.forEach((item) => {
                card.appendChild(cardCreator(item))
            });
            node.forEach((item) => {
                card.appendChild(cardCreator(item))
            });
            tech.forEach((item) => {
                card.appendChild(cardCreator(item))
            }); 

Answer 1

Вы можете использовать Object.keys, чтобы получить ключи объекта.

Например,

const obj = {"javascript": [...], "python": [...], "bootstrap": [...]}

Object.keys(obj) выведет ["javascript", "python", "bootstrap"].

Оттуда вы можете сохранить этот массив как переменную, а затем выполнить итерации по этим ключам. вот так:

const keys = Object.keys(obj);
keys.forEach(key => {
  obj[key]...
})

Answer 2

Создайте массив свойств, по которым вам нужно итерировать, итерировать эти свойства, и для каждого свойства, итерировать по всем элементам в массиве свойств и добавить:

.get('https://website.went.here/articles')
  .then((res) => {
    const { articles } = res.data;
    for (const prop of ['javascript', 'bootstrap', 'jquery', 'node', 'technology']) {
      for (const item of articles[prop]) {
        card.appendChild(cardCreator(item));
      }
    }
  });

Или, если у вас есть использовать forEach:

.get('https://website.went.here/articles')
  .then((res) => {
    const { articles } = res.data;
    ['javascript', 'bootstrap', 'jquery', 'node', 'technology'].forEach((prop) => {
      articles[prop].forEach((item) => {
        card.appendChild(cardCreator(item));
      });
    });
  });

Если порядок добавляемых свойств не имеет значения, вы можете сделать это проще, просто перебирая значения объекта articles объекта:

.get('https://website.went.here/articles')
  .then((res) => {
    for (const arr of Object.values(res.data.articles)) {
      for (const item of arr) {
        card.appendChild(cardCreator(item));
      }
    }
  });