Nested repeater fields(ACF) not displaying like a table, why not?

[Isaac]

I’m trying to create a a menu with Advanced custom fields. But can’t seem to display the data like the tutorial. I thought it would at least show up in column somewhat like a table and then I could just add a border with coloring in css. Any suggestions would be greatly appreciated. Thanks!

Theme: Outreach Pro

This is the live site:

http://ogitsfresh.com/demo/

This is tutorial I’m basing it off of:

See 11:05 in video to see what I’m trying to achieve.

Here’s a broken down html version on codepen: http://codepen.io/isaac/pen/ZQdwBX

I would really like to see it display like in the tutorial. In a table like fashion.

Although I have included all the code for the template you probably just want to scroll down to the bottom and look at the code after the comment that says: "This is the part of the code that really needs attention:"

Thanks for helping!

<?php
/**
* This file adds a file for demo purposes eactly like the Home Page to the Outreach Pro Theme.
*
* @author StudioPress
* @package Outreach Pro
* @subpackage Customizations
*/

/*
Template Name: Demo
*/

add_action( ‘genesis_meta’, ‘outreach_home_genesis_meta’ );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function outreach_home_genesis_meta() {

if ( is_active_sidebar( ‘home-top’ ) || is_active_sidebar( ‘home-bottom’ ) ) {

//* Force full-width-content layout setting
add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );

//* Add outreach-pro-home body class
add_filter( ‘body_class’, ‘outreach_body_class’ );

//* Remove breadcrumbs
remove_action( ‘genesis_before_loop’, ‘genesis_do_breadcrumbs’ );

//* Add home top widgets
add_action( ‘genesis_loop’, ‘outreach_home_top_widgets’ );

//* Add home bottom widgets
add_action( ‘genesis_before_footer’, ‘outreach_home_bottom_widgets’, 1 );

}

}

function outreach_body_class( $classes ) {

$classes[] = 'outreach-pro-home';
return $classes;

}

function outreach_home_top_widgets() {

genesis_widget_area( 'home-top', array(
'before' => '<div>',
'after' => '</div>',
) );

}

function outreach_home_bottom_widgets() {

genesis_widget_area( 'home-bottom', array(
'before' => '<div><div>',
'after' => '</div></div>',
) );

}

//This is the part of the code that really needs attention:

remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
add_action( ‘genesis_loop’, ‘your_custom_loop’ );

function your_custom_loop() {

if(have_posts()) : while(have_posts()) : the_post();
/* The following code displays the Advanced Custom Fields */
//* Adds acf
echo '<div> ' . get_field('delivery_date') . ' </div>';
echo '<div> ' . get_field('order') . ' </div>';
echo '<div> ' . get_field('horizon') . ' </div>';
echo '<div> ' . get_field('now_available') . ' </div>';
endwhile;
endif;

// check if the repeater field has rows of data
if( have_rows(‘menu_sections’) ):
// loop through the rows of data
while ( have_rows(‘menu_sections’) ) : the_row();

 echo ‘<h4>’ . the_sub_field(‘section_title’) . ‘</h4>’;
if (have_rows(‘section_items’)):
// display a sub field value

echo ‘<table>’;
echo ‘<thead>’;
echo ‘<tr>’;
echo ‘<td>Vegetables and Fruit</td>’;
echo ‘<td>Grower</td>’;
echo ‘<td>Price</td>’;
echo ‘</tr>’;
echo ‘</thead>’;

while ( have_rows(‘section_items’) ): the_row();
echo ‘<tr>’;
echo ‘<td>’ . the_sub_field(‘dish_name’) . ‘</td>’;
echo ‘<td>’ . the_sub_field(‘dish_description’) . ‘</td>’;
echo ‘<td>’ . the_sub_field(‘dish_price’) . ‘</td>’;
echo ‘</tr>’;
endwhile;
echo ‘</table>’;
endif;

endwhile;

endif;

}

genesis();

http://ogitsfresh.com/demo/

[coralseait]

Hello,

This is a bit tough to follow, as I can't watch the video right now ...

But, are you saying you have a repeater in a repeater and you're having trouble accessing its data?

We use ACF quite a bit, and generally stay away from the have_rows, sub_filed type things. ACF returns them back as arrays anyway so using a simple foreach on the repeater, and if necessary another one the sub repeater works great.

In general, you have a key problem on which field the_sub_field is trying to get. If you like I can show you a stub on how do this with foreachs which although at first glance may seem more complex, will help teach you how ACF stores and returns data, and how to manipulate repeaters? Most of the time we are doing are more complex stuff with our repeaters and ACF, so we hardly use the_field, or the_sub_field.

---

