We Keep Coding

Retrieving nested details from info stored in a database

So I have a list of movies stored with a database and when I make a request to the endpoint the data is returned as such
**{
"Actors": [],
"_id": "613345b5c3e971923de94876",
"Title": "Gladiator",
"Description": "A former Roman General sets out to exact vengeance against the corrupt emperor who murdered his family and sent him into slavery.",
"ImagePath": "https://m.media-amazon.com/images/I/51m50jXZsUL._AC_.jpg",
"Featured": true,
"Genre": [
{
"_id": "61373bf26af4f5693de54a3e",
"Name": "Action",
"Description": "Action films involve one or more heroes thrust into a series of challenges requiring physical feats, extended fights, extensive stunts and frenetic chases.Story and character development are generally secondary to explosions, fist fights, gunplay and car chases. Both historically and currently, action films have wide commercial appeal and enjoy box office success. The action film revolves around a narrative, to be sure, but more importantly than that, a hero; when a moviegoer thinks of an action picture, more often than not they are thinking of a specific actor and the obstacles their character(s) must overcome."
}
],
"Director": [
{
"_id": "613741376af4f5693de54a41",
"Name": "Ridley Scott",
"Bio": "Ridley Scott is an English film producer and director, regarded as one of the biggest names in Hollywood. Ridley is known for his science-fiction horror films, such as the cult classic ‘Alien’ and the science-fiction existential drama ‘Blade Runner.’ Belonging to an army family, Scott was in love with films since childhood. He began his career with short films and eventually made his first feature film, ‘The Duellists,’ in 1977. The film won the ‘Best Debut Film’ honor at the ‘Cannes Film Festival.’ However, it was his second feature film ‘Alien’ that introduced him to Hollywood in a grand style. His highly moody and atmospheric style of directing was fairly new to mainstream Hollywood audiences. Scott quickly sealed his place as one of the most prominent young directors. Scott repeated his mainstream success with ‘Blade Runner.’ Over the years, with the success of films such as ‘Kingdom of Heaven,’ ‘Robin Hood,’ and ‘Black Hawk Down,’ he became a name to reckon with. Of late, he has garnered appreciation for films such as ‘Gladiator,’ ‘The Martian,’ ‘Prometheus,’ and ‘Alien: Covenant.’ He has earned multiple nominations for prestigious awards such as the ‘Emmy Award,’ the ‘Academy Award,’ and the ‘Golden Globe Award.’ He has won two ‘Emmies’ too",
"Birth": "1937",
"Death": ""
}
]
}**
When I try to retrieve this information in another view
**<div className = "movie-director">
<span className = "label">Director: </span>
<span className = "value">{movie.Director.Name}</span>**
All I get is the ID of the director. I have tried to access the array using Array[].name but can't seem to get anything to display. Any suggestions?

How to convert a twiiter link into an embedded tweet?

