Repository

https://github.com/igormuba/Steem-Feed-Example-

What Will I Learn?

Create a query
Fetch the feed from a user
DOM manipulation to formate and display
Convert markup to HTML

Requirements

Internet connection
Code editor
Browser
Reading the previous classes is recommended but not necessary

Difficulty

Intermediate

Tutorial Contents

From now on I believe we have covered the basics of JavaScript/Steem API interaction, so it is time to move to a more "practical" (read user interface) side of things.

We have been simply working with 1 post and 1 comment, but it is time to get more advanced from now on.

The Index

The index file will simply host the shadow paragraph tags for us to DOM manipulate in the script, they are just hosts for the post content, so there is not much else to do here other than creating 3 paragraph tags with IDs 1 through 3 and importing the Steem script

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
    
</head>
<body>

<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
<script src="js/myscript.js"></script>
</body>
</html>

Creating the query

The function from the Steem library we are going to use is

steem.api.getDiscussionsByFeed(query, function (err, result){}

So we need to build a query with the author and how many posts we want to fetch, I hope that by now you are comfortable with objects/JSON and arrays

The tag is the user where we will fetch the feed from, and the limit is how many posts we will get from his feed, in this case, I want just 3 posts for demo purposes.

So, in the example below I am looking for the 3 last posts (limit: 3) from the user me, that is igormuba (tag: 'igormuba',)

// change the tag to your own username to see if it works later
let query = {
    tag: 'igormuba',
    limit: 3
}

What do the function returns

Before we touch on what do we get in return, let us console.log the result, please, use your browser to also see all the content that is returned from each post.

If you want a cleaner result you can go back and change the limit to 1 post.

let query = {
    tag: 'igormuba',
    limit: 1
}

But don't forget to go back to 3 later, or how many posts you want to get, and don't forget you also need the same amount of P tags with the IDs set too

loggin to the console

steem.api.getDiscussionsByFeed(query, function (err, result) {
console.log(err, result);
}

Will return a JSON file with the posts we want

In this case, I am getting the last 3 posts from my own feed.

NOTE: This is not my last 3 posts, it is the last 3 posts that are fed into me, like the timeline of content I see, not the content I post, though I believe if I post and my post is in the last 3 things on my feed it will appear here too

Building the posts

I thought of a few ways we could build the posts, but I have decided to use a for loop to iterate through the posts we have fetched and fill them inside the paragraph tags.

This seemed like the fastest and easiest way to just demo the DOM manipulation to fill the elements returned from the blockchain.

for (let i=0; i<result.length; i++){

}

Now, if you did like me and name the <p> tags IDs 1 to 3, then we can use the i from the loop to find the right paragraph from the right post by adding 1 to it and converting to string.

Remember: arrays start counting from 0, but I am counting the P tags from 1, now that I think about it it is dumb but it is not such a huge thing, just do as follows and you won't ever worry about it again

for (let i=0; i<result.length; i++){
let iToString = (i+1).toString();
}

Manipulating the DOM to add the posts

Now it is just a matter of DOM manipulation to add the posts in a formatted way.

If in the last sections you have used the console.log to see what JSON properties you get back from the call, you might have other properties you might want to add, such as images, how much money did the post make, etc, but to keep it simple I am using just what really matters for a post, in order:

The title
The author
The body

document.getElementById(iToString).innerHTML = `
        `+result[i].title+`
        `+result[i].author+`
        `+result[i].body+`
        

        `

This will create an H1 tag with the title, an H2 tag with the author and a P tag with the body.

And as our code iterating through the results it will fill in the right order, let us see?
The results
The code looks like this


And my feed looks like this


And now the moment of truth!

Open the index.html file and see if it works, we expect to see the same posts in the same order...

And we do!
I hope you could replicate step by step and see the same results.
One more thing
If you have repeated the steps you might have noted that the markdown tags are ugly, they are not being displayed as proper HTML.
We can use a library called ShowDown to change markdown to HTML automatically. Check their github below for more info, this is very helpful

https://github.com/showdownjs/showdown
So, let us import to our html
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>

And on our code

Before the document.getElementById(iToString).innerHTML do the following
let converter = new showdown.Converter()
let text = result[i].body
let html = converter.makeHtml(text);

And the P inside our DOM manipulation now is <p>+html+</p>
So altogether:
steem.api.getDiscussionsByFeed(query, function (err, result) {
    console.log(err, result);
    for (let i=0; i<result.length; i++) {
        let iToString = (i+1).toString();
        let converter = new showdown.Converter()
        let text = result[i].body
        let html = converter.makeHtml(text);
        document.getElementById(iToString).innerHTML = `
        `+result[i].title+`
        `+result[i].author+`
        `+html+`
        

        `
    }
  });

And now the images, links, etc, all appear as normal, either the author has created them in HTML markup or in markdown


Curriculum

(Part 6) SteemConnect Web API Tutorial - Create A Steem App To Convert SBD To Steem pt6
(Part 5)Tutorial On Steem/SteemConnect JS Retrieve And Comment The Last Post @steemconnect pt5
(Part 4)Tutorial On SteemConnect JS Submit A New Post Using @steemconnect pt4
(Part 3)Tutorial On SteemConnect JS Dsteem And Steem API for JavaScript pt3
(Part 2)Tutorial On SteemConnect JS Dsteem And Steem API for JavaScript pt2


Tutorial On SteemConnect JS Dsteem And Steem API for JavaScript pt1

I AM A STEEM WITNESS
To vote for me, simply use the SteemConnect link below

https://steemconnect.com/sign/account-witness-vote?witness=igormuba&approve=1
or go to https://steemit.com/~witnesses
(note, it is /~witnesses, not /witness)

Scroll all the way down to "If you would like to vote for a witness outside of the top 100, enter the account name below to cast a vote."


type igormuba and click vote

(Part 7) Steem JavaScript API Tutorial - Fetch And Display A Real Feed pt7

Repository

What Will I Learn?

Requirements

Difficulty

Tutorial Contents

The Index

Creating the query

What do the function returns

Building the posts

Manipulating the DOM to add the posts

`+result[i].author+` `+result[i].body+` ` This will create an H1 tag with the title, an H2 tag with the author and a P tag with the body. And as our code iterating through the results it will fill in the right order, let us see?

The results

One more thing

`+result[i].author+` `+html+` ` } }); And now the images, links, etc, all appear as normal, either the author has created them in HTML markup or in markdown

Curriculum

I AM A STEEM WITNESS

`+result[i].author+`
`+result[i].body+`
`
This will create an H1 tag with the title, an H2 tag with the author and a P tag with the body.
And as our code iterating through the results it will fill in the right order, let us see?

`+result[i].author+`
`+html+`
` } });
And now the images, links, etc, all appear as normal, either the author has created them in HTML markup or in markdown