How to determine which post the user want to see and get the corresponding data from firebase?

Question

I am writing a simple forum and on home page there is a list of post titles. I want to let the user click on the post title and link to postPage.html. On postPage.html I need to get the title and content from firebase database. The problem is I don't know which post the user clicked on.

I've been thinking of using document.onclick to get what title the user clicked so I can use the title as a path to find the post content in firebase
firebase.database().ref(postTitle).set({post_title: postTitle...})
but it could be a problem if there are two posts with the same title.

Below is how I show the list of post titles on home page.

var str_1 = "<tr><td><a href='postPage.html'>";
var str_2 = "</td></tr>\n";
postRef.once('value').then(function(snapshot){
    snapshot.forEach(function(childSnapshot){
        var childData = childSnapshot.val();
        total_post[total_post.length] = str_1 + childData.post_title + str_2;
    });
    document.getElementById('allposts').innerHTML = total_post.join('');
}).catch(e => console.log(e.message));<br/>

and the html looks like this

<table class="table table-hover">
    <thead>
    <tr>
        <th>Topics</th>
        <th>Posted by</th>
    </tr>
    </thead>
    <tbody id="allposts">
    <tr>
        <td><a href="postPage.html">title1</a></td>
        <td>person1</td>
    </tr>
    <tr>
        <td><a href="postPage.html">title2</a></td>
        <td>person2</td>
    </tr>
    </tbody>
</table>

I can't think of another way to do this. Any suggestion and hint will be of great help.

`a href="postPage.html?x=person1"` etc? – Jaromanda X Apr 18 '18 at 12:49 — Jaromanda X, Apr 18 '18 at 12:49

Renaud Tarnec · Accepted Answer · 2018-04-18T14:05:35.110

You should add to each line the key of the post and add it as a query string value to the postPage url. I have adapted your original code as follow:

var str_1 = "<tr><td>";
var str_2 = "</a></td></tr>";
postRef.once('value').then(function(snapshot){
snapshot.forEach(function(childSnapshot){
    var childData = childSnapshot.val();
    total_post[total_post.length] = str_1 + "<a href='postPage.html?postId=" + childSnapshot.key + "'>" + childData.post_title + str_2;
});
document.getElementById('allposts').innerHTML = total_post.join('');
}).catch(e => console.log(e.message));

Then in the postPage.html page you get the postId from the url. Depending on the language you are going to use you may use different method to get it.

In javascript you can use the method presented here How can I get query string values in JavaScript? and do getParameterByName('postId');

I copy it for reference:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

@WhaleShark Would you mind upvoting my answer? See https://stackoverflow.com/help/privileges/vote-up Thanks! — Renaud Tarnec, May 02 '18 at 08:10

score 1 · Answer 2 · answered Apr 18 '18 at 13:47

1

You need to add an "unique" key into every href.

<a href="postPage.html?postId=1>Post Title</a>

answered Apr 18 '18 at 13:47

Jack Yu

2,190
1
8
14

How to determine which post the user want to see and get the corresponding data from firebase?

2 Answers2