How to output JSON array in HTML

Question

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

So, you want to do that in javascript? php?

Ben
– Ben

2012-03-21 20:56:41 +00:00
Commented Mar 21, 2012 at 20:56 — Ben
– Ben, Commented Mar 21, 2012 at 20:56
javascript would work thanks for your reply

Timmer1992
– Timmer1992

2012-03-21 21:14:37 +00:00
Commented Mar 21, 2012 at 21:14 — Timmer1992
– Timmer1992, Commented Mar 21, 2012 at 21:14
did any of the solutions work out for you?

Christoph
– Christoph

2012-03-26 09:33:28 +00:00
Commented Mar 26, 2012 at 9:33 — Christoph
– Christoph, Commented Mar 26, 2012 at 9:33

Tadeck · Accepted Answer · 2012-03-21 21:57:29Z

3

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.

edited Mar 21, 2012 at 21:57

answered Mar 21, 2012 at 21:29

Tadeck

138k28 gold badges155 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Timmer1992 Over a year ago

Okay that makes sense now, so do i have to actually paste the JSON text into the code every time or is there a way that the data can be pulled directly from a URL instead?

Tadeck Over a year ago

@Timmer1992: Yes, there is a way to fetch the JSON and assign it to $json variable of course. What PHP framework do you use?

Tadeck Over a year ago

@Timmer1992: If you use PHP framework, refer to its documentation - there should (may) be some helper for performing external requests. In raw PHP you can use eg. file_get_contents() function like that: $json = file_get_contents($url); (where $url is the string containing the URL you want to fetch).

ThangTD · Accepted Answer · 2016-08-09 04:23:06Z

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,

Matthew Darnell · Accepted Answer · 2012-03-21 21:23:52Z

0

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

edited Mar 21, 2012 at 21:23

answered Mar 21, 2012 at 21:18

Matthew Darnell

4,5862 gold badges22 silver badges30 bronze badges

1 Comment

Timmer1992 Over a year ago

so how would i link that to the JSON url? so that if i rewrite that data and pass different URL's to it depending on the item it will still output say a box with a picture of the item in it and the price below that. I dont quite understand how to apply this to output the code from my JSON URL

Collectives™ on Stack Overflow

How to output JSON array in HTML

3 Answers 3

How to use JSON in PHP

Getting values from JSON

Fetching external JSON file

Solution

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

How to use JSON in PHP

Getting values from JSON

Fetching external JSON file

Solution

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related