Итерация по объекту и добавление новых данных с помощью forEach

Question

Я создаю навигационную панель и пытаюсь сделать это с учетом объектно-ориентированного программирования.

На моей панели навигации у меня есть иконки социальных сетей, по которым вы можете нажать, чтобы связаться со мной. Идея состоит в том, чтобы только добавлять новые ключи и значения в мой объект, чтобы добавить новый социальный значок в будущем.

Для каждого ключа и значения navbar.socialLinks я хочу добавить свой html с другим imgSr c и ссылочные значения на каждом новом значке, который добавляется. Есть ли умный способ сделать это?

Заранее спасибо.

const navbar = {
"socialLinks": {
    github: {
        imgSrc: "assets/images/github_logo.png" , 
        link:   "https://www.github.com"
    },
    line: {
        imgSrc: "assets/images/line_logo.png" , 
        link:   ""
    },
    linkedin: {
        imgSrc: "assets/images/linkedin_logo.png", 
        link:   "https://www.linkedin.com"
    },
    showLinks: function() {

        let social = Object.values(navbar.socialLinks)
        let imgSrc = [];
        let socialLinks = [];

        for(let values of social) {
            imgSrc.push(values.imgSrc);
            socialLinks.push(values.link);
        }

        imgSrc.pop(); // Remove the function from the Arrays
        socialLinks.pop();

        imgSrc.forEach(function() {

            $('.social-icons').append

            (`
            <div class="item-social">
                <a href="${socialLinks[0]}" target="_rel">
                <img src="${imgSrc[0]}" alt="">
                </a>
                <div class="item-social-text">
                <div class="underscore"></div>
                <span class="open">Open</span>
            </div>
            `)
        })

        console.log(imgSrc);
        console.log(socialLinks);

        }
    }
}

Редактировать:

Я заметил, что получил мой знак минус по моему вопросу. Я провел много исследований перед публикацией, но был новичком в программировании и javascript в целом, и не слишком много работал над доступом к данным внутри объектов. Узнал много из вопросов ниже. Thx!

Answer 1

Некоторые замечания:

• Поскольку вы не используете ключи socialLinks, а порядок важен, имеет смысл определить его как массив объектов.
• Действие pop, которое вы выполняете для удаления функции из массивов, не очень приятно. Во-первых, лучше этого не делать: держите эту функцию отдельно от данных.
• Не объединяйте sh ссылки и изображения в отдельные массивы. Вы должны работать с той структурой данных, которая у вас уже есть. Нет необходимости конвертировать его
• Поскольку вы используете jQuery, используйте его также для генерации содержимого DOM.
• Я не уверен, что вы хотите выполнить действие "Открыть" для линейный элемент. Используйте условие, чтобы этот элемент span был включен или нет. Возможно, вы захотите сделать то же самое для некоторого другого контента, который должен быть включен, только когда объект не представляет линию делителя.

Вот как я бы его кодировал:

const navbar = {
    socialLinks: [{
        imgSrc: "assets/images/github_logo.png" , 
        link:   "https://www.github.com"
    }, {
        imgSrc: "assets/images/line_logo.png" , 
        link:   ""
    }, {
        imgSrc: "assets/images/linkedin_logo.png", 
        link:   "https://www.linkedin.com"
    }],
    showLinks() {
        $('.social-icons').append(this.socialLinks.map(({imgSrc, link}) =>
            $("<div>").addClass("item-social").append(
                $("<a>", {href: link, target: "_rel"}).append(
                    $("<img>", {src: imgSrc, alt: ""}),
                ),
                $("<div>").addClass("item-social-text"),
                $("<div>").addClass("underscore"),
                link && $("<span>").addClass("open").text("Open")
            )
        ));
    }
}
navbar.showLinks();

Answer 2

Я бы сделал что-то вроде этого:

const navbar = {
  socialLinks: {
    github: {
      imgSrc: "assets/images/github_logo.png",
      link: "https://www.github.com"
    },
    line: {
      imgSrc: "assets/images/line_logo.png",
      link: ""
    },
    linkedin: {
      imgSrc: "assets/images/linkedin_logo.png",
      link: "https://www.linkedin.com"
    }
  },
  showLinks: () => {
    let social = Object.values(navbar.socialLinks);
    for (let value of social) {
      $(".social-icons").append(`
              <div class="item-social">
                  <a href="${value.link}" target="_rel">
                  <img src="${value.imgSrc}" alt="">
                  </a>
                  <div class="item-social-text">
                  <div class="underscore"></div>
                  <span class="open">Open</span>
              </div>
            `);
    }
  }
};

Сначала я бы отделил метод showLinks от значений. Тогда нет необходимости сохранять imgSr c и ссылки в отдельных списках, просто используйте этот объект напрямую (если вы добавляете еще несколько свойств к объекту, вам не нужно создавать новый массив, и это более удобно для обслуживания).

Answer 3

Объекты не повторяемы, поэтому вы не можете использовать forEach напрямую, но вы можете использовать Object.keys(), чтобы получить массив ключей, а затем использовать эти ключи для изменения значений объекта:

 Object.keys(navbar.socialLinks).forEach(key => {
     navbar.socialLinks[key].imgSrc = 'new image src here';
     navbar.socialLinks[keys].link = 'new link here'
 })