在JavaScript中如何获取Firebase博客数据的父引用与唯一键？

Hey there! It sounds like you're successfully pulling timestamp, title, and body data for your blog posts—but you're stuck on linking those pieces back to unique identifiers or parent references. Let's fix that up!

First, Fix the Data Structure #

Right now it looks like you're splitting post data into separate arrays (one for timestamps, one for titles, etc.), which breaks the connection between each post's core content and its metadata. The simple fix here is to keep all related data for a single post bundled together in an object.

Scenario 1: Fetching Data from an API #

Most blog APIs return each post as an object that includes built-in unique keys (like id) and parent reference fields (such as parentPostId for replies or nested posts). Here's how to work with that:

// Example of typical API response data
const rawBlogPosts = [
  {
    id: "post_456",
    parentPostId: null, // Top-level posts have no parent
    timestamp: "Thu Feb 08 2018 15:57:12 GMT-0500 (EST)",
    title: "Why is coffee good for you?",
    body: "This would be the body of the blog..."
  },
  {
    id: "post_789",
    parentPostId: "post_456", // This is a reply to the first post
    timestamp: "Fri Feb 09 2018 10:22:00 GMT-0500 (EST)",
    title: "Re: Why is coffee good for you?",
    body: "I totally agree—here's another reason..."
  }
];

// Sort the full post objects by timestamp (newest first)
const sortedPosts = rawBlogPosts.sort((postA, postB) => {
  return new Date(postB.timestamp) - new Date(postA.timestamp);
});

// Now you can access unique keys and parent references alongside your other data
sortedPosts.forEach(post => {
  console.log(`Post ID: ${post.id}`);
  console.log(`Parent Post ID: ${post.parentPostId ?? "None (top-level post)"}`);
  console.log(`Title: ${post.title}\n`);
});

Scenario 2: Extracting Data from the DOM #

If you're pulling data directly from a webpage's HTML, look for custom data attributes on the post container (like data-post-id or data-parent-id). These are usually added by the blog platform to track unique posts:

<!-- Example DOM structure for a blog post -->
<div class="blog-post" data-post-id="post_456" data-parent-id="null">
  <div class="post-timestamp">Thu Feb 08 2018 15:57:12 GMT-0500 (EST)</div>
  <h3 class="post-title">Why is coffee good for you?</h3>
  <div class="post-body">This would be the body of the blog...</div>
</div>

Here's how to extract all data together in one go:

// Grab all post container elements
const postElements = document.querySelectorAll('.blog-post');

// Convert elements to an array of objects with all related data
const blogPosts = Array.from(postElements).map(postEl => ({
  id: postEl.dataset.postId,
  parentId: postEl.dataset.parentId,
  timestamp: postEl.querySelector('.post-timestamp').textContent.trim(),
  title: postEl.querySelector('.post-title').textContent.trim(),
  body: postEl.querySelector('.post-body').textContent.trim()
}));

// Sort the posts by timestamp as before
const sortedPosts = blogPosts.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));

If No Unique Keys Exist (Fallback Option) #

If your data source doesn't provide built-in unique identifiers, you can generate them (though this is a fallback, not ideal). For example, you could create a hash from the timestamp + title, or use a sequential counter:

const blogPostsWithGeneratedIds = blogPosts.map((post, index) => ({
  ...post,
  id: `post_${index + 1}`, // Simple sequential ID
  // Or a more unique option:
  // id: `${Date.parse(post.timestamp)}-${post.title.replace(/\s+/g, '-')}`
}));

The main takeaway is to keep each post's data bundled together—this way you never lose track of which unique key or parent reference belongs to which title, timestamp, or body.

内容的提问来源于stack exchange，提问作者Anthony Sette