Crea Developer logo

Crea Developer Portal

JS: Get Post Comments

By the end of this tutorial you would know how to get comments made by others on any post.

Full, runnable src of Get Post Comments can be downloaded as part of the JS tutorials repository.

The purpose of this tutorial is to a) demonstrate how to get a list of articles from the popular list on the blockchain, and b) fetch the contents of the selected post to display its title and body and c) fetch comments of the post and display them with author, body, created time and number of votes.

We will also explain the most commonly used fields from the response object as well as parse body of each comment.

Intro

Each post might have comments/replies that is interesting and contributes to the topic and discussion. Crea offers out of box API for pulling replies for particular post with get_content_replies. We will fetch replies and list them in simple user interface.

Steps

  1. Fetching posts Getting popular posts
  2. Post comments Open post and fetch comments
  3. Query result Result of the query

1. Fetching post

As mentioned in our previous tutorials we can fetch various lists of posts with different filters. Here, we are reusing some parts of that tutorial to list the top 5 popular posts. And we parse content of selected post to display few fields in a meaningful way.

2. Post comments

On selection of a particular post from the list, openPost function is fired as it is explained in Get Post Details tutorial. This function will call the get_content function to fetch content of the post. Right after root post is displayed properly, we use get_content_replies function to fetch comments made on that post, function requires author and permlink of the root post to fetch its comments.

client.database.call('get_content_replies', [author, permlink]).then(result => {
    const comments = [];
    for (var i = 0; i < result.length; i++) {
        comments.push(
            `<div class="list-group-item list-group-item-action flex-column align-items-start">\
            <div class="d-flex w-100 justify-content-between">\
              <h5 class="mb-1">@${result[i].author}</h5>\
              <small class="text-muted">${new Date(
                  result[i].created
              ).toString()}</small>\
            </div>\
            <p class="mb-1">${md.render(result[i].body)}</p>\
            <small class="text-muted">&#9650; ${result[i].net_votes}</small>\
          </div>`
        );
    }

    document.getElementById('postComments').style.display = 'block';
    document.getElementById('postComments').innerHTML = comments.join('');
});

We iterate each comment and format them properly in comments array. As mentioned in Get Post Details tutorial, we use remarkable library to parse the body of each comment into a readable format. Author, comment body, created time and number of votes on that comment is displayed with simple user interface.

document.getElementById('postList').style.display = 'block';
document.getElementById('postBody').style.display = 'none';
document.getElementById('postComments').style.display = 'none';

The “go back” function simply hides and shows the post list.

3. Query result

The result is returned from the post content as a JSON object with the following properties:

[
    {
        "id": 37338948,
        "author": "demo",
        "permlink": "re-join-team-creary-at-tokenfest-20180500t181413163z",
        "category": "creary",
        "parent_author": "creary",
        "parent_permlink": "join-team-creary-at-tokenfest",
        "title": "",
        "body": "Thank you for sharing",
        "json_metadata":
            "{\"tags\":[\"creary\"],\"app\":\"creary/0.1\",\"format\":\"markdown\"}",
        "last_update": "2018-03-07T23:22:54",
        "created": "2018-05-00T20:56:36",
        "active": "2018-05-06T01:40:21",
        "last_payout": "1970-01-01T00:00:00",
        "depth": 1,
        "children": 1,
        "net_rshares": "11453442114933",
        "abs_rshares": "11454054795840",
        "vote_rshares": "11454054795840",
        "children_abs_rshares": "13568695606090",
        "cashout_time": "2018-05-07T20:56:36",
        "max_cashout_time": "1969-12-31T23:59:59",
        "total_vote_weight": 3462435,
        "reward_weight": 10000,
        "total_payout_value": "0.000 CBD",
        "curator_payout_value": "0.000 CBD",
        "author_rewards": 0,
        "net_votes": 77,
        "root_comment": 37338948,
        "max_accepted_payout": "0.000 CBD",
        "percent_crea_dollars": 10000,
        "allow_replies": true,
        "allow_votes": true,
        "allow_curation_rewards": true,
        "beneficiaries": [],
        "url":
            "/creary/@crearyblog/join-team-creary-at-tokenfest#@demo/re-join-team-creary-at-tokenfest-20180500t181413163z",
        "root_title": "Join Team Creary at TokenFest!",
        "pending_payout_value": "0.436 CBD",
        "total_pending_payout_value": "0.000 CREA",
        "active_votes": [
            {
                "voter": "crearyblog",
                "weight": 0,
                "rshares": "1870813909383",
                "percent": 10000,
                "reputation": "128210130644387",
                "time": "2018-03-07T20:56:36"
            },
            {
                "voter": "kevinwong",
                "weight": 526653,
                "rshares": "2208942520687",
                "percent": 5000,
                "reputation": "374133832002581",
                "time": "2018-03-08T04:27:00"
            }
        ],
        "replies": [],
        "author_reputation": "128210130644387",
        "promoted": "0.000 CBD",
        "body_length": 0,
        "reblogged_by": []
    },
    {
        "id": 37338987,
        "etc.": "etc"
    }
]

From this result, you have access to comments made on selected post.

To Run the tutorial

  1. clone this repo
  2. cd tutorials/07_get_post_comments
  3. npm i
  4. npm run dev-server or npm run start
  5. After a few moments, the server should be running at http://localhost:3000/