I have to fetch data using a REST Api, and my response is in json. After decoding the response is in an array I have to display it in a webpage such that each of the responses in the array get displayed in a specific display format (Just Like tweets in twitter are displayed in a specific box type format).How to loop through the array in php and display it ? The only solution I find is embedding the HTML in php using echo which I did but it is not working .And the debugger isn't helping much. What am I missing ?
Please advise what to do.
Here is my code:
echo "<div class="tweet original-tweet js-stream-tweet js-actionable-tweet js-profile- popup-actionable js-original-tweet my-tweet" data-tweet-id="515380319977893890"data-item-id="515380319977893890" data-name="" data-user-id="2665607941" data-expanded-footer="<div class="js-tweet-details-fixer tweet-details-fixer"> <div class="entities-media-container js-media-container" style="min-height:0px"> </div> <div class="js-machine-translated-tweet-container"></div> <div class="js-tweet-stats-container tweet-stats-container "> </div> <div class="client-and-actions"> <span class="metadata"> <span>11:00 PM - 25 Sep 2014</span> &middot; <a class="permalink-link js-permalink js-nav" href="/status/515380319977893890" tabindex="-1">Details</a> </span> </div> </div> " data-you-follow="false"data-you-block="false">" ;
echo "<div class="content">" ;
echo "<div class="stream-item-header">" ;
echo "<a class="account-group js-account-group js-action-profile js-user-profile-link js-nav" data-user-id="2665607941">
<img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/506790785572814848/vdj_UAuZ_bigger.jpeg" alt="">
<strong class="fullname js-action-profile-name show-popup-with-id" data-aria-label-part> </strong>
<span>‏</span><span class="username js-action-profile-name" data-aria-label-part><s></s><b> </b></span>
</a>" ;
echo "<small class="time">
<a class="tweet-timestamp js-permalink js-nav js-tooltip" title="11:00 PM - 25 Sep 2014" ><span class="_timestamp js-short-timestamp "
data-aria-label-part="last" data-time="1411711218" data-time-ms="1411711218000" data-long-form="true">Sep 25</span></a>
</small>" ;
echo"</div>";
echo "<p class="js-tweet-text tweet-text" lang="en" data-aria-label-part="0"> </p>" ;
echo "<div class="stream-item-footer">";
echo "<ul class="tweet-actions js-actions">";
echo "<li class="more-tweet-actions">";
echo "<div class="action-more-container">";
echo "<div class="dropdown">";
echo "<button type="button" class="btn-link with-icn dropdown-toggle js-dropdown-toggle js-tooltip">";
echo "<span class="Icon Icon--delete"></span>";
echo "<b>Delete</b>";
echo "</button>";
echo "<div class="dropdown-menu">";
echo "<div class="dropdown-caret">";
echo "<div class="caret-outer"></div>";
echo "<div class="caret-inner"></div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</li>";
echo "</ul>";
echo "</div>";
echo "</div>";
echo "</div>";
After Scott's answer I changed my code , but still it is not working and I am not getting it.
echo "<div class=\"tweet original-tweet js-stream-tweet js-actionable-tweet js-profile-popup-actionable js-original-tweet
my-tweet\" data-tweet-id="515380319977893890\"data-item-id=\"515380319977893890\" data-name=\"\" data-user-id=\"2665607941\" data-expanded-footer=\"<div class="js-tweet-details-fixer tweet-details-fixer"> <div class="entities-media-container js-media-container" style="min-height:0px"> </div> <div class="js-machine-translated-tweet-container"></div> <div class="js-tweet-stats-container tweet-stats-container "> </div> <div class="client-and-actions"> <span class="metadata"> <span>11:00 PM - 25 Sep 2014</span> · <a class="permalink-link js-permalink js-nav" href="/status/515380319977893890" tabindex="-1">Details</a> </span> </div> </div> " data-you-follow=\"false\"data-you-block=\"false\">" ;
echo "" ;
echo "<div class=\"stream-item-header\">" ;
echo "<a class=\"account-group js-account-group js-action-profile js-user-profile-link js-nav\" data-user-id=\"2665607941\
">
<img class=\"avatar js-action-profile-avatar\" src=\"https://pbs.twimg.com/profile_images/506790785572814848/vdj_UAuZ_bigger.jpeg\" alt=\"\">
<strong class=\"fullname js-action-profile-name show-popup-with-id\" data-aria-label-part> </strong>
<span>‏</span><span class=\"username js-action-profile-name\" data-aria-label-part><s></s><b> </b></span>
</a>" ;
echo "<small class=\"time\">
<a class=\"tweet-timestamp js-permalink js-nav js-tooltip\" title=\"11:00 PM - 25 Sep 2014\" ><span class=\"_timestamp js-short-timestamp \"
data-aria-label-part=\"last\" data-time=\"1411711218\" data-time-ms=\"1411711218000\" data-long-form=\"true\">Sep 25</span></a>
</small>" ;
echo"</div>";
echo "<p class=\"js-tweet-text tweet-text\" lang=\"en\" data-aria-label-part=\"0\"> </p>" ;
echo "<div class=\"stream-item-footer\">";
echo "<ul class=\"tweet-actions js-actions">";
echo "<li class=\"more-tweet-actions\">";
echo "<div class=\"action-more-container\">";
echo "<div class=\"dropdown\">";
echo "<button type=\"button" class=\"btn-link with-icn dropdown-toggle js-dropdown-toggle js-tooltip\">";
echo "<span class=\"Icon Icon--delete\"></span>";
echo "<b>Delete</b>";
echo "</button>";
echo "<div class=\"dropdown-menu\">";
echo "<div class=\"dropdown-caret\">";
echo "<div class=\"caret-outer\"></div>";
echo "<div class=\"caret-inner\"></div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</li>";
echo "</ul>";
echo "</div>";
echo "</div>";
echo "</div>";
Check your single and double quotes. The strings are being returned are being truncated. This is invalid:
echo "<div class="stream-item-header">" ;
Change it to:
echo "<div class=\"stream-item-header\">" ;
Or:
echo "<div class='stream-item-header'>" ;
And repeat this fix for each of your echo lines.
For example, this:
echo "<div class="tweet original-tweet js-stream-tweet js-actionable-tweet js-profile- popup-actionable js-original-tweet my-tweet" data-tweet-id="515380319977893890"data-item-id="515380319977893890" data-name="" data-user-id="2665607941" data-expanded-footer="<div class="js-tweet-details-fixer tweet-details-fixer"> <div class="entities-media-container js-media-container" style="min-height:0px"> </div> <div class="js-machine-translated-tweet-container"></div> <div class="js-tweet-stats-container tweet-stats-container "> </div> <div class="client-and-actions"> <span class="metadata"> <span>11:00 PM - 25 Sep 2014</span> &middot; <a class="permalink-link js-permalink js-nav" href="/status/515380319977893890" tabindex="-1">Details</a> </span> </div> </div> " data-you-follow="false"data-you-block="false">" ;
Becomes this:
echo "<div class=\"tweet original-tweet js-stream-tweet js-actionable-tweet js-profile- popup-actionable js-original-tweet my-tweet\" data-tweet-id=\"515380319977893890\" data-item-id=\"515380319977893890\" data-name=\"\" data-user-id=\"2665607941\" data-expanded-footer=\"<div class="js-tweet-details-fixer tweet-details-fixer"> <div class="entities-media-container js-media-container" style="min-height:0px"> </div> <div class="js-machine-translated-tweet-container"></div> <div class="js-tweet-stats-container tweet-stats-container "> </div> <div class="client-and-actions"> <span class="metadata"> <span>11:00 PM - 25 Sep 2014</span> &middot; <a class="permalink-link js-permalink js-nav" href="/status/515380319977893890" tabindex="-1">Details</a> </span> </div> </div> \" data-you-follow=\"false\" data-you-block=\"false\">" ;
For a more advanced trick, you can move your entire HTML to a separate file, an HTML template if you will. Then read in the file contents via PHP and find/replace the variables or dynamic parts as you need. This may be beyond the scope of your question however.
the quotes inside the echo need to be escaped:
echo "<div class=\"stream-item-footer\">";
Escape the quotes with \
echo "<div class=\"content\">" ;
Works for me:
echo '<div class="content">';
echo '<div class="stream-item-header">';
echo '<a class="account-group js-account-group js-action-profile js-user-profile-link js-nav" data-user-id="2665607941">
<img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/506790785572814848/vdj_UAuZ_bigger.jpeg" alt="">
<strong class="fullname js-action-profile-name show-popup-with-id" data-aria-label-part> </strong>
<span>‏</span><span class="username js-action-profile-name" data-aria-label-part><s></s><b> </b></span>
</a>';
echo '<small class="time">
<a class="tweet-timestamp js-permalink js-nav js-tooltip" title="11:00 PM - 25 Sep 2014" ><span class="_timestamp js-short-timestamp "
data-aria-label-part="last" data-time="1411711218" data-time-ms="1411711218000" data-long-form="true">Sep 25</span></a>
</small>';
echo '</div>';
echo '<p class="js-tweet-text tweet-text" lang="en" data-aria-label-part="0"> </p>';
echo '<div class="stream-item-footer">';
echo '<ul class="tweet-actions js-actions">';
echo '<li class="more-tweet-actions">';
echo '<div class="action-more-container">';
echo '<div class="dropdown">';
echo '<button type="button" class="btn-link with-icn dropdown-toggle js-dropdown-toggle js-tooltip">';
echo '<span class="Icon Icon--delete"></span>';
echo '<b>Delete</b>';
echo '</button>';
echo '<div class="dropdown-menu">';
echo '<div class="dropdown-caret">';
echo '<div class="caret-outer"></div>';
echo '<div class="caret-inner"></div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</li>';
echo '</ul>';
echo '</div>';
echo '</div>';
echo '</div>';
I'l write here my response dude, and hope i'm helping you. But there's nothing new, as Scott say, you missed a lot of double quote and IMHO you're a crazy boy doing it manually (in good sense).
Take you're JSON array and use the function i've linked in the comment in a way like this(hoping you have a similar situation, in other case is the same but you have to complex the code, maybe):
....
for($i=0; $i<sizeof($jsonarray); $i++){
echo addslashes($jsonarray[$i]);
}
....
In this way all of your code it's escaped, and if the error persist it means that's the problem is elsewhere