I am building a news website which gets data from an external server. The external server often sends me the links to particular tweets but I can't seem to find a way to convert them into an embedded tweet
(Please note stack overflow wont let me send shortened urls, therefore it is in quotations.)
The json that it sends me is like -
"Story": "ROME: Harry Kane scored twice as a buoyant England cruised through to the semi-finals of Euro 2020 with a one-sided 4-0 win over Ukraine in Rome on Saturday. Kane ended a worrying international scoring drought by netting in the 2-0 last-16 defeat of Germany in midweek and he put England ahead inside four minutes on a sweaty evening in the Italian capital. <strong>As it happened: Ukraine vs England</strong> Gareth Southgate's side then put this quarter-final tie out of sight with two more goals early in the second half, one from Harry Maguire before Kane netted again. Substitute Jordan Henderson got the fourth, and as Denmark lie in wait in the Wembley semi-final on Tuesday England will be confident of going on to reach a first ever European Championship final and even now claiming a first major international title since 1966. <p>�������������� England = semi-finalists ������#EURO2020 | #ENG https://twitter.com/EURO2020/status/1411427976047120387"</p>— UEFA EURO 2020 (#EURO2020) 1625346114000 The draw here was kind for them, with Ukraine surely as weak an opponent as they could hope to face in a quarter-final, a stage at which they have lost to the likes of Italy and Portugal in recent European Championships. However the statistics are impressive, with England having come through five games at this tournament all without conceding a goal. Some of their play in wide areas was outstanding, with Raheem Sterling and Jadon Sancho -- making his first start at the Euro -- too hot for Ukraine to handle. <p>⏰ RESULT ⏰What. A. Performance. �������������� Kane (2), Maguire & Henderson net in Rome as England reach EURO 2020 se… https://twitter.com/EURO2020/status/1411427976047120387"</p>— UEFA EURO 2020 (#EURO2020) 1625345627000 Kane, their captain, had gone close to eight hours without finding the net for his country but his opener here was his second in just eight minutes following the late strike that secured victory over Germany. Regardless of the opposition, their display at the Stadio Olimpico was a step-up in class in the final third to previous games at the Euro and they will be favourites at home against a Danish side who played their own quarter-final against the Czech Republic on Saturday in distant Baku. This will be the only match England play away from home in the competition and it marked quite a difference to their defeat of the Germans, which was watched by more than 40,000 supporters at Wembley, where coronavirus restrictions were eased. <p>�������������� Two-goal England hero Harry Kane takes the plaudits after inspiring the Three Lions in Rome ��#Heineken |… https://twitter.com/EURO2020/status/1411427976047120387"</p>— UEFA EURO 2020 (#EURO2020) 1625346478000 With Italy currently imposing a five-day quarantine on all arrivals from the United Kingdom, the number of England fans in Rome was limited to those already based in the European Union although they still made themselves heard in the crowd of under 12,000. They had plenty to celebrate, unlike their Ukrainian counterparts, as Andriy Shevchenko's team came up short in their bid to take the country to a first ever major tournament semi-final. They scraped out of their group and then edged 10-man Sweden in extra time in the last 16, and their chances of shocking England looked dead and buried when they fell behind early on. Sterling, who terrorised the Ukraine defence down the left, played in Kane who poked the ball past Georgiy Bushchan. Ukraine's giant striker Roman Yaremchuk forced a save from Jordan Pickford and a Declan Rice piledriver was kept out by Bushchan, with England looking comfortable. However Ukraine were a different proposition after injured defender Serhiy Kryvtsov was replaced by Dynamo Kiev winger Viktor Tsygankov in the 36th minute. They finished the first half strongly and more pessimistic England fans may have spent the interval reliving their exit from Euro 2016, when they lost to Iceland in the last 16 despite also having opened the scoring in the fourth minute. They need not have worried. England scored again less than a minute after the restart when a foul on Kane allowed Luke Shaw to deliver a free-kick from the left for Maguire to head in. Four minutes after that Sterling supplied the overlapping Shaw and he crossed for a rejuvenated Kane to head home. The Tottenham star nearly had his hat-trick, a stinging volley producing a fine save from Bushchan. From Mason Mount's resulting corner came the fourth goal, another header, this time from Henderson, the first of five substitutes sent on by Southgate who would have been thinking about the semi-final long before this quarter-final was officially over. ",
Edit: Based on the reply below this. Let me clarify My server sends me data in the form of json objects with strings in it. I pass this data using ejs tags to their appropriate location to get rendered. I am asking how can i convert every twitter url that winds up in my json object to an embedded tweet.
Edit: This is the json that i received from the server I can render that just fine on my webpage but i cant seem to find a way to convert the hyperlinks to embeded tweet

just add "https://publish.twitter.com/oembed?" before your url as mentioned here.
you can also customize the embedded tweet as described in the link.
the response would be something like
{
"url": "https://twitter.com/Interior/status/507185938620219395",
"author_name": "US Dept of Interior",
"author_url": "https://twitter.com/Interior",
"html": "<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Happy 50th anniversary to the Wilderness Act! Here's a great wilderness photo from #YosemiteNPS. #Wilderness50 pic.twitter.com/HMhbyTg18X</p>— US Dept of Interior (#Interior) September 3, 2014</blockquote>n<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>",
"width": 550,
"height": null,
"type": "rich",
"cache_age": "3153600000",
"provider_name": "Twitter",
"provider_url": "https://twitter.com",
"version": "1.0"
}
and you can use the html property as embed tweet.

I think this should work for you. Twitter provides an api for creating embed html from a tweet url.
const axios = require('axios');
const main = async () => {
const tweetURL = 'https://twitter.com/thejackbeyer/status/1411522480775204866?s=20';
try {
const response = await axios.get(`https://publish.twitter.com/oembed?url=${tweetURL}`);
console.log(response.data.html);
} catch (error) {
console.error(error);
}
}
main();

How to detect notes from a .mp3 music file and then display a midi time graph

I am a developer but I don't know much about audio and music.
I'm trying to detect musical notes in a song file, I'm using p5.sound.js and this script.
I create two arrays 1) Midi values, 2) Start time for that midi value.
Then I create a third array for time duration of that midi value.
My draw function looks like following.
function draw() {
background(200);
// array of values from -1 to 1
var timeDomain = fft.waveform(1024, 'float32');
var corrBuff = autoCorrelate(timeDomain);
beginShape();
for (var i = 0; i < corrBuff.length; i++) {
var w = map(i, 0, corrBuff.length, 0, width);
var h = map(corrBuff[i], -1, 1, height, 0);
curveVertex(w, h);
}
endShape();
fill(0);
text ('Center Clip: ' + centerClipThreshold, 20, 20);
line (0, height/2, width, height/2);
var freq = findFrequency(corrBuff);
t1_arr.push(source.currentTime());
midi_arr.push(freqToMidi(freq));
text ('Fundamental Frequency: ' + freq.toFixed(2), 20, 50);
}
This code gives me data like this
"midi": [
"66",
"74",
"68",
"62",
"69",
"75",
"72",
"66",
"73",
"72",....]
"start_time": [
"2.1066458333333333",
"2.1119791666666665",
"2.1386458333333334",
"2.1546458333333334",
"2.1653125",
"2.1866458333333334",
"2.2079791666666666",
"2.2559791666666666",
"2.2826458333333335",
"2.3093125",....]
"duration": [
5.3333333333332,
26.666666666667,
16,
10.666666666667,
21.333333333333,
21.333333333333,
48,
26.666666666667,
26.666666666666,
32,....]
The problem is time duration is very short and it also not giving accurate results.
Form this data I'm trying to make tool with a graph like following then I will use mic to record user voice and match it to the notes from the original song and show scores at the end.
Graph screenshot
if there is a better way please suggest me.

