如何通过主题标签过滤和排列推文?
How to filter and array of tweets by a hastag?
我在页面上列出了一组推文对象。我在单独的 HTML 元素中显示所有推文的所有主题标签。当用户点击主题标签时,我希望它能过滤我的推文数组,只显示带有点击标签的推文。
这是数组中的推文对象之一:
{
"created_at": "Mon Dec 06 14:13:27 +0000 2021",
"id": 1467859736775344000,
"id_str": "1467859736775344128",
"text": "JUST IN – Professional soccer player receives world’s first #Bitcoin Lightning payroll payment https://...",
"truncated": false,
"entities": {
"hashtags": [
{
"text": "Bitcoin",
"indices": [
60,
68
]
}
],
"symbols": [],
"user_mentions": [],
"urls": [],
"media": [
{
"id": 1467859588900925400,
"id_str": "1467859588900925448",
"indices": [
97,
120
],
"media_url": "http://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
"media_url_https": "https://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
"url": "https://...",
"display_url": "pic.twitter.com/CYScG5iUm9",
"expanded_url": "https://twitter.com/BitcoinMagazine/status/1467859736775344128/photo/1",
"type": "photo",
"sizes": {
"small": {
"w": 680,
"h": 481,
"resize": "fit"
},
"thumb": {
"w": 150,
"h": 150,
"resize": "crop"
},
"large": {
"w": 1966,
"h": 1390,
"resize": "fit"
},
"medium": {
"w": 1200,
"h": 848,
"resize": "fit"
}
}
}
]
},
"extended_entities": {
"media": [
{
"id": 1467859588900925400,
"id_str": "1467859588900925448",
"indices": [
97,
120
],
"media_url": "http://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
"media_url_https": "https://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
"url": "https://...",
"display_url": "pic.twitter.com/CYScG5iUm9",
"expanded_url": "https://twitter.com/BitcoinMagazine/status/1467859736775344128/photo/1",
"type": "photo",
"sizes": {
"small": {
"w": 680,
"h": 481,
"resize": "fit"
},
"thumb": {
"w": 150,
"h": 150,
"resize": "crop"
},
"large": {
"w": 1966,
"h": 1390,
"resize": "fit"
},
"medium": {
"w": 1200,
"h": 848,
"resize": "fit"
}
}
}
]
},
"metadata": {
"result_type": "popular",
"iso_language_code": "en"
},
"source": "<a href=\"https://mobile.twitter.com\" rel=\"nofollow\">Twitter Web App</a>",
"in_reply_to_status_id": null,
"in_reply_to_status_id_str": null,
"in_reply_to_user_id": null,
"in_reply_to_user_id_str": null,
"in_reply_to_screen_name": null,
"user": {
"id": 361289499,
"id_str": "361289499",
"name": "Bitcoin Magazine",
"screen_name": "BitcoinMagazine",
"location": "Nashville, TN",
"description": "The Most Trusted Voice In #Bitcoin• Conference https://... \n• Watch https://...• Learn ⚡️https://...",
"url": "https://...",
"entities": {
"url": {
"urls": [
{
"url": "https://...",
"expanded_url": "http://BitcoinMagazine.com",
"display_url": "BitcoinMagazine.com",
"indices": [
0,
23
]
}
]
},
"description": {
"urls": [
{
"url": "https://...",
"expanded_url": "http://b.tc/conference",
"display_url": "b.tc/conference",
"indices": [
49,
72
]
},
{
"url": "https://...",
"expanded_url": "http://b.tc/youtube",
"display_url": "b.tc/youtube",
"indices": [
84,
107
]
},
{
"url": "https://...",
"expanded_url": "http://b.tc/21days",
"display_url": "b.tc/21days",
"indices": [
118,
141
]
}
]
}
},
"protected": false,
"followers_count": 1737059,
"friends_count": 635,
"listed_count": 11533,
"created_at": "Wed Aug 24 15:14:54 +0000 2011",
"favourites_count": 20000,
"utc_offset": null,
"time_zone": null,
"geo_enabled": true,
"verified": true,
"statuses_count": 19049,
"lang": null,
"contributors_enabled": false,
"is_translator": false,
"is_translation_enabled": false,
"profile_background_color": "000000",
"profile_background_image_url": "http://abs.twimg.com/images/themes/theme1/bg.png",
"profile_background_image_url_https": "https://abs.twimg.com/images/themes/theme1/bg.png",
"profile_background_tile": false,
"profile_image_url": "http://pbs.twimg.com/profile_images/1444022922377576453/AzvXYXGr_normal.jpg",
"profile_image_url_https": "https://pbs.twimg.com/profile_images/1444022922377576453/AzvXYXGr_normal.jpg",
"profile_banner_url": "https://pbs.twimg.com/profile_banners/361289499/1628624645",
"profile_link_color": "FFA207",
"profile_sidebar_border_color": "000000",
"profile_sidebar_fill_color": "000000",
"profile_text_color": "000000",
"profile_use_background_image": false,
"has_extended_profile": false,
"default_profile": false,
"default_profile_image": false,
"following": null,
"follow_request_sent": null,
"notifications": null,
"translator_type": "regular",
"withheld_in_countries": []
},
"geo": null,
"coordinates": null,
"place": null,
"contributors": null,
"is_quote_status": false,
"retweet_count": 386,
"favorite_count": 2612,
"favorited": false,
"retweeted": false,
"possibly_sensitive": false,
"lang": "en"
}
主题标签存储在一个带有文本字段的数组中。但是,我不知道如何通过主题标签中的文本字段进行过滤。
这是我的函数,它接受一组推文,但它目前只返回一组过滤的主题标签,而不是推文本身:
const filterTweetsByHashtag = (hashtag: string) => {
setOriginalTweets(tweets);
const filteredTweets = tweets.filter((tweet: any) => {
const hashtags = tweet.entities.hashtags;
return hashtags.some((hashtag: any) => hashtag.text === hashtag);
});
setTweets(filteredTweets);
};
我不确定哪里出错了,我可以很好地过滤字符串和数字,但是当涉及到在数组中过滤数组时,我完全迷路了。任何额外的见解将不胜感激!
你没有得到结果是因为你的变量名:
你可以看看下面这段代码:
return hashtags.some((hashtag: any) => hashtag.text === hashtag);
根据上面的代码,您的 hashtag.text
与 hashtags
的 hashtag
进行比较,而不是您提供的 hashtag
。
也许你可以试试这个:
return hashtags.some((h: any) => h.text === hashtag);
滤体正确。您正在隐藏主题标签变量,因此您的 some
函数使用了错误的变量。
我在页面上列出了一组推文对象。我在单独的 HTML 元素中显示所有推文的所有主题标签。当用户点击主题标签时,我希望它能过滤我的推文数组,只显示带有点击标签的推文。
这是数组中的推文对象之一:
{
"created_at": "Mon Dec 06 14:13:27 +0000 2021",
"id": 1467859736775344000,
"id_str": "1467859736775344128",
"text": "JUST IN – Professional soccer player receives world’s first #Bitcoin Lightning payroll payment https://...",
"truncated": false,
"entities": {
"hashtags": [
{
"text": "Bitcoin",
"indices": [
60,
68
]
}
],
"symbols": [],
"user_mentions": [],
"urls": [],
"media": [
{
"id": 1467859588900925400,
"id_str": "1467859588900925448",
"indices": [
97,
120
],
"media_url": "http://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
"media_url_https": "https://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
"url": "https://...",
"display_url": "pic.twitter.com/CYScG5iUm9",
"expanded_url": "https://twitter.com/BitcoinMagazine/status/1467859736775344128/photo/1",
"type": "photo",
"sizes": {
"small": {
"w": 680,
"h": 481,
"resize": "fit"
},
"thumb": {
"w": 150,
"h": 150,
"resize": "crop"
},
"large": {
"w": 1966,
"h": 1390,
"resize": "fit"
},
"medium": {
"w": 1200,
"h": 848,
"resize": "fit"
}
}
}
]
},
"extended_entities": {
"media": [
{
"id": 1467859588900925400,
"id_str": "1467859588900925448",
"indices": [
97,
120
],
"media_url": "http://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
"media_url_https": "https://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
"url": "https://...",
"display_url": "pic.twitter.com/CYScG5iUm9",
"expanded_url": "https://twitter.com/BitcoinMagazine/status/1467859736775344128/photo/1",
"type": "photo",
"sizes": {
"small": {
"w": 680,
"h": 481,
"resize": "fit"
},
"thumb": {
"w": 150,
"h": 150,
"resize": "crop"
},
"large": {
"w": 1966,
"h": 1390,
"resize": "fit"
},
"medium": {
"w": 1200,
"h": 848,
"resize": "fit"
}
}
}
]
},
"metadata": {
"result_type": "popular",
"iso_language_code": "en"
},
"source": "<a href=\"https://mobile.twitter.com\" rel=\"nofollow\">Twitter Web App</a>",
"in_reply_to_status_id": null,
"in_reply_to_status_id_str": null,
"in_reply_to_user_id": null,
"in_reply_to_user_id_str": null,
"in_reply_to_screen_name": null,
"user": {
"id": 361289499,
"id_str": "361289499",
"name": "Bitcoin Magazine",
"screen_name": "BitcoinMagazine",
"location": "Nashville, TN",
"description": "The Most Trusted Voice In #Bitcoin• Conference https://... \n• Watch https://...• Learn ⚡️https://...",
"url": "https://...",
"entities": {
"url": {
"urls": [
{
"url": "https://...",
"expanded_url": "http://BitcoinMagazine.com",
"display_url": "BitcoinMagazine.com",
"indices": [
0,
23
]
}
]
},
"description": {
"urls": [
{
"url": "https://...",
"expanded_url": "http://b.tc/conference",
"display_url": "b.tc/conference",
"indices": [
49,
72
]
},
{
"url": "https://...",
"expanded_url": "http://b.tc/youtube",
"display_url": "b.tc/youtube",
"indices": [
84,
107
]
},
{
"url": "https://...",
"expanded_url": "http://b.tc/21days",
"display_url": "b.tc/21days",
"indices": [
118,
141
]
}
]
}
},
"protected": false,
"followers_count": 1737059,
"friends_count": 635,
"listed_count": 11533,
"created_at": "Wed Aug 24 15:14:54 +0000 2011",
"favourites_count": 20000,
"utc_offset": null,
"time_zone": null,
"geo_enabled": true,
"verified": true,
"statuses_count": 19049,
"lang": null,
"contributors_enabled": false,
"is_translator": false,
"is_translation_enabled": false,
"profile_background_color": "000000",
"profile_background_image_url": "http://abs.twimg.com/images/themes/theme1/bg.png",
"profile_background_image_url_https": "https://abs.twimg.com/images/themes/theme1/bg.png",
"profile_background_tile": false,
"profile_image_url": "http://pbs.twimg.com/profile_images/1444022922377576453/AzvXYXGr_normal.jpg",
"profile_image_url_https": "https://pbs.twimg.com/profile_images/1444022922377576453/AzvXYXGr_normal.jpg",
"profile_banner_url": "https://pbs.twimg.com/profile_banners/361289499/1628624645",
"profile_link_color": "FFA207",
"profile_sidebar_border_color": "000000",
"profile_sidebar_fill_color": "000000",
"profile_text_color": "000000",
"profile_use_background_image": false,
"has_extended_profile": false,
"default_profile": false,
"default_profile_image": false,
"following": null,
"follow_request_sent": null,
"notifications": null,
"translator_type": "regular",
"withheld_in_countries": []
},
"geo": null,
"coordinates": null,
"place": null,
"contributors": null,
"is_quote_status": false,
"retweet_count": 386,
"favorite_count": 2612,
"favorited": false,
"retweeted": false,
"possibly_sensitive": false,
"lang": "en"
}
主题标签存储在一个带有文本字段的数组中。但是,我不知道如何通过主题标签中的文本字段进行过滤。
这是我的函数,它接受一组推文,但它目前只返回一组过滤的主题标签,而不是推文本身:
const filterTweetsByHashtag = (hashtag: string) => {
setOriginalTweets(tweets);
const filteredTweets = tweets.filter((tweet: any) => {
const hashtags = tweet.entities.hashtags;
return hashtags.some((hashtag: any) => hashtag.text === hashtag);
});
setTweets(filteredTweets);
};
我不确定哪里出错了,我可以很好地过滤字符串和数字,但是当涉及到在数组中过滤数组时,我完全迷路了。任何额外的见解将不胜感激!
你没有得到结果是因为你的变量名:
你可以看看下面这段代码:
return hashtags.some((hashtag: any) => hashtag.text === hashtag);
根据上面的代码,您的 hashtag.text
与 hashtags
的 hashtag
进行比较,而不是您提供的 hashtag
。
也许你可以试试这个:
return hashtags.some((h: any) => h.text === hashtag);
滤体正确。您正在隐藏主题标签变量,因此您的 some
函数使用了错误的变量。