6

I'm attempting to use Walmart API to display some information about a product.

The API returns a json object which I converted to a regular array and am simply using echo to show this data.

The problem is, when I get to the longDescription variable from the API, it contains HTML - which is fine, but it is not being rendered, instead it is displaying it all as plain text. Here is my code:

echo "<p id='longDescription'>";
    echo $obj['longDescription'];
echo "</p>";

This is what is contained in the $obj['longDescription'] variable:

<br><b>HP 15-ay039wm 15.6" Laptop:</b><br><br><b>Key Features and Benefits:</b>
<ul>
    <li>15.6" Display<br>HD (1366 x 768) SVA Brightview WLED-backlit Display<br><br></li>
    <li>Intel Core i3-6100U Dual-Core Processor<br>2.3GHz<br><br></li>
    <li>8GB system memory<br>Gives you the power to handle most power-hungry applications and tons of multimedia work<br><br></li>
    <li>1TB Hard Drive<br>Store 666,000 photos, 285,000 songs or 526 hours of HD video and more<br><br></li>
    <li>6 hours of battery life<br>Long-lasting battery life gives you plenty of access to your photos, videos, music and documents<br><br></li>
    <li>Intel HD Graphics 520<br>With up to 4169MB of graphics memory<br><br></li>
    <li>Weight: 4.73 lbs<br>Thin design you can easily take on the road<br><br></li>
    <li>SuperMulti DVD burner<br>Watch movies and read and write CDs and DVDs in multiple formats<br><br></li>
    <li>10/100 Base-T Ethernet, 802.11ac Wireless LAN<br>Connect to a broadband modem with wired Ethernet or wirelessly connect to a WiFi signal or hotspot with the 802.11ac connection built into your PC</li>
</ul>
<br><b>Additional Features:</b>
<ul>
    <li>HP TrueVision HD Webcam</li>
    <li>Multi-Format Digital memory card reader</li>
    <li>Bluetooth</li>
    <li>1 x USB 3.0 port, 2 x USB 2.0 ports, 1 x HDMI out port, 1 x audio out/in jack, 1 x RJ-45 Ethernet port</li>
    <li>3-cell lithium-ion battery</li>
    <li>Dimensions: 0.95" x 15.12" x 10.02"</li>
    <li>Color: Silver</li>
</ul>
<br><b>Software:</b>
<ul>
    <li>Genuine Microsoft Windows 10</li>
    <li>McAfee LiveSafe (30-day trial)</li>
    <li>Backup and Restore options built into Windows allow you to create safety copies of your most important personal files, so you're always prepared for the worst</li>
</ul>
<br><b>Support and Warranty:</b>
<ul>
    <li>1-year limited hardware warranty; 24/7 technical assistance available online or toll-free by phone</li>
    <li>Restore discs are not included (unless specified by supplier). We recommend you use the installed software to create your own restore and backup DVD the first week you use the computer.</li>
</ul>
<br><b>What's In The Box:</b>
<ul>
    <li>Power cord and AC adapter</li>
    <li>3-cell battery</li>
    <li>Quick Start Guide</li>
</ul>
<br><b><i>To see the manufacturer's specifications for this product, click <a href="http://i.walmart.com/i/rb/0088989980651.pdf" target="_blank">here</a>.<br><br>To see a list of our PC Accessories, click <a href="http://www.walmart.com/cp/accessories-peripherals/132959" target="_blank">here</a>.<br><br>Trade in your used computer and electronics for more cash to spend at Walmart. Good for your wallet and the environment - click <a href="http://gazelle.com/register_click?campaign=electronics_trade_in&media_type=text&network=walmart&destination_url=http%3A%2F%2Fwalmart.gazelle.com&placement=product_computers&creative=learn_more" target="_blank">here</a>.</i></b><br><br><b>ENERGY STAR<sup>®</sup></b><br>Products that are ENERGY STAR-qualified prevent greenhouse gas emissions by meeting strict energy efficiency guidelines set by the U.S. Environmental Protection Agency and the U.S. Department of Energy. The ENERGY STAR name and marks are registered marks owned by the U.S. government, as part of their energy efficiency and environmental activities.

I'm not really sure where to begin with this or what to do, I have never had this problem before.

How can I output this variable as rendered HTML?

10
  • Yes, it is. Only the variable isn't being rendered, when I inspect element the entire variable is wrapped in quotes, but everything else is fine Jul 17, 2017 at 14:58
  • Try inserting this php var longDescription in a div, not in a <p>.
    – Roy Bogado
    Jul 17, 2017 at 14:58
  • 1
    @Roy Same problem when it's in a div Jul 17, 2017 at 14:59
  • try echo htmlentities($obj['longDescription']); OR html_entity_decode
    – Roy Bogado
    Jul 17, 2017 at 15:02
  • @Roy html_entity_decode seems to have worked :) Jul 17, 2017 at 15:03

3 Answers 3

8

Try using html_entity_decode()
Convert all HTML entities to their applicable characters

More precisely, this function decodes all the entities (including all numeric entities) that
a) are necessarily valid for the chosen document type — i.e., for XML, this function does not decode named entities that might be defined in some DTD — and
b) whose character or characters are in the coded character set associated with the chosen encoding and are permitted in the chosen document type. All other entities are left as is.

4

The output is probably being rendered with

&lt;

which outputs "<". This is most likely your problem.

You can use the php function

htmlspecialchars_decode()

Hopefully this helps :)

4
  • It wasn't being rendered with encoded entities, it was being displayed with the tags, like a string. It wasn't rendering at all except plaintext. However, using html_entity_decode fixed it, so your solution probably would too. Jul 17, 2017 at 15:15
  • Yes, as you said it does render like a string, but the code that is being sent to your pc is "&lt;" instead of "<". This causes it to be displayed on the screen has a lower then instead of use as a tag in html. This is the explanation why html_entity_decode and htmlspecialchars_decode is working as it converts the lower than bracket to a usable tag for HTML.
    – Firelumet
    Jul 17, 2017 at 15:22
  • But on inspect element, it displays with the tags, not as encoded entities - maybe thats an inspect element thing Jul 17, 2017 at 15:23
  • No, it just shows the tag as text, as if it was the text to be displayed.
    – Firelumet
    Jul 17, 2017 at 17:45
0

In order to render html you muct have to decode it.

Here i mention few fuctions to decode it.

  1. wp_specialchars_decode() if you are using WordPres.
  2. htmlspecialchars_decode() Normal PHP funcion.
  3. html_entity_decode() also, Normal PHP function.

Solution:

<?php 
     // This work for me:
     echo wp_specialchars_decode($your_html_code, ENT_QUOTES);

     // try this if above code doesn't work
     // echo htmlspecialchars_decode($your_html_code);
     // try this if above code doesn't work
     // echo html_entity_decode($your_html_code, ENT_HTML5);
?>

The rest of the two functions inspired by @Roy Bogado and @Firelumet's answer.

2
  • I don't think that this whole extra answer is necessary just to include the echo at the beginning. It should have just been a comment. Apr 21, 2021 at 11:31
  • @GrumpyCrouton I update my answer now this may help you and others. Apr 26, 2021 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.