Loop through paragraphs in object. How?

Question

The following javascript object contains 2 paragraphs. I am having a hard time figuring out how to output them dynamically. Perhaps a loop? But the paragraphs are child objects with their own child properties. I need to access these in a row and append them to modal-section-body container.

Do feel free to suggest an object redesign.

            // Sample Modal Object
            var modalDefaults = {

              // depth 0
              modalId: 'modal6',
              
              // depth 0
              modalHeader: {
                icon: 'headerIcon',
                iconColor: 'headerIconColor',
                mainTitle: 'headerTitle',
                subTitle: 'headerSubTitle'
              },

              // depth 0  
              modalBody: {
                title: 'bodyTitle',
                abrv: 'bodyAbrv',
                subTitle: 'bodySubTitle',

                //depth 1
                paragraph1: {
                  //depth 2
                  title: 'Paragraph 1 Title',
                  body: 'Lorem ipsum dolor sit amet 1.'
                },

                //depth 1
                paragraph2: {
                  //depth 2
                  title: 'Paragraph 2 Title',
                  body: 'Lorem ipsum dolor sit amet 2.'
                }

              },

              // depth 0
              modalFooter: {

                  //depth 1
                linkOk: {
                  //depth 2
                  color: 'linkOkColor',
                  icon: 'linkOkIcon',
                  label: 'linkOkLabel',
                  href: './'
                },

                //depth 1
                linkCancel: {
                  //depth 2
                  color: 'linkCancelColor',
                  icon: 'linkCancelIcon',
                  label: 'linkCancelLabel',
                  href: './'
                }
              }
            };




            console.log(modalDefaults.modalId);

            console.log(modalDefaults.modalHeader.icon);
            console.log(modalDefaults.modalHeader.iconColor);
            console.log(modalDefaults.modalHeader.mainTitle);
            console.log(modalDefaults.modalHeader.subTitle);

            console.log(modalDefaults.modalBody.title);
            console.log(modalDefaults.modalBody.abrv);
            console.log(modalDefaults.modalBody.subTitle);

            console.log(modalDefaults.modalBody.paragraph1.title);
            console.log(modalDefaults.modalBody.paragraph1.body);

            console.log(modalDefaults.modalBody.paragraph2.title);
            console.log(modalDefaults.modalBody.paragraph2.body);

            console.log(modalDefaults.modalFooter.linkOk.color);
            console.log(modalDefaults.modalFooter.linkOk.icon);
            console.log(modalDefaults.modalFooter.linkOk.label);

            console.log(modalDefaults.modalFooter.linkCancel.color);
            console.log(modalDefaults.modalFooter.linkCancel.icon);
            console.log(modalDefaults.modalFooter.linkCancel.label);

Answer 1

You can do it like below:

let modalBody = modalDefaults.modalBody;
for (let [key, value] of Object.entries(modalBody)) {
    if (/paragraph(\d)/.test(key)) {
        $('.row').append($(document.createElement('h1')).text(value.title));
        $('.row').append($(document.createElement('p')).text(value.body));
    }
}

Online demo (jsFiddle)