Using JS to build a dynamic link

[RickB]

guys, I have a very unique situation here. This what I'm trying to accomplish.

Using JS to dynamically build a link that will open a frame-in.

Can I use JS on website(A) to reference a text file on website(B) (CSV, XLS or something similar) with a list of links and product ID's. The product ID's are the common denominators between the two websites. Once the ID is found in the text file on website(B), grab the link associated with the product ID in the text file and dynamically build the button / link on website(A)? Right now I don't know where to start... Any advice is greatly appreciated.

[Fotiman]

You may run into some cross origin issues. Look up CORS to determine what you need to do on website(B) to allow access from website(A). For the text file, I'd probably store it as a JSON file, as it will be easier to parse. Something like:

{
  "products": [
    {"id": 1, "href": "http://example.com/products/1"},
    {"id": 2, "href": "http://example.com/products/2"},
    {"id": 3, "href": "http://example.com/products/3"},
    {"id": 4, "href": "http://example.com/products/4"},
    {"id": 5, "href": "http://example.com/products/5"}
  ]
}

You could then do something like parse the JSON data that was returned, iterate over the products array, and generate a new <a></a> element using the href value.

[Fotiman]

Note, though, that with JavaScript generated links, some users (and some search engines) will not be able to "see" those links.

[RickB]

Thank you Fontiman for your reply. It is greatly appreciated. I spoke to the tech support reps at the company I will be getting the product links from and they offered to set up an API for me to get the links. Do you think that would be easier than using a JSON file like you mentioned in your post?

[Fotiman]

You're welcome (and it's Fotiman, not Fontiman, though you're not the first person to make that mistake). :)

If their API is serving JSON data, then the end result would be identical. For example, if you have a file located at:
http://example.com/api/products
And that "products" file contains JSON data, then it's no different than if that was not a physical file, but some server-side processing page (PHP, ASP, etc.) that returned JSON data.

If their API returns XML data, then you'd need to do just a little more work to parse the results, but not much.

[RickB]

I'm just now playing around with the api now. The end of the url is "fmt=json". When I open the link in firefox, it looks like an xml doc though. This is the first time I've ever attempted something like this. I've used JS numerous times before to populate html elements as variables but, now I feel like a fish out of water. I guess the fist step I need to do is structure the data (product id's and links)in the api then work on the JS to fetch the data. Right?

[Fotiman]

The end of the url is "fmt=json"

That would tend to suggest that they intend to provide the API in JSON format.

I guess the fist step I need to do is structure the data (product id's and links)in the api then work on the JS to fetch the data. Right?

Yep, that's how I'd start. If you want me to take a look at the output of the API, feel free to send me a PM [webmasterworld.com] with the link.

[RickB]

Can you help me with the step of getting the data from the JSON file into a variable, basically the first step? Once I have it in a variable, I can get the data I need from the array. I'm having an issue getting with the first step. I copied the results from URI and used it. I'm trying to figure out how to tell the script to "go to this url and get this "data", bring it back and use this Var for the data."

What I have so far:

<script>
    var data = '{"resultsList":[{"dealerId":"56729","dealerName":"Beaman Toyota","dealerAddress":"1525 Broadway|Nashville, TN 37203","dealerServiceRating":"0.0","dealerSaleRating":"1.0","dealerPhone":"[phone] ","dealerLatitude":"36.154679","dealerLongitude":"-86.791912","dealerLocationId":"16446","dealerSalesReviewsCount":"2","dealerServiceReviewsCount":"0","dealerMake":null,"inventoryId":"100457874","vin":"4T1BF1FK6EU389311","franchiseId":"56729","make":"Toyota","model":"Camry","submodel":"Camry Sedan","submodelId":"200486708","modelLinkCode":"M030554","modelYearId":"200485954","year":"2014","trim":"SE","actualTrim":"N/A","displayTrim":"SE","msrpPrice":"24875","cityMpg":"25","hwyMpg":"35","combinedMpg":"28","engineSize":"4","exteriorColor":"Cosmic Gray Mica|60,64,79","interiorColor":"Black premium cloth|60,60,60","exteriorGenericColor":"Gray","interiorGenericColor":"Black","styleName":"SE 4dr Sedan (2.5L 4cyl 6A)","styleId":"200497904","transmission":"AUTOMATIC","driveTrain":"front wheel drive","options":["Carpet Floor and Trunk Mat Set (CF)","2014.5 Model Year (MY)","50 State Emissions (FE)"],"features":["Cruise Control","Seat Material: Premium Cloth","Side Airbags: Dual Front And Dual Rear","Pre Wired For Phone","Cd Mp3 Playback","Auxiliary Audio Input And Usb With External Media Control","1st Row Seats: Bucket","Usb Connection","Tire Pressure Monitoring","Stability Control","Traction Control","In Dash Cd: Single Cd Player","Child Seat Anchors"],"bodyType":"Sedan","stockNumber":"00ET1424","invoicePrice":"N/A","guaranteedPrice":"24775.0","tmvinventoryPrice":"23202.0","tmvdealerCash":"0","tmvcustomerIncentives":"726","gpexperiationDate":"2014-06-30"}]}';
 
var json = JSON.parse(data);
 

var DealerName = (json.resultsList[0].dealerName);
alert(DealerName);
 
var vin = (json.resultsList[0].vin);
alert(vin);

var submodel = (json.resultsList[0].submodel);
 alert(submodel);

var invenId = (json.resultsList[0].inventoryId);
alert(invenId);

var model = (json.resultsList[0].model);
 alert(model);

var driveTrain = (json.resultsList[0].driveTrain);
alert(driveTrain);
</script>

This is just a test to break the data out from the array and assign a Var to the piece of data I need.

[Fotiman]

I'm trying to figure out how to tell the script to "go to this url and get this "data"

Something like:

// Replace apiUrl value with actual url
var apiUrl = 'http://example.com/api/inventory/v1/lookup?foo=bar',
  xhr = new XMLHttpRequest();

xhr.open('GET', apiUrl, true);
xhr.onreadystatechange = handler;
xhr.send();
function handler() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // perfect!
      var data = JSON.parse(xhr.responseText);
      var DealerName = data.resultsList[0].dealerName;
      alert(DealerName);
      // ... etc., etc.
    } else {
      // there was a problem with the request,
      // for example the response may contain a 404 (Not Found)
      // or 500 (Internal Server Error) response code
    }
  } else {
    // still not ready
  }
}

Note, I personally wouldn't use a variable named "json", simply to avoid confusion with the JSON object.