CODEWITHSUNDEEP
phpjavascripthtmljson
Timmer1992
Timmer1992

Reputation: 31

How to output JSON array in HTML

I use ECWID for my website store and am wanting to create some code, to do that i have to do some JSON requests and i have never worked with JSON. When i type the following into my address bar: http://app.ecwid.com/api/v1/STOREID/product?id=PRODUCTID ofcourse replacing storeid and productid with numbers referencing to my store and the specific product i get a text return of 

{
  "id": 8443685,
  "sku": "KEN000025",
  "smallThumbnailUrl": "picture URL here",
  "thumbnailUrl": "thumbnail URL here",
  "imageUrl": "image URL here",
  "name": "Kenwood Excelon KFC-X173",
  "price": 99.99,
  "weight": 1.0,
  "url": "long URL here",
  "description": "long description here",
  "options": [],
  "taxes": [],
  "galleryImages": [],
  "categories": [
    {
      "id": 769355,
      "thumbnailUrl": "url here",
      "name": "Speakers",
      "url": "url here",
      "description": ""
    },
    {
      "id": 1466304,
      "parentId": 1466305,
      "thumbnailUrl": "URL here",
      "name": "Kenwood",
      "url": "URL here",
      "description": ""
    }
  ],
  "dateAdded": 1325037351
}

Now if i have an HTML document and i want to output the picture of an item then below that the price of it how would i do that using the information from the JSON link.

PS i know Java script HTML PHP XML and a lot of other languages just not JSON Thank you

Upvotes: 2

Views: 5374

Answers (3)

ThangTD
ThangTD

Reputation: 1684

For a recursive way, assume I want to output as <table> with bootstrap classes:

public static function jsonViewable($jsonText = '')
{
    $arr  = json_decode($jsonText, true);
    $html = "";
    if ($arr && is_array($arr)) {
        $html .= self::_arrayToHtmlTableRecursive($arr);
    }

    return $html;
}

private static function _arrayToHtmlTableRecursive($arr)
{
    $str = "<table class='table table-bordered'><tbody>";
    foreach ($arr as $key => $val) {
        $str .= "<tr>";
        $str .= "<td>$key</td>";
        $str .= "<td>";
        if (is_array($val)) {
            if (!empty($val)) {
                $str .= self::_arrayToHtmlTableRecursive($val);
            }
        } else {
            $str .= "<strong>$val</strong>";
        }
        $str .= "</td></tr>";
    }
    $str .= "</tbody></table>";

    return $str;
}

Now a call to myclass::jsonViewable($jsonString) will have a nice output. Enjoy,

Upvotes: 1

Tadeck
Tadeck

Reputation: 137300

How to use JSON in PHP

JSON is very simple, yet powerful format for exchanging information.

If you want to process the JSON string you fetched (and stored eg. in $json variable), you do it simply by:

$decoded_json = json_decode($json, true);

(remove the second parameter or replace by false if instead of associative arrays you want objects) and then you process it as a simple or multidimensional array. To change it back into string just do $json = json_encode($decoded_json);.

Your decoded JSON string can be seen here: http://codepad.org/ZARAK3Er

Getting values from JSON

To output thumbnail URL and price in your case just use the following (do not forget to output $thumbnailUrl and $price appropriately - the snippet below just assigns value to them):

$decoded_json = json_decode($json, true);
$thumbnailUrl = $decoded_json['thumbnailUrl'];
$price = $decoded_json['price'];

See proof here: http://codepad.org/5BKi9sPp

Fetching external JSON file

To fetch external JSON file into the $json string use file_get_contents(). In your case it could look like this:

$url = 'http://app.ecwid.com/api/v1/STOREID/product?id=PRODUCTID';
$json = file_get_contents($url);

Solution

What you want can be achieved by gluing all the parts discussed above:

$url = 'http://app.ecwid.com/api/v1/STOREID/product?id=PRODUCTID';
$json = file_get_contents($url);
$decoded_json = json_decode($json, true);
$thumbnailUrl = $decoded_json['thumbnailUrl'];
$price = $decoded_json['price'];

As a result, you will have $thumbnailUrl and $price variables with the data you want. You can also enclose it within a function, that will take store ID and product ID and return object or associative array containing thumbnail URL and price for the specified product within specified store.

Upvotes: 3

Matthew Darnell
Matthew Darnell

Reputation: 4588

You can decode the JSON with PHP, which will turn it into associative arrays which you can then iterate through to display the data:

You should be able to use something like:

$productArray = json_decode( $JSON_DATA_VARIABLE, true );
$productImageOne = $productArray['categories'][0]['thumbnailUrl'];
$productImageTwo = $productArray['categories'][1]['thumbnailUrl'];
$price = $productArray['price'];

You will have to set the JSON data to a variable before you can decode it. I'm sure that example isn't 100% correct (I'm not great at going through arrays without a working example), but you get the idea. http://www.php.net/manual/en/function.json-decode.php

Upvotes: 0

Related Questions