Know a bit about music theory, and a bit about audio. Take this with a grain of salt.
What you're asking might be very hard to do. In general, you can have a mix of instruments in a track. Separating each one from the mixed track is known as the cocktail party problem and it doesn't have an easy solution - in fact, solving it is an active area of research.
Even if you simplify the problem so you only have a single instrument, that instrument can play multiple notes at the same time. Think of a chord on a guitar or a typical drum beat.
Finally, if you keep a single instrument playing a single note at a time you might come to something trackable without much effort.
And the FFT will help you here. But you'll need to run it over short periods of time - a small time window. In that window you can look at the spectrum it outputs to try to figure out some dominant frequency that is played by the instrument or singer. But it's going to be noisy. You can look at the dominant in each short window and build a map of the dominant frequency across time. This might begin to resemble something like the midi chart you posted. But it'll still need a lot of massaging to end up with a "note structure". There's also the problem of a particular note not being correctly represented by just a frequency. Might be there's secondary frequencies or phase information you need to take into account.
Further study is needed though. Audio processing with good results is not something that can so simply be done. Ditto for image processing, ML etc.

split String into Array by delimiter

I have a json data from API like below
{
"message": "success",
"data": [
{
"id": 1,
"title": "SIPHON",
"description": "<p><span style=\"color: #555555; font-family: Avenir-Regular; background-color: #ffffff;\">Siphon coffee was invented in the 1840s more or less simultaneously by a French housewife and Scottish marine engineer. It’s been refined many times, but a few principles hold true: It produces a delicate, tea-like cup of coffee; it can be quite persnickety; and it is, for our money, one of the coolest brew methods available.</span></p>\r\n<p><span style=\"color: #555555; font-family: Avenir-Regular; background-color: #ffffff;\">Sumber : <a title=\"https://bluebottlecoffee.com/preparation-guides/siphon\" href=\"https://bluebottlecoffee.com/preparation-guides/siphon\" target=\"_blank\" rel=\"noopener\">https://bluebottlecoffee.com/preparation-guides/siphon</a></span></p>",
"slug": "siphon",
"image": "4cf25879ab69702dbe12c244f233f5b4_1551366184.jpg",
"time": "{\"time1\":\"2\",\"time2\":\"3\",\"unit\":\"minute\"}",
"temperature": "{\"temperature\":\"195\",\"unit\":\"\\u00b0F\"}",
"ingredients": "[{\"name\":\"Coffee\",\"amount\":\"25\",\"unit\":\"gr\"},{\"name\":\"Hot Water\",\"amount\":\"300\",\"unit\":\"ml\"}]",
"tools": "[{\"name\":\"Grinder\",\"amount\":\"1\",\"unit\":\"unit\"},{\"name\":\"Scale\",\"amount\":\"1\",\"unit\":\"unit\"},{\"name\":\"Siphon set\",\"amount\":\"1\",\"unit\":\"unit\"},{\"name\":\"Thermometer\",\"amount\":\"1\",\"unit\":\"unit\"},{\"name\":\"Timer\",\"amount\":\"1\",\"unit\":\"unit\"},{\"name\":\"Bamboo paddle\",\"amount\":\"1\",\"unit\":\"unit\"}]",
"steps": "[\"After soaking your filter in a warm water bath for at least five minutes, drop it into the bottom of your siphon\\u2019s top component, or \\u201chopper,\\u201d and hook to the bottom of the hopper\\u2019s glass tubing.\",\"Fill your siphon\\u2019s bottom component, or \\u201cbulb,\\u201d with 300 grams of hot water (about a 12-oz. cup\\u2019s worth).\",\"Insert the hopper, filter and all, into the bulb. You don't have to press too hard; just make sure it's securely and evenly in place. Position the entire assembly above your heat source.\",\"While the water is heating, measure out between 20-25 grams of coffee and grind it just little bit finer than you would for regular drip coffee.\",\"Soon, the water in the bulb will begin boiling and rise up into the hopper. For some physics-related reason we don\\u2019t fully understand, a little bit will stay in the bottom. Don\\u2019t worry about this little bit.\",\"Once the water has moved into the hopper, turn your heat source down so that the water is between 185-195 degrees F.\",\"Add your coffee, and gently (but thoroughly) submerge it with a bamboo paddle or butter knife.\",\"Let the coffee brew, undisturbed, for one minute and 10 seconds.\",\"In one brisk motion, remove your siphon from its heat source and give it ten stirs with a bamboo paddle.\",\"Your coffee should take another minute or so to draw downward and finally rest in the bulb. You'll know it's ready when a dome of grounds has formed at the top of the filter, and when the coffee at the bottom has begun to bubble at approximately the pace and strength of a kitten\\u2019s heartbeat.\\r\\n\\r\\nRemove the hopper and serve. In order to guarantee the most complex cup, give the coffee a few minutes to cool.\"]",
"step_images": "[\"4cf25879ab69702dbe12c244f233f5b4_11551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_21551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_31551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_41551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_51551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_61551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_71551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_81551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_91551366184.jpg\",\"4cf25879ab69702dbe12c244f233f5b4_101551366184.jpg\"]",
"user_id": 1,
"status_id": 1,
"shared_id": 1,
"created_at": "2019-02-28 15:03:04",
"updated_at": "2019-02-28 15:03:04",
"deleted_at": null
}
]
}
What I want to do is split string in steps and store it in array. The delimiter is .\", . Thanks.

