You must Sign In to post a response.
  • Category: Programming

    How to show data in website from json url of other website?


    Planning to feed data from another website into your own? Wondering how to do this using json url? Check out this page for detailed procedure and guidance to carry out this function.

    I want to display product feeds of a website on my own websites page, for this they are providing me json url. I want display the data using javascript.

    The format of url is https://tools.vcommission.com/api/coupons.php?apikey=APIKEY
    and the response of this url is like:

    [{"featured":"0","exclusive":"0","promo_id":"P86672","offer_id":"414","offer_name":"Amazon.in CPS - India","coupon_title":"EMI Fest on Electronics, Mobiles & Furniture","category":"Electronics","coupon_description":"TnC: 10% Cashback on ICICI Credit Card EMI","coupon_type":"Promotion","coupon_code":"","link":"http:\/\/tracking.vcommission.com\/aff_c?offer_id=414&aff_id=xyz","coupon_expiry":"2018-03-22","added":"2018-03-15","preview_url":"","store_name":"Amazon","store_link":"http:\/\/tracking.vcommission.com\/aff_c?offer_id=414&aff_id=xyz","store_image":"http:\/\/media.vcommission.com\/brand\/files\/vcm\/414\/ama-4.jpg"},

    I want to display the offers by store name, so how can do this using javascript or using any other easy method?
  • Answers

    1 Answers found.
  • At first, we need to understand what API stands for. If you search on Google about API, it should reflect "Application Programming Interface". Some web application like Fixer, Google Maps, CoinMarketCap gives this functionality in a JSON format. For your question, I would like to share my thoughts. To demonstrate your query I will use fixer API like below link:

    https://api.fixer.io/latest?base=INR

    You can use AJAX request to fetch data from the JSON API and use it to display or render on your web page. Also, there is a jQuery Javascript framework to help you shorten your code writing.

    Here you can see a simple example I used in Chrome Developer Console:

    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
    var jsonData = xhr.responseText;
    var data = JSON.parse(jsonData);
    console.log(data)
    }
    }
    xhr.open('GET', 'https://api.fixer.io/latest?base=INR', true);
    xhr.send(null);

    Now, you can see in a console those data is reflecting in your console. I used localhost server and some website uses allow origin request, as a result, it will not allow you to fetch those data as below:

    Failed to load http://citibikenyc.com/stations/json: Redirect from 'http://citibikenyc.com/stations/json' to 'https://citibikenyc.com/stations/json' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.


    Now what you need to do is to use for loop like forEach, while, for (var key in Object) etc to display on your webpage.

    You can visit http://www.silwebdev.com/Currency/online_currency_values.php to see the demo as well the script I wrote: http://www.silwebdev.com/Currency/currency_app.js

    There are lots of suggestion on the internet, one of the most useful sites you can play with JSON I am listing here:
    https://cran.r-project.org/web/packages/jsonlite/vignettes/json-apis.html

    Regards,
    Surajit Basak

    Delete Attachment


  • Sign In to post your comments