Wordpress API - on click permalink - get single post and display

Question

Like to get single post WP API on click and replace it inside main div newsPostsContainer - kind of like routing. I am successfully displaying a list of posts from an external source.

If anyone can help with my code or recommend another library/client with example to do exactly this that would be great.

Heres my code.

window.onload = function(){
var newsPermalink = document.getElementById("news-Permalink");
var newsPostsContainer = document.getElementById("news-Posts-Container");
var externalDomain = "http://example.com";
var newDomain = "http://localhost.dev";

//----------------- WP API - News Content ------------------//

var newsRequest = new XMLHttpRequest();
newsRequest.open('GET', externalDomain + '/wp-json/wp/v2/posts?
filter[category_name]=news-and-events&?per_page=5&_embed=true');
function createNEWS(postsData){
var ourHTMLString = '';
for (i = 0;i < postsData.length;i++){
  var title = postsData[i].title.rendered;
  var newsHref = postsData[i].link;
  var newsHrefOutput = newsHrefOutput.replace(externalDomain, newDomain);
  if(postsData[i].featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
    ourHTMLString += '<a id="news-Permalink" href="'+newsHrefOutput+'" title="'+title+'"><img class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData[i].featured_image_src + '></a><br>';
  }
  ourHTMLString += '<a id="news-Permalink" href="'+newsHref+'" title="'+title+'"><h6 class="news-title">' + postsData[i].title.rendered + '</h6></a>' ;
  ourHTMLString += postsData[i].excerpt.rendered + '...<br><br>';
}
newsPostsContainer.innerHTML = ourHTMLString;
}
newsRequest.onload = function() {
if (newsRequest.status >= 200 && newsRequest.status < 400) {
  var data = JSON.parse(newsRequest.responseText);
  createNEWS(data);

} else {
  console.log("News Request - We connected to the server, but it returned an error.");
}
};
newsRequest.onerror = function() {
  console.log("Connection error");
};
newsRequest.send();

//All works up to here
//??
if (newsPermalink) {
newsPermalink.addEventListener("click", function() {
  console.log("clicked");
  newsPostsContainer.innerHTML = "";

    var singlePostString = '';

      if(postsData.featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
        singlePostString += '<img alt="'+title+'" class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData.featured_image_src + '><br>';
      }
      singlePostString += '<h6 class="news-title">' + postsData.title.rendered + '</h6>';
      singlePostString += postsData.content.rendered + '<br>';

    newsPostsContainer.innerHTML = singlePostString;

});
}

};//end window onload

score 0 · Answer 1 · answered Jun 20 '17 at 03:40

On this part of the code:

if (newsPermalink) {
newsPermalink.addEventListener("click", function() {
  console.log("clicked");
  newsPostsContainer.innerHTML = "";

    var singlePostString = '';

      if(postsData.featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
        singlePostString += '<img alt="'+title+'" class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData.featured_image_src + '><br>';
      }
      singlePostString += '<h6 class="news-title">' + postsData.title.rendered + '</h6>';
      singlePostString += postsData.content.rendered + '<br>';

    newsPostsContainer.innerHTML = singlePostString;

});
}

What would postsData be referencing to? I'd say it's failing here because postsData would be null and it would cause an undefined error.

If you want it to work, then you'll have to create a new variable to assign the data to when you run the createNEWS() function and then call that variable on the onClick of the permalink.

I.e

var globalPostData =  "";

....

function createNEWS(postsData){
var ourHTMLString = '';
for (i = 0;i < postsData.length;i++){
  var title = postsData[i].title.rendered;
  var newsHref = postsData[i].link;
  var newsHrefOutput = newsHref.replace(externalDomain, newDomain);
  if(postsData[i].featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
    ourHTMLString += '<a id="news-Permalink" href="'+newsHref+'" title="'+title+'"><img class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData[i].featured_image_src + '></a><br>';
  }
  ourHTMLString += '<a id="news-Permalink" href="'+newsHref+'" title="'+title+'"><h6 class="news-title">' + postsData[i].title.rendered + '</h6></a>' ;
  ourHTMLString += postsData[i].excerpt.rendered + '...<br><br>';
}
newsPostsContainer.innerHTML = ourHTMLString;
//Assign your data here
globalPostData = ourHTMLString;
}

...

//Reference your new variable on click
if (newsPermalink) {
newsPermalink.addEventListener("click", function() {
  console.log("clicked");
  newsPostsContainer.innerHTML = "";

    var singlePostString = '';

      if(globalPostData.featured_image_src !== externalDomain + "/wp-includes/images/media/default.png"){
        singlePostString += '<img alt="'+title+'" class="img-responsive pull-left news-thumbnail-lg wp-post-image" src=' + postsData.featured_image_src + '><br>';
      }
      singlePostString += '<h6 class="news-title">' + postsData.title.rendered + '</h6>';
      singlePostString += globalPostData.content.rendered + '<br>';

    newsPostsContainer.innerHTML = singlePostString;

});
}

Thanks for your suggestion but the script is not even getting to `console.log("clicked");` message — roshambo, Jun 20 '17 at 05:07
If that's the case, can you add a `console.log(newsPermalink)` before the `if(newsPermalink)` part of the code? I suspect the newsPermalink variable is null for whatever reason, which is why that part fails. — Erick T., Jun 20 '17 at 09:36

Wordpress API - on click permalink - get single post and display

1 Answers1