Skip to main content

Display the Featured Listings

Before starting this lesson, complete the previous lesson:

Get and Store Featured Listings

Once the featured listing data has been saved as JSON, you can load that stored data and display it on a custom page.

Load the Stored JSON

The featured listings were previously saved in a file named:

temp.json

To load and decode that JSON into a PHP variable, use:

$listings = json_decode(file_get_contents("temp.json"), true);

The json_decode() function converts the JSON string into a PHP array, making the listing data easier to work with.

Why Decode JSON?

The IDX Broker API returns data as JSON.

Example JSON response:

[
    {
        "component": "clients",
        "level": "client",
        "enabled": "y"
    },
    {
        "component": "leads",
        "level": "client",
        "enabled": "y"
    },
    {
        "component": "mls",
        "level": "client",
        "enabled": "y"
    }
]

After decoding the JSON, PHP can access each value using array indexes and keys.

Example:

echo $response[1]["component"];

This would output:

leads

Arrays start at 0, so [1] refers to the second item in the array.

Display Listing Data

This example loops through each featured listing and displays:

  • The first listing image
  • The property address
  • The listing price

Example values:

echo $value["image"][0]["url"];
echo $value["address"];
echo $value["listingPrice"];

A foreach() loop is used so each listing in the JSON file can be displayed automatically.

Complete Example File

<html>
<head>

<style>
body {
    padding-left: 35%;
    padding-right: 35%;
}

#main-image {
    max-width: 500px;
}

#address {
    font-weight: lighter;
}

#price {
    font-weight: bolder;
}

.image {
    padding-bottom: 25px;
}

.text {
    padding-top: 5px;
    padding-bottom: 10px;
}
</style>

</head>

<body>

<h1>Featured Listings</h1>

<?php

// Load the stored JSON and decode it
$listings = json_decode(file_get_contents("temp.json"), true);

// Loop through all properties
foreach ($listings as $key => $value) {

    // First property image in the images array
    echo '<div class="image">
            <img id="main-image" src="'.$value["image"][0]["url"].'">
          </div>';

    // Property address
    echo '<div id="address" class="text">'.$value["address"].'</div>';

    // Property price
    echo '<div id="price" class="text">'.$value["listingPrice"].'</div>';

}

?>

</body>
</html>

Next Steps

This creates a basic custom featured listings page that you fully control.

From here, you can expand the template by adding:

  • More property fields from the API response
  • Custom styling
  • Links to detail pages
  • Responsive layouts
  • Additional filtering or sorting
  • Map integration

This provides a foundation for building custom featured listings pages using IDX Broker API data.

Related articles

Powered by Zendesk