Looping JSON in PHP via AJAX

Question

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!

Answer 1

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.