JSON causes memory error - php

Question

I have two file. One is index.php and the other is display.php.
Index.php contains a form and after submitting, it generates a json value and displays that in a textarea, so I might edit before I press the "generate" button and it redirects me to the display.php where a for loop generates a html template according to the posted son data. It works perfectly with up to 3 item, but if I use 4 or more, it drops me a fatal error with memory limit. As I still got errors after increasing the limit, I tried the following on the display.php:
ini_set('memory_limit', '-1');
set_time_limit(0);
After this, it drops me an error 503 - service unavailable.
I don't know what to do, I am asking your help.
index.php:
<meta charset="utf-8">
<style>
pre, textarea { background-color:#31495D;min-height:300px;color:white;margin-bottom:50px;padding:25px;width:100%;display:block;border-bottom:5px solid #A058B3; }
.submit { padding:15px;background-color:green;color:white;border:none;font-size:12px;width:150px;margin:0 auto;margin-top:15px;margin-bottom:15px }
</style>
<?php
$json = json_encode($_POST, JSON_PRETTY_PRINT, JSON_UNESCAPED_UNICODE);
echo "
<h2>JSON for template</h2>
<form action='display.php' method='post'>
<textarea name='json'>$json</textarea>
<input class='submit' type='submit' value='Generate Template'>
</form>
";
$json = json_decode($json, true);
?>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="url[]" placeholder="http://www.example.com/"/><input type="text" name="name[]" placeholder="Name"/><input type="text" name="subtext[]" placeholder="Subtext"/><input type="text" name="image[]" placeholder="Image URL"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
<label>Title of Block <input type="text" name="title"></label><br>
<label>Heading of Block <input type="text" name="heading"></label><br><br>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="url[]" placeholder="http://www.example.com/"/><input type="text" name="name[]" placeholder="Name"/><input type="text" name="subtext[]" placeholder="Subtext"/><input type="text" name="image[]" placeholder="Image URL"/></div>
</div>
<br><br>
<input type="submit" value="Generate Code">
</form>
And the display.php
<?php
$json = json_decode($_POST['json'], true);
$c = count($json);
$i = 0;
$rows = 3;
$content = "<table>";
for($i=0; $i < count($json["name"]); $i++) {
$content .=
'<td width="226" valign="top" style="padding:5px;padding-bottom:20px;" class="m-stack m-pad-b">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:22px;padding-bottom:5px; mso-line-height-rule:exactly; line-height: 18px; padding-top: 8px;">
<a href="'.$json['url'][$i].'" target="_blank" style="text-decoration:none;color:#0896ff; display:block;">
'.$json['name'][$i].'<br><span style="color: #7d90a6; font-size: 14px;">'.$json['subtext'][$i].'</span>
</a>
</td>
</tr>
<tr>
<td background="'.$json['image'][$i].'" width="226" height="226" valign="top" style="background-size:cover; background-position:center center; border-radius:6px 6px 0 0;" class="m-ufi-bg">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:226px;height:226px;">
<v:fill type="frame" src="'.$json['image'][$i].'" color="#7bceeb" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
';
if($i == 3) { $content .= '</tr><tr>'; unset($i); $i == 0; }
}
echo "</table>";
echo $content;
This is just an experiment for me, any suggestion / critique is appreciated. Thanks in advance.

Answer 1

You are reseting $i to 0 so it never becomes greater than count($json) and your for loop becomes infinite