How to return array through a for loop?

Issue

I'm trying to get an array to split so I can use the data as an anchor href tag. I can get the arrays to log in the console, but every menu-link href is linking to #News.

Here is my code:

$(document).ready(function(){

    if($('.newsletter-accordion').find('.headline_title').length > 0) {

        var all = $(".headline_title").map(function() {
            return this.innerHTML;
        });

        console.log(all);

        for(var i = 0; i < all.length; i++) {
    
            $('.headline_title').contents().unwrap().appendTo($('#newsletter-nav ul')).wrap('<li><a class="menu-link" href="#' + all[i] + '" ></a></li>');
            console.log(all[i])
          }
    }

});

I'm appending the data to an id of newsletter nav to be used as a navigation throughout the page. I'm not sure if I'm calling it correctly with the + all[i]?

Any help would be appreciated.

Update:

my json console log.

{"0":"News","1":"Gallery Title","2":"tyest","length":3,"prevObject":{"0":{},"1":{},"2":{},"length":3,"prevObject":{"0":{"location":{"ancestorOrigins":{},"href":"https://croydon.vm/newsletters/4th-march-2022/#News","origin":"https://croydon.vm","protocol":"https:","host":"croydon.vm","hostname":"croydon.vm","port":"","pathname":"/newsletters/4th-march-2022/","search":"","hash":"#News"},"jQuery32100224421490645290161":{"events":{"webkitvisibilitychange":[{"type":"webkitvisibilitychange","origType":"webkitvisibilitychange","guid":11,"namespace":""}],"ready":[{"type":"ready","origType":"ready","guid":7,"namespace":"slick.slick-0"}],"click":[{"type":"click","origType":"click","guid":16,"selector":".accordion-btn","needsContext":false,"namespace":""}]},"focusout":1,"focusin":1},"jQuery360044517605261132511":{"events":{"ajaxSuccess":[{"type":"ajaxSuccess","origType":"ajaxSuccess","guid":1428,"namespace":""}],"touchstart":[{"type":"touchstart","origType":"touchstart","guid":1434,"selector":".qm-resizer","needsContext":false,"namespace":""}],"mousedown":[{"type":"mousedown","origType":"mousedown","guid":1434,"selector":".qm-resizer","needsContext":false,"namespace":""}]}}},"length":1}}}

im using flexible content also so this is one of the blocks of html

<section class="newsletter-accordion">

    <?php
      $headline = get_sub_field('section_headline');
    ?>

    <h1 class="headline_title" id="<?php echo $headline; ?>"><?php echo $headline; ?></h1>
    <h1 class="" id="<?php echo $headline; ?>"><?php echo $headline; ?></h1>

    <div class="grid_container">
        <div class="row single_content__wrapper justify-content-center ">

it's calling the h1 headline title, this headline title appears on other blocks also.

Solution

The first time your for loop runs, the .contents().unwrap()...etc code grabs all the items with the "headline_title" class and moves them into the nav, wrapping them in a link. But of course in each one the link you're creating to wrap around each element it's moved uses the the first item from all, which is "News".

Next time the loop iterates, there's nothing left for .contents() to grab anymore, so nothing happens.

Instead, since .wrap() gives us the option to use a callback function, whose this context variable represents the current element in the matched set, we can dispense with all and the loop entirely:

$('.headline_title').contents().unwrap().appendTo($('#newsletter-nav ul')).wrap(function() {
  return '<li><a class="menu-link" href="#' + $(this).text() + '" ></a></li>';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="headline_title">News</h1>
<h1 class="headline_title">Gallery Title</h1>
<h1 class="headline_title">tyest</h1>

<div id="newsletter-nav">
  <ul>
  </ul>
</div>

Documentation: https://api.jquery.com/wrap/

Answered By - ADyson