通过AJAX在PHP中循环JSON

I'm working on pulling data via JSON, looping and ajax-ing the result. It seems to be alternating the data and not posting it properly. Any help?

php:

<?php
$url = "../json/work.json";
$contents = file_get_contents($url);
$work = json_decode($contents, true);
$count = 1;
if(isset($work))
{
    foreach ($work as $value) {
        foreach ($value as $number => $name) {
            foreach ($name as $key => $items) {
                foreach ($items as $src => $info) {
                    // echo "{$info['title']}<br>{$info['xsm']}<br>{$info['info']}"
                     echo '<li>
                        <div data-alt="img-' . $count . '" data-description="<h3>' . $info['title'] . ' <br> ' . $info['info'] .  '</h3>"" data-max-width="1800" data-max-height="2400">
                            <div data-src="' . $info['xsm'] . '" data-min-width="1300"></div>
                            <div data-src="' . $info['sm'] . '" data-min-width="1000"></div>
                            <div data-src="' . $info['md'] . '" data-min-width="700"></div>
                            <div data-src="' . $info['lg'] . '" data-min-width="300"></div>
                            <div data-src="' . $info['xlg'] . '" data-min-width="200"></div>
                            <div data-src="' . $info['xxlg'] . '" data-min-width="140"></div>
                            <div data-src="' . $info['xxxlg'] . '"></div>
                            <noscript>
                                <img src="assets/img/bg/black.jpg" alt="img-' . $count . '"/>
                            </noscript>
                        </div>
                    </li>';
                    $count++;
                }
            }
        }
    }
}else {
    echo "no fucking json works";
}

?>

JSON:

{
"work": [{
    "nameOfArt": [{
        "title": "Example"
    }, {
        "xsm": "assets/img/work/xs/back.jpg"
    }, {
        "sm": "assets/img/work/sm/back.jpg"
    }, {
        "md": "assets/img/work/md/back.jpg"
    }, {
        "lg": "assets/img/work/lg/back.jpg"
    }, {
        "xlg": "assets/img/work/xlg/back.jpg"
    }, {
        "xxlg": "assets/img/work/xxlg/back.jpg"
    }, {
        "xxxlg": "assets/img/work/xxxlg/back.jpg"
    }, {
        "info": "This is a description"
    }]
}]

}

AJAX:

    $.ajax({
    type: "GET",
    url: "assets/php/pull.php",
    cache: true,
    success: function(html) {
        $(".gamma-gallery").html(html);
        console.log(html);
    }
});

Result:

<div data-alt="img-1" data-description="<h3>Example <br> </h3>"" data-max-width="1800" data-max-height="2400">
                            <div data-src="" data-min-width="1300"></div>
                            <div data-src="" data-min-width="1000"></div>
                            <div data-src="" data-min-width="700"></div>
                            <div data-src="" data-min-width="300"></div>
                            <div data-src="" data-min-width="200"></div>
                            <div data-src="" data-min-width="140"></div>
                            <div data-src=""></div>
                            <noscript>
                                <img src="assets/img/bg/black.jpg" alt="img-1"/>
                            </noscript>
                        </div>
                    </li><li>
                        <div data-alt="img-2" data-description="<h3> <br> </h3>"" data-max-width="1800" data-max-height="2400">
                            <div data-src="assets/img/work/xs/back.jpg" data-min-width="1300"></div>
                            <div data-src="" data-min-width="1000"></div>
                            <div data-src="" data-min-width="700"></div>
                            <div data-src="" data-min-width="300"></div>
                            <div data-src="" data-min-width="200"></div>
                            <div data-src="" data-min-width="140"></div>
                            <div data-src=""></div>
                            <noscript>
                                <img src="assets/img/bg/black.jpg" alt="img-2"/>
                            </noscript>
                        </div>
                    </li>

For some reason it returns the correct values but alternates, either I'm too tired to think this through or something is wrong. Thanks for the help!

The problem lies in that $info variable. It contains only one element and not the whole array. In first iteration $info only has

array(1) {
  ["title"]=>
  string(7) "Example"
}

in it. I think you should not have array in the item but only JSON so it would look like this:

{
"work": [{
    "nameOfArt": {
        "title": "Example",
        "xsm": "assets/img/work/xs/back.jpg",
        "sm": "assets/img/work/sm/back.jpg",
        "md": "assets/img/work/md/back.jpg",
        "lg": "assets/img/work/lg/back.jpg",
        "xlg": "assets/img/work/xlg/back.jpg",
        "xxlg": "assets/img/work/xxlg/back.jpg",
        "xxxlg": "assets/img/work/xxxlg/back.jpg",
        "info": "This is a description"
    }
}]
}

In this case you do not need the last foreach because in $items variable you would have:

array(9) {
  ["title"]=>
  string(7) "Example"
  ["xsm"]=>
  string(27) "assets/img/work/xs/back.jpg"
  ["sm"]=>
  string(27) "assets/img/work/sm/back.jpg"
  ["md"]=>
  string(27) "assets/img/work/md/back.jpg"
  ["lg"]=>
  string(27) "assets/img/work/lg/back.jpg"
  ["xlg"]=>
  string(28) "assets/img/work/xlg/back.jpg"
  ["xxlg"]=>
  string(29) "assets/img/work/xxlg/back.jpg"
  ["xxxlg"]=>
  string(30) "assets/img/work/xxxlg/back.jpg"
  ["info"]=>
  string(21) "This is a description"
}

With this you can access the info you need with the way you wanted.