# Hive Developer Portal

### JS: Get Posts

Query for the most recent posts having a specific tag, using a Hive filter

Full, runnable src of Get Posts can be downloaded as part of: tutorials/javascript (or download just this tutorial: devportal-master-tutorials-javascript-04_get_posts.zip).

This tutorial pulls a list of the posts from different tags or filters and displays them. Tags and filters are different. It’s important to understand them.

## Intro

Tags & Filters are two different.

A `tag` in Hive is much like a tag in Gmail, or Twitter. It’s a way to describe a post as being relevant to a particular topic. Posts may have up to five tags on them, but there are limits when querying (more on this later).

A `filter` in Hive is a kind of built-in ‘view’ or ordering of posts. You can use the following filters: `trending`, `hot`, `new`, `active`, and `promoted`. You’ll get a feel for the subtleties of each as you create your application.

## Steps

1. UI - A brief description of the UI and inputting our query values
2. Construct query - Assemble the information from the UI into our `filter` & `query`
3. API call - Make the call to Hive
4. Handle response - Accept the response in a promise callback, then render the results
5. Example post object - An example post object from the response list

#### 1. UI

The source HTML for our UI can be found in public/index.html

There are three input components to the UI.

- Filters: where we select one of the five built in filter types.

        <select id="filters" class="form-control" >...

- Tag: where we type in a single, arbitrary tag. (The Hive blockchain does not support searching on multiple tags)

        <input id="tag" class="form-control"/>

- Get Posts: It’s a button. You click it, and we move on to assembling our post.

        <button class="btn btn-primary" onclick="getPosts()">Get Posts</button>

#### 2. Construct query

The filter and query are constructed within the async, globally available function `getPosts`

The `limit` property you see below limits the total number of posts we’ll get back to something managable. In this case, five.

    const filter = document.getElementById('filters').value;
    const query = {
        tag: document.getElementById('tag').value,
        limit: 5,
    };

#### 3. API call

The api call itself is fairly simple. We use `getDiscussions`. The first argument, filter, is a simple string. The second argument is our query object. Like most of dhive’s api functions, `getDiscussions` returns a Promise.

    client.database
        .getDiscussions(filter, query)
        .th..

#### 4. Handle response

When the promise returned by `getDiscussions` completes successfully, the function we pass to `.then()` iterates over the entries response, and constructs html from it.

    ...ery)
    .then(result => {
                console.log("Response received:", result);
                if (result) {
                    var posts = [];
                    result.forEach(post => {
                        const json = JSON.parse(post.json_metadata);
                        const image = json.image ? json.image[0] : '';
                        const title = post.title;
                        const author = post.author;
                        const created = new Date(post.created).toDateString();
                        posts.push(
                            `<div class="list-group-item"><h4 class="list-group-item-heading">${title}</h4><p>by ${author}</p><center><img src="${image}" class="img-responsive center-block" style="max-width: 450px"/></center><p class="list-group-item-text text-right text-nowrap">${created}</p></div>`
                        );
                    });

                    document.getElementById('postList').innerHTML = posts.join('');
                } else {
                    document.getElementById('postList').innerHTML = "No result.";
                }
            })

#### 5. Example post object

The result returned from the service is a `JSON` list. This is an example list with one entry.

    [
      {
        "abs_rshares": 0,
        "active": "2020-04-29T06:08:18",
        "active_votes": [],
        "allow_curation_rewards": true,
        "allow_replies": true,
        "allow_votes": true,
        "author": "hiveio",
        "author_reputation": "34879294456530",
        "author_rewards": 0,
        "beneficiaries": [],
        "body": "![#HuobiHive2020 ... an asset shining bright, provided by community member @nateaguila](https://files.peakd.com/file/peakd-hive/hiveio/XsnzlWHl-social_hive_flare.jpg)\n\n## Huobi has listed Hive! ...",
        "body_length": 0,
        "cashout_time": "1969-12-31T23:59:59",
        "category": "hiveblockchain",
        "children": 26,
        "children_abs_rshares": 0,
        "created": "2020-04-24T00:41:06",
        "curator_payout_value": "0.000 HBD",
        "depth": 0,
        "id": 85763874,
        "json_metadata": {
          "app": "peakd/2020.04.4",
          "format": "markdown",
          "description": "Hive is now listed on Huobi Global! This post contains all official links and AMA transcripts.",
          "tags": [
            "hiveblockchain",
            "exchangenews",
            "hiveama"
          ],
          "users": [
            "nateaguila",
            "roelandp"
          ],
          "links": [
            "/trending/huobihive2020",
            "/@nateaguila",
            "https://twitter.com/HuobiGlobal/status/1253210569194090497",
            "https://huobiglobal.zendesk.com/hc/en-us/articles/900000684263",
            "https://huobiglobal.zendesk.com/hc/en-us/articles/900000687166--EXCLUSIVE-Deposit-HIVE-on-Huobi-Global-to-Share-100-000-HIVE-",
            "https://twitter.com/HuobiGlobal/status/1252566140431130624",
            "/@roelandp",
            "/trending/notfinancialadvice",
            "https://developers.hive.io/",
            "https://hiveprojects.io/"
          ],
          "image": [
            "https://files.peakd.com/file/peakd-hive/hiveio/XsnzlWHl-social_hive_flare.jpg",
            "https://files.peakd.com/file/peakd-hive/hiveio/9tEYm2I9-image.png",
            "https://files.peakd.com/file/peakd-hive/hiveio/AXkoBSE3-image.png",
            "https://files.peakd.com/file/peakd-hive/hiveio/djdRACpx-image.png"
          ]
        },
        "last_payout": "2020-05-01T00:41:06",
        "last_update": "2020-04-24T00:41:06",
        "max_accepted_payout": "0.000 HBD",
        "max_cashout_time": "1969-12-31T23:59:59",
        "net_rshares": 0,
        "net_votes": 182,
        "parent_author": "",
        "parent_permlink": "hiveblockchain",
        "pending_payout_value": "0.000 HBD",
        "percent_steem_dollars": 10000,
        "permlink": "huobi-global-official-hive-listing-announcement-giveaways-ama-chat-transcripts",
        "promoted": "0.000 HBD",
        "reblogged_by": [],
        "replies": [],
        "reward_weight": 10000,
        "root_author": "hiveio",
        "root_permlink": "huobi-global-official-hive-listing-announcement-giveaways-ama-chat-transcripts",
        "root_title": "Huobi Global Official Hive Listing Announcement, Giveaways, and AMA Chat Transcripts",
        "title": "Huobi Global Official Hive Listing Announcement, Giveaways, and AMA Chat Transcripts",
        "total_payout_value": "0.000 HBD",
        "total_pending_payout_value": "0.000 HBD",
        "total_vote_weight": 0,
        "url": "/hiveblockchain/@hiveio/huobi-global-official-hive-listing-announcement-giveaways-ama-chat-transcripts",
        "vote_rshares": 0
      }
    ]

And that’s all there is to getting top-level posts. See Get post comments for getting comments

### To Run the tutorial

1. `git clone https://gitlab.syncad.com/hive/devportal.git`
2. `cd devportal/tutorials/javascript/04_get_posts`
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/