List with exceptions-CodePudding

I have created a table from a list element in my HTML with JavaScript, and it works really well, but not all my documents have citations to fetch. How can I make it that the code only runs if there is an ELEMENT element found.

The code has to be that if this part isn't found nothing happens and the function continues. So if there is no ELEMENT1 in the document it will still look for ELEMENT2. Atm it gives me an error and stopps after it cant find ELEMENT1.

const ELEMENT =  Array.from(document.getElementById('ID').getElementsByTagName('li'));

Full code for the table

function myFunction{

            const ELEMENT1 =  Array.from(document.getElementById('ID').getElementsByTagName('li'));
            const nonPatCit_tbody = document.querySelector('#table tbody');

            ELEMENT1 .forEach(
                (ELEMENT1 ) => {
                    // a table row for each element 
                    const tr = nonPatCit_tbody.appendChild(document.createElement('tr'));
                   
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = Array.from(nonPatCit.querySelectorAll('name'))
                            .map((name) => name.textContent)
                            .join(', ');
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('atl')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('sertitle')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('sdate')?.textContent || '';
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('vid')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('ino')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('ppf')?.textContent || '';
                    
                    // multiple authors, map nodes to strings and join them
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = Array.from(nonPatCit.querySelectorAll('crossref'))
                            .map((crossref) => crossref.textContent)
                            .join(', ');
                }
            )

  const ELEMENT2 =  Array.from(document.getElementById('ID').getElementsByTagName('li'));
            const nonPatCit_tbody2 = document.querySelector('#table tbody');

            ELEMENT2 .forEach(
                (ELEMENT2 ) => {
                    // a table row for each element 
                    const tr = nonPatCit_tbody2.appendChild(document.createElement('tr'));
                   
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = Array.from(ELEMENT2.querySelectorAll('name'))
                            .map((name) => name.textContent)
                            .join(', ');
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('atl')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('sertitle')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('sdate')?.textContent || '';
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('vid')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('ino')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('ppf')?.textContent || '';
                    
                    // multiple authors, map nodes to strings and join them
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = Array.from(ELEMENT2 .querySelectorAll('crossref'))
                            .map((crossref) => crossref.textContent)
                            .join(', ');
                }
            )
}

CodePudding user response：

If no element were found, the empty array is returned and stored in ELEMENT, which the forEach method simply ignores:

const ELEMENT = Array.from(document.getElementById('ID')?.getElementsByTagName('li') ?? Array())

Of course, I also prefer to use plural nouns to define collections — e.g., ELEMENTS instead of ELEMENT.