Coral Sea IT

[Isaac]

Coral Sea IT,

Yes, please, I would love to see your solution to solving this in a on a stub.

Thanks

Isaac

[coralseait]

Here you go; note this is NOT exactly written to be efficient or production code, but as teaching aid so you may learn how ACF works in the guts and unlocking its full potential.

/*** Nested Repeater Testing ***/

    // The purpose of this is to illustrate how to retrieve, manipulate and
    // display somewhat more complex ACF structures. ACF is very powerful
    // and a key to unlocking this is understanding how ACF stores and returns
    // data

    // Note, we wouldn't necessarily write like this for production, but it is
    // split up here to make clear what's going on and to really keep HTML vs code
    // clear

    // assumptions:
    // ACF field group
    // ACF field: test_outer_repeater | repeater  <-- this is your 'main repeater'
    // ACF repeater sub field: test_item | text
    // ACF repeater sub field: test_inner_repeater | repeater  <-- this is your nested repeater
    
    // ACF Field: test_inner_repeater | repeater
    // ACF repeater sub field: test_title | text
    // ACF repeater sub field: test_cost | number

    // The output below will create a table for the outer repeater
    // and nest the inner repeater in a table of it's own
    // you can output however you like, but if you create the field
    // group as above and use the below it should be clear how
    // everything works - then you can mod display as you like

    // Begin HTML Markup for outer repeater table
    echo '<table>';
    echo '<thead>';
    echo '<tr>';
    echo '<th>test_item</th>';
    echo '<th>test_inner_repeater</th>';
    echo '</tr>';
    echo '</thead>';
    echo '<tbody>';

    // First we get the outer repeater field
    $outer_repeater = get_field('test_outer_repeater');

    // This will display the array that ACF returns for the entire outer repeater
    // ACF returns the whole repeater as an array of arrays
    /*
        echo '<pre>';
        var_dump( $outer_repeater);
        echo '</pre>';
    */

    // Here we iterate through every "row" in the outer repeater
    // Basically ACF is returning an Array of Arrays (which may even contain Arrays themselves)
    // Understanding this is key to using ACF effectively and allows very complex solutions
    foreach( $outer_repeater as $outer_repeater_item) {

        // This will display the arrays that ACF returns for each "row" of the outer repeater
        // This way you can see what your array keys and values are for debugging
        /*
            echo '<pre>';
            var_dump( $outer_repeater_item);
            echo '</pre>';
        */

        // This is a sub field in the outer repeater called test_item
        // Notice how we access it via the outer repeater row array and key
        $outer_repeater_sub_field = $outer_repeater_item['test_item'];

        // Here we are now accessing the inner repeater sub field, notice ACF returns it as an
        // array so we use the name of the inner repeater as the array key
        $inner_repeater = $outer_repeater_item['test_inner_repeater'];

        // Begin HTML row markup for outer repeater
        echo '<tr>';
        echo '<td>' . $outer_repeater_sub_field . '</td>';

        // The cell which will contain our nested repeater's nested table markup
        echo '<td>';

        // Now we can iterate through the inner repeater rows
        // Again, this could come back as an Array of Arrays etc
        foreach( $inner_repeater as $inner_repeater_item) {

            // This will display the arrays that ACF returns for each "row" of the inner repeater
            // This way you can see what your array keys and values are for debugging
            /*
                echo '<pre>';
                var_dump( $inner_repeater_item);
                echo '</pre>';
            */

            // Here the inner repeater has a text field called test_title
            $inner_repeater_title = $inner_repeater_item['test_title'];

            // Here the inner repeater has a number field called test cost
            $inner_repeater_cost = $inner_repeater_item['test_cost'];

            // Begin HTML markup for inner repeater
            // Note, you don't have to do a nested table, can do whatever you want
            // but I've left this a nested table so it is pretty clear what is returned
            echo '<table>';
            echo '<thead>';
            echo '<tr>';
            echo '<th>test_title</th>';
            echo '<th>test_cost</th>';
            echo '</tr>';
            echo '<tbody>';
            echo '<tr>';

            // Output inner repeater data cells
            echo '<td>' . $inner_repeater_title . '</td>';
            echo '<td>' . $inner_repeater_cost . '</td>';

            // End HTML markup for inner repeater
            echo '</tr>';
            echo '</tbody>';
            echo '</table>';

        }
        // End cell contianing the nested repeater
        echo '</td>';

        // End HTML row markup for outer repeater
        echo '</tr>';

    }

    // End HTML markup for outer repeater
    echo '</tbody>';
    echo '</table>';

/*** End Nested Repeater Testing ***/

---

Coral Sea IT

[Author]

Posts