I am trying to create an 'autocomplete' search input field in vanilla javascript (no jquery or jquery-ui). I would like the 'autocomplete' to pull from my javascript object data for the 'suggestions'. I am attempting with the below; with no avail (no errors, just no response output). The functionality should be a 'match' narrowing; i.e. I begin typing 's' 's results' will be recommended first, etc.
HTML.
<div class="row">
<input type="text" id="autoSuggest" placeholder="Search..." onkeyup="changeInput(this.value)">
<div id="result"></div>
</div>
JavaScript attempt for this functionality:
function matchIt(input) {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return json.filter(function(file) {
if (file.match(reg)) {
return file;
}
});
}
function changeInput(val) {
var autoCompleteResult = matchIt(val);
document.getElementById("result").innerHTML = autoCompleteResult;
}
JS obj data:
var json =[{
"Name": "zips",
"Type": "Directory",
"DateModified": "6/14/2018 17:22:50",
"Size": "5 KB",
}, {
"Name": "presets",
"Type": "Directory",
"DateModified": "5/11/2018 7:32:10",
"Size": "2 KB",
}, {
"Name": "workflow",
"Type": "Directory",
"DateModified": "6/26/2018 10:29:59",
"Size": "6 KB",
},{
"Name": "software",
"Type": "Directory",
"DateModified": "3/16/2018 10:29:59",
"Size": "16 KB",
},{
"Name": "mmm_data",
"Type": "Directory",
"DateModified": "6/27/2018 1:19:29",
"Size": "3 KB",
},{
"Name": "jobs",
"Type": "Directory",
"DateModified": "4/27/2018 11:59:59",
"Size": "3 KB",
},
];
You need to match on file.Name, and not file. The filter callback function should then return a true/false value and not the object
var json = [{
"Name": "zips",
"Type": "Directory",
"DateModified": "6/14/2018 17:22:50",
"Size": "5 KB",
}, {
"Name": "presets",
"Type": "Directory",
"DateModified": "5/11/2018 7:32:10",
"Size": "2 KB",
}, {
"Name": "workflow",
"Type": "Directory",
"DateModified": "6/26/2018 10:29:59",
"Size": "6 KB",
}, {
"Name": "software",
"Type": "Directory",
"DateModified": "3/16/2018 10:29:59",
"Size": "16 KB",
}, {
"Name": "mmm_data",
"Type": "Directory",
"DateModified": "6/27/2018 1:19:29",
"Size": "3 KB",
}, {
"Name": "jobs",
"Type": "Directory",
"DateModified": "4/27/2018 11:59:59",
"Size": "3 KB",
}, ];
function matchIt(input) {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return json.filter(file => !!file.Name.match(reg));
}
function changeInput(val) {
if (val.length == 0) return;
var autoCompleteResult = matchIt(val);
document.getElementById("result").innerHTML = autoCompleteResult.map(i => i.Name).join('<br>')
}
<div class="row">
<input type="text" id="autoSuggest" placeholder="Search..." onkeyup="changeInput(this.value)">
<div id="result"></div>
</div>
{
"name": "English Premier League 2015/16",
"rounds": [
{
"name": "Play-Off um 1 Premierleague-Platz:",
"matches": [
{
"date": "2015-08-08",
"team1": {
"key": "manutd",
"name": "Manchester United",
"code": "MUN"
},
"team2": {
"key": "tottenham",
"name": "Tottenham Hotspur",
"code": "TOT"
},
"score1": 1,
"score2": 0
},
{
"date": "2015-08-08",
"team1": {
"key": "bournemouth",
"name": "Bournemouth",
"code": "BOU"
},
"team2": {
"key": "astonvilla",
"name": "Aston Villa",
"code": "AVL"
},
"score1": 0,
"score2": 1
},
{
"date": "2015-08-08",
"team1": {
"key": "everton",
"name": "Everton",
"code": "EVE"
},
"team2": {
"key": "watford",
"name": "Watford",
"code": "WAT"
},
"score1": 2,
"score2": 2
},
{
"date": "2015-08-08",
"team1": {
"key": "leicester",
"name": "Leicester City",
"code": "LEI"
},
"team2": {
"key": "sunderland",
"name": "Sunderland",
"code": "SUN"
},
"score1": 4,
"score2": 2
},
{
"date": "2015-08-08",
"team1": {
"key": "norwich",
"name": "Norwich",
"code": "NOR"
},
"team2": {
"key": "crystalpalace",
"name": "Crystal Palace",
"code": "CRY"
},
"score1": 1,
"score2": 3
},
{
"date": "2015-08-08",
"team1": {
"key": "chelsea",
"name": "Chelsea",
"code": "CHE"
},
"team2": {
"key": "swansea",
"name": "Swansea",
"code": "SWA"
},
"score1": 2,
"score2": 2
},
{
"date": "2015-08-09",
"team1": {
"key": "arsenal",
"name": "Arsenal",
"code": "ARS"
},
"team2": {
"key": "westham",
"name": "West Ham United",
"code": "WHU"
},
"score1": 0,
"score2": 2
},
{
"date": "2015-08-09",
"team1": {
"key": "newcastle",
"name": "Newcastle United",
"code": "NEW"
},
"team2": {
"key": "southampton",
"name": "Southampton",
"code": "SOU"
},
"score1": 2,
"score2": 2
},
{
"date": "2015-08-09",
"team1": {
"key": "stoke",
"name": "Stoke City",
"code": "STK"
},
"team2": {
"key": "liverpool",
"name": "Liverpool",
"code": "LIV"
},
"score1": 0,
"score2": 1
},
{
"date": "2015-08-10",
"team1": {
"key": "westbrom",
"name": "West Bromwich Albion",
"code": "WBA"
},
"team2": {
"key": "mancity",
"name": "Manchester City",
"code": "MCI"
},
"score1": 0,
"score2": 3
}
]
}
]
}
I want to log all the matches which are inside matches array . But i can't seem to access them because there are objects ,arrays ,more arrays and more objects nested inside one another. Kinda confused.please help explaining how to access elements in such situation. Which loops to use, what to do in case of looping through objects and so on. Hope I have explained my problem quite elaborately.
You can try this this code here:
const data = {"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1},{"date":"2015-08-08","team1":{"key":"everton","name":"Everton","code":"EVE"},"team2":{"key":"watford","name":"Watford","code":"WAT"},"score1":2,"score2":2},{"date":"2015-08-08","team1":{"key":"leicester","name":"Leicester City","code":"LEI"},"team2":{"key":"sunderland","name":"Sunderland","code":"SUN"},"score1":4,"score2":2},{"date":"2015-08-08","team1":{"key":"norwich","name":"Norwich","code":"NOR"},"team2":{"key":"crystalpalace","name":"Crystal Palace","code":"CRY"},"score1":1,"score2":3},{"date":"2015-08-08","team1":{"key":"chelsea","name":"Chelsea","code":"CHE"},"team2":{"key":"swansea","name":"Swansea","code":"SWA"},"score1":2,"score2":2},{"date":"2015-08-09","team1":{"key":"arsenal","name":"Arsenal","code":"ARS"},"team2":{"key":"westham","name":"West Ham United","code":"WHU"},"score1":0,"score2":2},{"date":"2015-08-09","team1":{"key":"newcastle","name":"Newcastle United","code":"NEW"},"team2":{"key":"southampton","name":"Southampton","code":"SOU"},"score1":2,"score2":2},{"date":"2015-08-09","team1":{"key":"stoke","name":"Stoke City","code":"STK"},"team2":{"key":"liverpool","name":"Liverpool","code":"LIV"},"score1":0,"score2":1},{"date":"2015-08-10","team1":{"key":"westbrom","name":"West Bromwich Albion","code":"WBA"},"team2":{"key":"mancity","name":"Manchester City","code":"MCI"},"score1":0,"score2":3}]}]};
data.rounds.forEach((round) => {
round.matches.forEach((match) => {
console.log(`Results ${ match.score1 } | ${ match.score2 }`);
})
});
Basically you're using a mixture of array and object references.
You use your object references (data.rounds or round.matches) to get to specific properties on your object. Then you can you array functions (.forEach() which you can read about here) to access the objects in each array. Then you just access the properties of those sub objects.
Hope this helps.
Building on Phil's comment, something like this should help you iterate through the matches and do something with each.
obj.rounds[0].matches.forEach(match => {
console.log(match);
})
The snippet shared is actually a object. Inside this object there is a key by name rounds, which is again array of objects.
So data.rounds will give the value which is an array.
Inside this array there is array of matches. But data.rounds is array of only one object. Hence data.rounds[0] will allow to access it's value. [0] being the index, since in array the first element is at 0 index & data.rounds[0].matches will give the array of matches
var data = {
"name": "English Premier League 2015/16",
"rounds": [{
"name": "Play-Off um 1 Premierleague-Platz:",
"matches": [
//other objects
]
}
console.log(data.rounds[0].matches)
DEMO
I guest that your data is structured in a JSON that you are going to decoded using the json_decode function like this:
$myMatches = json_decode($yourJSON);
After that JSON gets converted into an object you can access any property by following the following rules:
Every opening curly bracket on the JSON gets converted into an object, and you will have to use the arrow syntax like this: $myMatches->attribute
For example, imagine an object "$person" with the following structure:
{
"name": "manutd",
"lastname": "Manchester United",
"phone": "MUN"
}
To print the name you will have to do:
echo $person->name;
On the other hand, every normal bracket gets transformed into an array and you have to use brackets to access that information (like any other array), like this: $myMatches['attribute']
For example that same person but now with array syntax:
[
"name": "manutd",
"lastname": "Manchester United",
"phone": "MUN"
]
To print the name you will have to do:
echo $person['name'];
Now, for your question in particular
That said, if you want to print the date of the first round of the first match, you will have to do:
echo $myMatches->rounds[0]->matches[0]->date;
I have prepared this functions for your disposal:
//This function returns all the matches in one tournament round
function getMatchesOfRound($myMatches, $roundNumber)
{
return $myMatches->rounds[$roundNumber]->matches;
}
//This function returns all the matches played by $teamKey
function getAllMatchesOfTeam($myMatches, $teamKey){
$matches = [];
foreach($myMatches->rounds as $rounds)
foreach($rounds->matches as $match)
if($match->team1->key == $teamKey || $match->team2->key == $teamKey) $matches[] = $match;
return $matches;
}
//this function determines the winner of a given match and returns the $teamKey
function getWinerFromMatch($match){
if($match->score1 > $match->score2) return $match->team1;
else if($match->score1 < $match->score2) return $match->team2;
else return null;
}
//This function returns all matches won by $teamKey
function getAllMatchesOfTeam($myMatches, $teamKey){
$matches = [];
foreach($myMatches->rounds as $rounds)
foreach($rounds->matches as $match)
if(getWinerFromMatch($match) == $teamKey) $matches[] = $match;
return $matches;
}
//This function returns all ties
function getAllMatchesOfTeam($myMatches, $teamKey){
$matches = [];
foreach($myMatches->rounds as $rounds)
foreach($rounds->matches as $match)
if(getWinerFromMatch($match) == null) $matches[] = $match;
return $matches;
}
You get the idea, I hope this helps. I have not tested the code, maybe it has minor sytax errors.
result = {
"name": "English Premier League 2015/16",
"rounds": [
{
"name": "Play-Off um 1 Premierleague-Platz:",
"matches": [
{
"date": "2015-08-08",
"team1": {
"key": "manutd",
"name": "Manchester United",
"code": "MUN"
},
"team2": {
"key": "tottenham",
"name": "Tottenham Hotspur",
"code": "TOT"
},
"score1": 1,
"score2": 0
},
{
"date": "2015-08-08",
"team1": {
"key": "bournemouth",
"name": "Bournemouth",
"code": "BOU"
},
"team2": {
"key": "astonvilla",
"name": "Aston Villa",
"code": "AVL"
},
"score1": 0,
"score2": 1
},
{
"date": "2015-08-08",
"team1": {
"key": "everton",
"name": "Everton",
"code": "EVE"
},
"team2": {
"key": "watford",
"name": "Watford",
"code": "WAT"
},
"score1": 2,
"score2": 2
},
{
"date": "2015-08-08",
"team1": {
"key": "leicester",
"name": "Leicester City",
"code": "LEI"
},
"team2": {
"key": "sunderland",
"name": "Sunderland",
"code": "SUN"
},
"score1": 4,
"score2": 2
},
{
"date": "2015-08-08",
"team1": {
"key": "norwich",
"name": "Norwich",
"code": "NOR"
},
"team2": {
"key": "crystalpalace",
"name": "Crystal Palace",
"code": "CRY"
},
"score1": 1,
"score2": 3
},
{
"date": "2015-08-08",
"team1": {
"key": "chelsea",
"name": "Chelsea",
"code": "CHE"
},
"team2": {
"key": "swansea",
"name": "Swansea",
"code": "SWA"
},
"score1": 2,
"score2": 2
},
{
"date": "2015-08-09",
"team1": {
"key": "arsenal",
"name": "Arsenal",
"code": "ARS"
},
"team2": {
"key": "westham",
"name": "West Ham United",
"code": "WHU"
},
"score1": 0,
"score2": 2
},
{
"date": "2015-08-09",
"team1": {
"key": "newcastle",
"name": "Newcastle United",
"code": "NEW"
},
"team2": {
"key": "southampton",
"name": "Southampton",
"code": "SOU"
},
"score1": 2,
"score2": 2
},
{
"date": "2015-08-09",
"team1": {
"key": "stoke",
"name": "Stoke City",
"code": "STK"
},
"team2": {
"key": "liverpool",
"name": "Liverpool",
"code": "LIV"
},
"score1": 0,
"score2": 1
},
{
"date": "2015-08-10",
"team1": {
"key": "westbrom",
"name": "West Bromwich Albion",
"code": "WBA"
},
"team2": {
"key": "mancity",
"name": "Manchester City",
"code": "MCI"
},
"score1": 0,
"score2": 3
}
]
}
]
};
for ( let i=0, totalRounds = result.rounds.length; i < totalRounds; i++) {
let round = result.rounds[i];
console.log( round.name );
for ( let j=0, totalMatches = round.matches.length; j < totalMatches; j++ ) {
let match = round.matches[j];
console.log( match.date + ': ' + match.team1.name + " " + match.score1 + " - " + match.team2.name + " " + match.score2)
}
}
You can fetch all the matches in a variable then iterate over it using any loop.
If there is only 1 round then this will do the task.
var matches = object.rounds[0]. matches;
for(var match in matches){
console.log(match);
}
If there more rounds then you to first iterate over rounds and inside that loop fetch all the matches in that particular round.
for(var round in object.rounds){
var matches = round.matches;
for(var prop in matches){
console.log(prop);
}
}
I'm looking for a functional solution to map this object into a hierarchical structure and group by practice, subjectarea, and asset so that this object:
var data = {
"research": [
{ "practice": "Talent Management", "id": "20992", "title": "Creating a Culture of Leadership", "subjectArea": "Talent Strategy" },
{ "practice": "Talent Management", "id": "20993", "title": "Talent Economics", "subjectArea": "Talent Strategy" },
{ "practice": "Talent Management", "id": "20990", "title": "Finding the Right Talent", "subjectArea": "Recruiting" },
{ "practice": "Human Resources", "id": "20994", "title": "Tips from the Front", "subjectArea": "HR Training" },
{ "practice": "Human Resources", "id": "20995", "title": "Reward Programs", "subjectArea": "Employee Engagement" },
]
}
gets transformed into this (count the number of items for a practice and add the subject areas for the practice as children, count the number of items for a subject area within the practice and add the asset (id and title) as children for the subject area):
{
"name": "research",
"children": [
{
"name": "Talent Management", "size": 3, "children": [
{
"name": "Talent Strategy", "size": 2, "children": [
{ "name": "Creating a Culture of Leadership", "id": "20992", "size": 1 },
{ "name": "Talent Economics", "id": "20993", "size": 1 }
]
},
{
"name": "Recruiting", "size": 1, "children": [
{ "title": "Finding the Right Talent", "id": "20990", "size": 1 },
]
}
]
},
{
"name": "Human Resources", "size": 2, "children": [
{
"name": "HR Training", "size": 1, "children": [
{ "name": "Tips from the Front", "id": "20994", "size": 1 },
]
},
{
"name": "Employee Engagement", "size": 1, "children": [
{ "name": "Reward Programs", "id": "20995", "size": 1 },
]
}
]
},
]
}
I haven't been able to sort out the map and reduce combination to use to yield the correct result with counts, and appreciate any insight.
It might not be what SO is for (as per comments above), but in case anyone needs to transform an array of flat objects into a hierarchical structure that you can simply specify the nesting order, number of levels, and field names, here is a recursive function to do so - https://github.com/lance-p/configurable-transform-flat-array-to-nested. Hope it might be of help to others.
I'm trying to figure out how to retrieve Youtube Tags and use them in my code behind, but I can't even seem to retrieve any information whatsoever. What would be the best way to retrieve tags with a delimiter like a , or a ; ?
var video_id='VA770wpLX-Q';
$.getJSON('http://gdata.youtube.com/feeds/api/videos/'+video_id+'?v=2&alt=jsonc',function(data,status,xhr){
alert(data.data.tags);
});
This is what the Json object looks like:
{
"apiVersion": "2.1",
"data": {
"id": "VA770wpLX-Q",
"uploaded": "2011-02-24T22:31:02.000Z",
"updated": "2012-04-08T21:37:06.000Z",
"uploader": "drdrevevo",
"category": "Music",
"title": "Dr. Dre - I Need A Doctor (Explicit) ft. Eminem, Skylar Grey",
"description": "Music video by Dr. Dre performing I Need A Doctor featuring Eminem and Skylar Grey (Explicit). © 2011 Aftermath Records",
"tags": ["Dr", "Dre", "Eminem", "New", "Song", "Skylar", "Grey", "GRAMMYs", "Dr.", "Need", "Doctor", "video", "Eazy", "N.W.A.", "NWA", "easy", "drdre", "and", "em"],
"thumbnail": {
"sqDefault": "http://i.ytimg.com/vi/VA770wpLX-Q/default.jpg",
"hqDefault": "http://i.ytimg.com/vi/VA770wpLX-Q/hqdefault.jpg"
},
"player": {
"default": "http://www.youtube.com/watch?v=VA770wpLX-Q&feature=youtube_gdata_player"
},
"content": {
"5": "http://www.youtube.com/v/VA770wpLX-Q?version=3&f=videos&app=youtube_gdata"
},
"duration": 457,
"aspectRatio": "widescreen",
"rating": 4.902695,
"likeCount": "430519",
"ratingCount": 441253,
"viewCount": 88270796,
"favoriteCount": 306556,
"commentCount": 270597,
"status": {
"value": "restricted",
"reason": "requesterRegion"
},
"restrictions": [{
"type": "country",
"relationship": "deny",
"countries": "DE"
}],
"accessControl": {
"comment": "allowed",
"commentVote": "allowed",
"videoRespond": "allowed",
"rate": "allowed",
"embed": "allowed",
"list": "allowed",
"autoPlay": "denied",
"syndicate": "allowed"
}
}
}
Youtube no longer supports "tag" functionality with it's API.