Nie pokazałeś jak wygląda JSON, więc to trochę będzie wróżenie z fusów. Zakładając, że zwraca on tablicę obiektów możesz użyć sort:
chanels.sort((a,b) => (a.parametr > b.parametr) ? 1 : ((b.name > a.name) ? -1 : 0));
, gdzie parametr to wartość wg. której sortujesz.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
PS. Nie widzę nigdzie pobierania wartości z inputów, więc to musisz sobie sam ogarnąć. Pobierz value z inputa i sortuj według a[parameter].
Racja, przepraszam, już dorzucam. Pomyślałem, że z uwagi na obecność parametrów pobieranych i wyświetlanych w tagach value, jest on zbędny.
Tak, json jest tablicą obiektów
[
{
"title": "Fun Fun Function",
"description": "I’m Mattias Petter Johansson, mpj for short. I’ve been a full-time programmer for about ten years. Among others, I've worked for Absolut Vodka, Blackberry and Spotify. https://patreon.com/funfunfunction",
"customUrl": "https://youtube.com/funfunfunction",
"publishedAt": "2015-05-15T08:25:01.000Z",
"thumbnails": {
"default": {
"url": "https://yt3.ggpht.com/a-/AN66SAzjMJRUuJm10kRK7ybMLDmXtRH71_F1YapMjw=s88-mo-c-c0xffffffff-rj-k-no",
"width": 88,
"height": 88
},
"medium": {
"url": "https://yt3.ggpht.com/a-/AN66SAzjMJRUuJm10kRK7ybMLDmXtRH71_F1YapMjw=s240-mo-c-c0xffffffff-rj-k-no",
"width": 240,
"height": 240
},
"high": {
"url": "https://yt3.ggpht.com/a-/AN66SAzjMJRUuJm10kRK7ybMLDmXtRH71_F1YapMjw=s800-mo-c-c0xffffffff-rj-k-no",
"width": 800,
"height": 800
}
},
"localized": {
"title": "Fun Fun Function",
"description": "I’m Mattias Petter Johansson, mpj for short. I’ve been a full-time programmer for about ten years. Among others, I've worked for Absolut Vodka, Blackberry and Spotify. https://patreon.com/funfunfunction"
},
"country": "SE",
"statistics": {
"viewCount": "7261372",
"commentCount": "0",
"subscriberCount": "180691",
"hiddenSubscriberCount": false,
"videoCount": "189"
}
},
{
"title": "Google Chrome Developers",
"description": "Making the web more awesome.",
"customUrl": "https://youtube.com/ChromeDevelopers",
"publishedAt": "2012-04-24T00:05:52.000Z",
"thumbnails": {
"default": {
"url": "https://yt3.ggpht.com/a-/AN66SAx7nOfbTWCEWQl33_t90eHhqz0cSmlRElL44g=s88-mo-c-c0xffffffff-rj-k-no",
"width": 88,
"height": 88
},
"medium": {
"url": "https://yt3.ggpht.com/a-/AN66SAx7nOfbTWCEWQl33_t90eHhqz0cSmlRElL44g=s240-mo-c-c0xffffffff-rj-k-no",
"width": 240,
"height": 240
},
"high": {
"url": "https://yt3.ggpht.com/a-/AN66SAx7nOfbTWCEWQl33_t90eHhqz0cSmlRElL44g=s800-mo-c-c0xffffffff-rj-k-no",
"width": 800,
"height": 800
}
},
"localized": {
"title": "Google Chrome Developers",
"description": "Making the web more awesome."
},
"statistics": {
"viewCount": "21089248",
"commentCount": "0",
"subscriberCount": "260317",
"hiddenSubscriberCount": false,
"videoCount": "796"
}
},
{
"title": "DevTips",
"description": "DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!\n\nEverything you see and hear are the opinions and preferences of the individual who said them, and no one else's.",
"customUrl": "https://youtube.com/DevTipsForDesigners",
"publishedAt": "2013-08-06T15:31:46.000Z",
"thumbnails": {
"default": {
"url": "https://yt3.ggpht.com/a-/AN66SAwJXtTrxzaTOzCl6Jd69lHLnrS_l2qYJKDeUw=s88-mo-c-c0xffffffff-rj-k-no",
"width": 88,
"height": 88
},
"medium": {
"url": "https://yt3.ggpht.com/a-/AN66SAwJXtTrxzaTOzCl6Jd69lHLnrS_l2qYJKDeUw=s240-mo-c-c0xffffffff-rj-k-no",
"width": 240,
"height": 240
},
"high": {
"url": "https://yt3.ggpht.com/a-/AN66SAwJXtTrxzaTOzCl6Jd69lHLnrS_l2qYJKDeUw=s800-mo-c-c0xffffffff-rj-k-no",
"width": 800,
"height": 800
}
},
"localized": {
"title": "DevTips",
"description": "DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!\n\nEverything you see and hear are the opinions and preferences of the individual who said them, and no one else's."
},
"country": "SE",
"statistics": {
"viewCount": "13948443",
"commentCount": "0",
"subscriberCount": "306828",
"hiddenSubscriberCount": false,
"videoCount": "329"
}
},
{
"title": "freeCodeCamp.org",
"description": "We're an open source community of busy people who learn to code and build projects for nonprofits.",
"customUrl": "https://youtube.com/freecodecamp",
"publishedAt": "2014-12-16T21:18:48.000Z",
"thumbnails": {
"default": {
"url": "https://yt3.ggpht.com/a-/AN66SAxCZFxULNr0S_fHjEvGVUMwJzjbwU-wVularA=s88-mo-c-c0xffffffff-rj-k-no",
"width": 88,
"height": 88
},
"medium": {
"url": "https://yt3.ggpht.com/a-/AN66SAxCZFxULNr0S_fHjEvGVUMwJzjbwU-wVularA=s240-mo-c-c0xffffffff-rj-k-no",
"width": 240,
"height": 240
},
"high": {
"url": "https://yt3.ggpht.com/a-/AN66SAxCZFxULNr0S_fHjEvGVUMwJzjbwU-wVularA=s800-mo-c-c0xffffffff-rj-k-no",
"width": 800,
"height": 800
}
},
"localized": {
"title": "freeCodeCamp.org",
"description": "We're an open source community of busy people who learn to code and build projects for nonprofits."
},
"country": "US",
"statistics": {
"viewCount": "10578494",
"commentCount": "0",
"subscriberCount": "464998",
"hiddenSubscriberCount": false,
"videoCount": "879"
}
},
{
"title": "meet.js",
"description": "meet.js videos",
"customUrl": "https://youtube.com/meetjs",
"publishedAt": "2013-10-26T08:46:30.000Z",
"thumbnails": {
"default": {
"url": "https://yt3.ggpht.com/a-/AN66SAwgCxBPLKDOxEY31LAmTUsslMnIaNFuMGhluw=s88-mo-c-c0xffffffff-rj-k-no",
"width": 88,
"height": 88
},
"medium": {
"url": "https://yt3.ggpht.com/a-/AN66SAwgCxBPLKDOxEY31LAmTUsslMnIaNFuMGhluw=s240-mo-c-c0xffffffff-rj-k-no",
"width": 240,
"height": 240
},
"high": {
"url": "https://yt3.ggpht.com/a-/AN66SAwgCxBPLKDOxEY31LAmTUsslMnIaNFuMGhluw=s800-mo-c-c0xffffffff-rj-k-no",
"width": 800,
"height": 800
}
},
"localized": {
"title": "meet.js",
"description": "meet.js videos"
},
"statistics": {
"viewCount": "28 565",
"commentCount": "0",
"subscriberCount": "504",
"hiddenSubscriberCount": false,
"videoCount": "69"
}
},
{
"title": "JSConf",
"description": "The JSConf YouTube Channel.\nJSConf is a series of JavaScript conferences from around the world and here we release the conference talk videos for free as fast as we can after every event.\n\nTopics include JavaScript, HTML5, CSS, node.js, robotics, etc.",
"customUrl": "https://youtube.com/jsconfeu",
"publishedAt": "2012-10-09T10:21:46.000Z",
"thumbnails": {
"default": {
"url": "https://yt3.ggpht.com/a-/AN66SAxWC2To0-1xz2-X3HNC6WFdP8zPKKqqHk_8ug=s88-mo-c-c0xffffffff-rj-k-no",
"width": 88,
"height": 88
},
"medium": {
"url": "https://yt3.ggpht.com/a-/AN66SAxWC2To0-1xz2-X3HNC6WFdP8zPKKqqHk_8ug=s240-mo-c-c0xffffffff-rj-k-no",
"width": 240,
"height": 240
},
"high": {
"url": "https://yt3.ggpht.com/a-/AN66SAxWC2To0-1xz2-X3HNC6WFdP8zPKKqqHk_8ug=s800-mo-c-c0xffffffff-rj-k-no",
"width": 800,
"height": 800
}
},
"localized": {
"title": "JSConf",
"description": "The JSConf YouTube Channel.\nJSConf is a series of JavaScript conferences from around the world and here we release the conference talk videos for free as fast as we can after every event.\n\nTopics include JavaScript, HTML5, CSS, node.js, robotics, etc."
},
"statistics": {
"viewCount": "6,747 555",
"commentCount": "0",
"subscriberCount": "106.248",
"hiddenSubscriberCount": true,
"videoCount": "1 281"
}
},
{
"title": "Coding Tech",
"description": "LEGAL DISCLAIMER ON CONTENT PERMISSIONS:\n\nCoding Tech partners with the tech conferences around the world that provided Coding Tech with their EXPLICIT permissions to republish videos on this channel. Here's the list of Conferences that provided Coding Tech with EXPLICIT written publication permissions: PyData, MLConf, Build Stuff, Code::dive, PolyConf, AmsterdamJS, React Amsterdam, ReactiveConf, Jazoon Tech Days, SFNode, CppCon, Infinite Red, GDG Lviv, Mibuso.com, You Gotta Love Frontend, React Native EU, Node Summit, NodeConfEU, ConFoo, Pixels Camp, JavaScriptLA, The Linux Foundation, Oredev Conference, Techlahoma, fitcevents. Coding Tech also re-posts content which was originally published with the Creative Commons Attribution license (reuse allowed).\n\nFor business inquiries, please connect on LinkedIn: https://www.linkedin.com/in/yuriy-matso-4614951/",
"customUrl": "https://youtube.com/codingtech",
"publishedAt": "2015-10-17T02:48:18.000Z",
"thumbnails": {
"default": {
"url": "https://yt3.ggpht.com/a-/AN66SAyBKLTLdTfmsp2PPjv-h53iokGAOXzcUVixRA=s88-mo-c-c0xffffffff-rj-k-no",
"width": 88,
"height": 88
},
"medium": {
"url": "https://yt3.ggpht.com/a-/AN66SAyBKLTLdTfmsp2PPjv-h53iokGAOXzcUVixRA=s240-mo-c-c0xffffffff-rj-k-no",
"width": 240,
"height": 240
},
"high": {
"url": "https://yt3.ggpht.com/a-/AN66SAyBKLTLdTfmsp2PPjv-h53iokGAOXzcUVixRA=s800-mo-c-c0xffffffff-rj-k-no",
"width": 800,
"height": 800
}
},
"localized": {
"title": "Coding Tech",
"description": "LEGAL DISCLAIMER ON CONTENT PERMISSIONS:\n\nCoding Tech partners with the tech conferences around the world that provided Coding Tech with their EXPLICIT permissions to republish videos on this channel. Here's the list of Conferences that provided Coding Tech with EXPLICIT written publication permissions: PyData, MLConf, Build Stuff, Code::dive, PolyConf, AmsterdamJS, React Amsterdam, ReactiveConf, Jazoon Tech Days, SFNode, CppCon, Infinite Red, GDG Lviv, Mibuso.com, You Gotta Love Frontend, React Native EU, Node Summit, NodeConfEU, ConFoo, Pixels Camp, JavaScriptLA, The Linux Foundation, Oredev Conference, Techlahoma, fitcevents. Coding Tech also re-posts content which was originally published with the Creative Commons Attribution license (reuse allowed).\n\nFor business inquiries, please connect on LinkedIn: https://www.linkedin.com/in/yuriy-matso-4614951/"
},
"country": "US",
"statistics": {
"viewCount": "13 779 683",
"commentCount": "0",
"subscriberCount": "362 617",
"hiddenSubscriberCount": false,
"videoCount": "539"
}
},
{
"title": "Mashable",
"description": "Mashable is for superfans. We're not for the casually curious. Obsess with us. Subscribe: http://on.mash.to/Subscribe",
"customUrl": "https://www.youtube.com/mashable",
"publishedAt": "1154225846000",
"thumbnails": {
"default": {
"url": "https://yt3.ggpht.com/a/AATXAJwY92Ezx1PinC-fes8WsE_0W61UI3X3XLt2dw=s88-c-k-c0xffffffff-no-rj-mo",
"width": 88,
"height": 88
},
"medium": {
"url": "https://yt3.ggpht.com/a/AATXAJwY92Ezx1PinC-fes8WsE_0W61UI3X3XLt2dw=s240-c-k-c0xffffffff-no-rj-mo",
"width": 240,
"height": 240
},
"high": {
"url": "https://yt3.ggpht.com/a/AATXAJwY92Ezx1PinC-fes8WsE_0W61UI3X3XLt2dw=s800-c-k-c0xffffffff-no-rj-mo",
"width": 800,
"height": 800
}
},
"localized": {
"title": "Lorem Ipsum",
"description": "Mashable is for superfans. We're not for the casually curious. Obsess with us. Subscribe: http://on.mash.to/Subscribe"
},
"country": "PL",
"statistics": {
"viewCount": "345,835,173",
"commentCount": "92029918",
"subscriberCount": "936728",
"hiddenSubscriberCount": true,
"videoCount": "204"
}
}
]