how to store html string in php variable using a foreach loop

Question

I'm new to php. This is in relation to wordpress and I'm terribly confused.

Basically, I am passing an array of names from another file (via ajax and json) and into a php function. This function will loop through each name and generate html code to display to the page with an image. I would like to store this htmlcode as a string into a variable to be used in another part of my app (specifically to append it to a post to update in real time, but that's a separate issue).

My ajax response is showing the result I want, just not stored in a string. It is also saying the path to my images can't be found despite the path being correct. It seems like I'm either concatenating something wrong or putting quotes in the wrong place, or something else. I want to store all the html generated in $html_string (which I know won't load my app correctly as I'm displaying the code here, it was just the last thing I've tried so I left it in there).

My code:

<?php

add_action('wp_ajax_nopriv_test_function', 'test_function');
add_action('wp_ajax_test_function', 'test_function');

function test_function() {
  if ( isset($_POST) ) {

        $nameData = $_POST['nameData'];


        //Strip any double escapes then use json_decode to create an array.
        $nameDecode =  json_decode(str_replace('\\', '', $_POST['nameData']));

        // Anything outputted will be returned in the response
        foreach ($nameDecode as $key => $name) {
        $html_string .=  ?>  <img src="<?php bloginfo('template_directory');?>/images/baseball/team0.jpg"> <p> <?php echo $name  ?> <p /> '
      <?php ' }
        echo json_encode($html_string);

        // print_r($html_string);

    }
  die();
}  ?>

Current output:

ajax success!           <img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> Eleanora <p />
                <img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> Eleanora <p />
                <img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />
                <img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />
                <img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />
      null
card-store.local/:1 GET http://card-store.local/%22http:/card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg/ 404 (Not Found)

Desired output:

$html_string = '<img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> Eleanora <p />
                <img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> Eleanora <p />
                <img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />
                <img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />
                <img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />';

How can I achieve this?

Answer 1

This is how concatenation with multi variables in php works

$html_string .= '<img src="'.bloginfo('template_directory').'"/images/baseurl/team0.jpg <p>'.$name.'</p>';

This may help you

php concatenation

Answer 2

You can try this

 foreach ($nameDecode as $key => $name) {
            $html_string .= '<img src="'.bloginfo('template_directory').'"/images/baseball/team0.jpg"> <p>'.$name.' <p />';
        }