asked on

Seeking refinements for a JQuery based script that interfaces with GraphQL (via the GraphCMS API)

I need some help figuring out how to do a couple of additional things with this JQuery-based script that interfaces with GraphQL (via the GraphCMS API):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <style>
  body { font-family:arial; }
  .title { font-weight:bold; padding-top:35px; }
  .id { border-bottom:1px solid #cccccc; padding-bottom:35px; }
  </style>
</head>
<body>
<div id="results"></div>
<script>
$.post({
  url: 'https://api.graphcms.com/simple/v1/cjgp9rqoj21iq0176nzwwecoc',   
  data: JSON.stringify({ "query": " { allBlogs { id date title description featuredImage { url }} } " }),
  contentType: 'application/json'
}).done(function(response) {
  var results = response.data ? response.data.allBlogs || [] : [];
  var container = $('#results');
  results.forEach(function(item) {  	
  	var id = $('<p>', {class: 'id'}).html(item.id);
  	var date = $('<p>', {class: 'title'}).html(item.date);
    var title = $('<p>', {class: 'title'}).html(item.title);
    var description = $('<div>', {class: 'description'}).html(item.description);
    var image = item.featuredImage.url;
    container.append(title, date, image, description, id);
  });
});
</script>
</body>
</html>

Open in new window

Here's the URL for this script for reference: https://egoselfaxis.com/graphql.html

Here are the refinements that I'm seeking:

1) I need to find a way to handle situations where the non-required featured image isn't available. Currently, if I don't specify a featured image for a post, the script halts and throws a JavaScript error at the precise point where a featured image isn't found for that post.

2) In situations where there IS a featured image for a post, although I am able to return the a URL for the image, I can't seem to figure out how to concatenate things in such a way where I'm generating an img tag (ie: var featuredimage = '<img src="' . item.featuredImage.url . '">';) Everything I try this, I get an error message. What is the correct way to do this?

3) How would I concatenate things so that I can generate a link to a specific post that passed the id value as a url parameter? (ie: <a href="?id=' . id . '">Read More</a>)

Thanks!
- Yvan

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

egoselfaxis

ASKER

Thanks Julian! That worked great. I just made 1 slight change. I changed the post titles so that they linked ...

var title = $('<a>',{href: url, class: 'title'}).text(item.title);

Open in new window

Just one last question .. How would I properly format the dates that are in this format (using jQuery / Javascript)?

2018-05-12T00:00:00.000Z

Ideally, I'd like to be able to do this without having to use an additional JS library, and I'd like to reformat the dates to something either like "May 12, 2018" or "5/12/208".

Thanks,
- Yvan

Julian Hansen

You can try the toUTCString() which will give you this
Tue, 22 May 2018 14:49:49 GMT

Otherwise you can define your own formatting function on the date object

Date.prototype.myformat = function() {
  return (1900 + this.getYear()) + '-' + ('00' + (this.getMonth() + 1)).substr(-2) + '-' + ('00' + this.getDay()).substr(-2);
}
var d = new Date();
console.log(d.myformat());

Open in new window

If you want month's and day names you would need to include your own array's of names and use the getDay() and getMonth() functions to index that array.

egoselfaxis

ASKER

I'm trying this .. but I'm getting an error:

    Date.prototype.myformat = function() {
      return (1900 + this.getYear()) + '-' + ('00' + (this.getMonth() + 1)).substr(-2) + '-' + ('00' + this.getDay()).substr(-2);
    }    
    var d = item.date;
    var postdate = d.myformat();    
    var date = $('<p>', {class: 'title'}).html(postdate);

Open in new window

TypeError: d.myformat is not a function

Julian Hansen

Because item.date is not a Date object - you need to create a Date object from it first

var d = new Date(item.date);

Open in new window

egoselfaxis

ASKER

Thanks Julian!

Julian Hansen

You are welcome.