You have to first parse the JSON by:
let obj = JSON.parse(yourJsonStringObject)
after that,
let arrayOfSteps = obj.data[0].steps.split(".\")

steps is string so you can parse your output like this:
Let's say if you have stored the above json in variable apiResponse;
Then get the parsed string:
var parsedResponse = JSON.parse(apiResponse["data"][0]["steps"]);

Retrieving Extract from Wikipedia API [duplicate]

This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 6 years ago.
So I get a JSON response which looks like this:
{
"batchcomplete": "",
"query": {
"pages": {
"97646": {
"pageid": 97646,
"ns": 0,
"title": "Die Hard",
"extract": "Die Hard is a 1988 American action film directed by John McTiernan and written by Steven E. de Souza and Jeb Stuart. It follows off-duty New York City Police Department officer John McClane (Bruce Willis) as he takes on a group of highly organized criminals led by Hans Gruber (Alan Rickman), who perform a heist in a Los Angeles skyscraper under the guise of a terrorist attack using hostages, including McClane's wife Holly (Bonnie Bedelia), to keep the police at bay.\nIt is based on Roderick Thorp's 1979 novel Nothing Lasts Forever, the sequel to 1966's The Detective, which was adapted into a 1968 film of the same name that starred Frank Sinatra. Fox was therefore contractually obligated to offer Sinatra the lead role in Die Hard, but he turned it down. The studio then pitched the film to Arnold Schwarzenegger as a sequel to his 1985 action film Commando; he turned it down, as well, and the studio finally and reluctantly gave it to Willis, then known primarily as a comedic television actor.\nMade for $28 million, Die Hard grossed over $140 million theatrically worldwide, and was given a positive reception from critics. The film turned Willis into an action star, became a metonym for an action film in which a lone hero fights overwhelming odds, and has been named one of the best action movies ever made. The film also ranks #29 on Empire magazine's 2008 list of the 500 greatest movies of all time. The film's success spawned the Die Hard franchise, which includes four sequels (Die Hard 2, Die Hard with a Vengeance, Live Free or Die Hard and A Good Day to Die Hard), video games, and a comic book."
}
}
}
}
Here is the link: https://en.wikipedia.org/w/api.php?format=jsonfm&action=query&prop=extracts&exintro=&explaintext=&titles=Die%20Hard
And I want to just get the extract of the page. The trouble is I don't know the pageid until I get the response, and so cannot call the extract.
To get the extract for this example I would have to do:
var data = JSON.parse(this.response);
console.log(suggestionData.query.pages.97646.extract);
So I have tried to get the value of the page id by making it a variable to add into the query like this:
var data = JSON.parse(this.response);
var pageid = [suggestionData.query.pages[0];
console.log(suggestionData.query.pages. + pageid +.extract);
But this hasn't been successeful as the variable pageid comes up as:
"97646": {
"pageid": 97646,
"ns": 0,
"title": "Die Hard",
"extract": "Die Hard is a 1988 American action film directed by John McTiernan and written by Steven E. de Souza and Jeb Stuart. It follows off-duty New York City Police Department officer John McClane (Bruce Willis) as he takes on a group of highly organized criminals led by Hans Gruber (Alan Rickman), who perform a heist in a Los Angeles skyscraper under the guise of a terrorist attack using hostages, including McClane's wife Holly (Bonnie Bedelia), to keep the police at bay.\nIt is based on Roderick Thorp's 1979 novel Nothing Lasts Forever, the sequel to 1966's The Detective, which was adapted into a 1968 film of the same name that starred Frank Sinatra. Fox was therefore contractually obligated to offer Sinatra the lead role in Die Hard, but he turned it down. The studio then pitched the film to Arnold Schwarzenegger as a sequel to his 1985 action film Commando; he turned it down, as well, and the studio finally and reluctantly gave it to Willis, then known primarily as a comedic television actor.\nMade for $28 million, Die Hard grossed over $140 million theatrically worldwide, and was given a positive reception from critics. The film turned Willis into an action star, became a metonym for an action film in which a lone hero fights overwhelming odds, and has been named one of the best action movies ever made. The film also ranks #29 on Empire magazine's 2008 list of the 500 greatest movies of all time. The film's success spawned the Die Hard franchise, which includes four sequels (Die Hard 2, Die Hard with a Vengeance, Live Free or Die Hard and A Good Day to Die Hard), video games, and a comic book."
}
I also want to use javascript and not jQuery etc.

Try this fiddle : https://jsfiddle.net/u9dnm70b/
var response = '{"batchcomplete": "","query": {"pages": {"97646": {"extract": "abcd" }}}}';
var suggestionData = JSON.parse(response);
var pageid = Object.keys(suggestionData.query.pages)[0];
console.log(suggestionData.query.pages[pageid].extract);

You can use Object.keys(jsonObj); to find out keys.
In your case var pageid is a json object. To access value, take a look at this thread (get keys of json-object in JavaScript)
In short answer is
for key in pageid
content= pageid[key]
extract = content.extract

You can extract pageid like this:
var pageid = Object.keys(suggestionData.query.pages)[0];
Then this should work:
console.log(suggestionData.query.pages[pageid].extract");