Get keys and values ​from object from JSON url in javascript - javascript

I have this const url that I have to get 4 keys and values of "current": "dt":1643884851, "temp":8.11 and in "weather" I have to get "description":"few clouds" and "icon":"02d".
After that, I have to get the same keys and values of all objects in daily.
How can I do this?
const url = '{"lat":39.7436,"lon":-8.8071,"timezone":"Europe/Lisbon","timezone_offset":0,"current":{"dt":1643884851,"sunrise":1643874091,"sunset":1643910991,"temp":8.11,"feels_like":6.94,"pressure":1025,"humidity":87,"dew_point":6.08,"uvi":1.63,"clouds":20,"visibility":7000,"wind_speed":2.06,"wind_deg":160,"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}]},"daily":[{"dt":1643889600,"sunrise":1643874091,"sunset":1643910991,"moonrise":1643880300,"moonset":1643920800,"moon_phase":0.08,"temp":{"day":9.56,"min":8.11,"max":14.8,"night":10.29,"eve":11.42,"morn":8.61},"feels_like":{"day":9.15,"night":9.8,"eve":10.78,"morn":8.61},"pressure":1025,"humidity":81,"dew_point":6.47,"wind_speed":2.51,"wind_deg":279,"wind_gust":2.99,"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}],"clouds":36,"pop":0,"uvi":2.12},{"dt":1643976000,"sunrise":1643960432,"sunset":1643997463,"moonrise":1643968320,"moonset":1644011220,"moon_phase":0.12,"temp":{"day":14.02,"min":9.3,"max":14.86,"night":9.66,"eve":11.67,"morn":9.3},"feels_like":{"day":13.17,"night":8.63,"eve":10.96,"morn":9.3},"pressure":1026,"humidity":65,"dew_point":7.18,"wind_speed":3.71,"wind_deg":335,"wind_gust":5.97,"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":100,"pop":0,"uvi":1.99},{"dt":1644062400,"sunrise":1644046772,"sunset":1644083936,"moonrise":1644056160,"moonset":1644101520,"moon_phase":0.15,"temp":{"day":14.98,"min":8.24,"max":16.46,"night":9.23,"eve":10.87,"morn":8.6},"feels_like":{"day":14.1,"night":8.89,"eve":10.23,"morn":8.6},"pressure":1026,"humidity":60,"dew_point":6.78,"wind_speed":2.88,"wind_deg":336,"wind_gust":4.08,"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"clouds":83,"pop":0,"uvi":2.57},{"dt":1644148800,"sunrise":1644133110,"sunset":1644170408,"moonrise":1644143940,"moonset":1644191700,"moon_phase":0.18,"temp":{"day":17.47,"min":8.59,"max":19.18,"night":11.06,"eve":13.31,"morn":8.59},"feels_like":{"day":16.4,"night":9.81,"eve":12.34,"morn":7.67},"pressure":1028,"humidity":43,"dew_point":4.4,"wind_speed":2.22,"wind_deg":18,"wind_gust":3.79,"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":1,"pop":0,"uvi":2.62},{"dt":1644235200,"sunrise":1644219446,"sunset":1644256880,"moonrise":1644231840,"moonset":0,"moon_phase":0.22,"temp":{"day":18.22,"min":8.77,"max":19.22,"night":10.85,"eve":12.93,"morn":8.77},"feels_like":{"day":16.93,"night":9.3,"eve":11.56,"morn":7.52},"pressure":1028,"humidity":32,"dew_point":0.71,"wind_speed":3.49,"wind_deg":107,"wind_gust":5.75,"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":3,"pop":0,"uvi":2.59},{"dt":1644321600,"sunrise":1644305782,"sunset":1644343352,"moonrise":1644319800,"moonset":1644281820,"moon_phase":0.25,"temp":{"day":17.33,"min":8.84,"max":18.69,"night":11.51,"eve":13.43,"morn":8.84},"feels_like":{"day":16.14,"night":10.26,"eve":12.32,"morn":7.32},"pressure":1026,"humidity":39,"dew_point":2.71,"wind_speed":2.68,"wind_deg":124,"wind_gust":6.18,"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":0,"pop":0,"uvi":3},{"dt":1644408000,"sunrise":1644392115,"sunset":1644429824,"moonrise":1644407940,"moonset":1644371940,"moon_phase":0.28,"temp":{"day":17.75,"min":10.34,"max":18.5,"night":14.17,"eve":15.25,"morn":10.34},"feels_like":{"day":16.7,"night":13.18,"eve":14.35,"morn":9.02},"pressure":1027,"humidity":43,"dew_point":4.69,"wind_speed":3.26,"wind_deg":133,"wind_gust":6.17,"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":88,"pop":0,"uvi":3},{"dt":1644494400,"sunrise":1644478447,"sunset":1644516296,"moonrise":1644496380,"moonset":1644461940,"moon_phase":0.31,"temp":{"day":16.66,"min":13.48,"max":16.84,"night":15.49,"eve":16.01,"morn":13.52},"feels_like":{"day":15.77,"night":14.82,"eve":15.31,"morn":12.49},"pressure":1026,"humidity":53,"dew_point":6.71,"wind_speed":5.27,"wind_deg":115,"wind_gust":10.08,"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"clouds":100,"pop":0.36,"rain":0.43,"uvi":3}]}'
I tryed this, but doesn't work
const url2 = JSON.parse(url)
let result = url2.current.map(({ dt, temp, weather: [{ description, icon }] }) => ({ dt, day }));
These two values I get doing this:
let day = url2.current.dt
let temp = url2.current.temp
console.log(day, temp)

I think this is what you want to achieve, result is an array of dt, temp, description and icon from current and daily objects
const str = '{"lat":39.7436,"lon":-8.8071,"timezone":"Europe/Lisbon","timezone_offset":0,"current":{"dt":1643884851,"sunrise":1643874091,"sunset":1643910991,"temp":8.11,"feels_like":6.94,"pressure":1025,"humidity":87,"dew_point":6.08,"uvi":1.63,"clouds":20,"visibility":7000,"wind_speed":2.06,"wind_deg":160,"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}]},"daily":[{"dt":1643889600,"sunrise":1643874091,"sunset":1643910991,"moonrise":1643880300,"moonset":1643920800,"moon_phase":0.08,"temp":{"day":9.56,"min":8.11,"max":14.8,"night":10.29,"eve":11.42,"morn":8.61},"feels_like":{"day":9.15,"night":9.8,"eve":10.78,"morn":8.61},"pressure":1025,"humidity":81,"dew_point":6.47,"wind_speed":2.51,"wind_deg":279,"wind_gust":2.99,"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}],"clouds":36,"pop":0,"uvi":2.12},{"dt":1643976000,"sunrise":1643960432,"sunset":1643997463,"moonrise":1643968320,"moonset":1644011220,"moon_phase":0.12,"temp":{"day":14.02,"min":9.3,"max":14.86,"night":9.66,"eve":11.67,"morn":9.3},"feels_like":{"day":13.17,"night":8.63,"eve":10.96,"morn":9.3},"pressure":1026,"humidity":65,"dew_point":7.18,"wind_speed":3.71,"wind_deg":335,"wind_gust":5.97,"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":100,"pop":0,"uvi":1.99},{"dt":1644062400,"sunrise":1644046772,"sunset":1644083936,"moonrise":1644056160,"moonset":1644101520,"moon_phase":0.15,"temp":{"day":14.98,"min":8.24,"max":16.46,"night":9.23,"eve":10.87,"morn":8.6},"feels_like":{"day":14.1,"night":8.89,"eve":10.23,"morn":8.6},"pressure":1026,"humidity":60,"dew_point":6.78,"wind_speed":2.88,"wind_deg":336,"wind_gust":4.08,"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"clouds":83,"pop":0,"uvi":2.57},{"dt":1644148800,"sunrise":1644133110,"sunset":1644170408,"moonrise":1644143940,"moonset":1644191700,"moon_phase":0.18,"temp":{"day":17.47,"min":8.59,"max":19.18,"night":11.06,"eve":13.31,"morn":8.59},"feels_like":{"day":16.4,"night":9.81,"eve":12.34,"morn":7.67},"pressure":1028,"humidity":43,"dew_point":4.4,"wind_speed":2.22,"wind_deg":18,"wind_gust":3.79,"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":1,"pop":0,"uvi":2.62},{"dt":1644235200,"sunrise":1644219446,"sunset":1644256880,"moonrise":1644231840,"moonset":0,"moon_phase":0.22,"temp":{"day":18.22,"min":8.77,"max":19.22,"night":10.85,"eve":12.93,"morn":8.77},"feels_like":{"day":16.93,"night":9.3,"eve":11.56,"morn":7.52},"pressure":1028,"humidity":32,"dew_point":0.71,"wind_speed":3.49,"wind_deg":107,"wind_gust":5.75,"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":3,"pop":0,"uvi":2.59},{"dt":1644321600,"sunrise":1644305782,"sunset":1644343352,"moonrise":1644319800,"moonset":1644281820,"moon_phase":0.25,"temp":{"day":17.33,"min":8.84,"max":18.69,"night":11.51,"eve":13.43,"morn":8.84},"feels_like":{"day":16.14,"night":10.26,"eve":12.32,"morn":7.32},"pressure":1026,"humidity":39,"dew_point":2.71,"wind_speed":2.68,"wind_deg":124,"wind_gust":6.18,"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":0,"pop":0,"uvi":3},{"dt":1644408000,"sunrise":1644392115,"sunset":1644429824,"moonrise":1644407940,"moonset":1644371940,"moon_phase":0.28,"temp":{"day":17.75,"min":10.34,"max":18.5,"night":14.17,"eve":15.25,"morn":10.34},"feels_like":{"day":16.7,"night":13.18,"eve":14.35,"morn":9.02},"pressure":1027,"humidity":43,"dew_point":4.69,"wind_speed":3.26,"wind_deg":133,"wind_gust":6.17,"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":88,"pop":0,"uvi":3},{"dt":1644494400,"sunrise":1644478447,"sunset":1644516296,"moonrise":1644496380,"moonset":1644461940,"moon_phase":0.31,"temp":{"day":16.66,"min":13.48,"max":16.84,"night":15.49,"eve":16.01,"morn":13.52},"feels_like":{"day":15.77,"night":14.82,"eve":15.31,"morn":12.49},"pressure":1026,"humidity":53,"dew_point":6.71,"wind_speed":5.27,"wind_deg":115,"wind_gust":10.08,"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"clouds":100,"pop":0.36,"rain":0.43,"uvi":3}]}';
const obj = JSON.parse(str)
const getData = ({ dt, temp, weather: [{ description, icon }] }) => {
return {dt, temp, description, icon};
}
const {current, daily} = obj;
const result = [getData(current)]
daily.forEach(obj=>result.push(getData(obj)));
console.log(result)

Your error is that you define a variable result where you try to map the contents to something but map is only used to loop through arrays and the url2.current is not an array.
The way to get your values is by using the keys for all your values except the weather which is in fact an array.
So for most keys you can extract them like this:
const url2 = JSON.parse(url);
const day = url2.current.dt;
I don't know what the expected output for weather is but if you try to output everything in a string that contains html you could do something like the following:
const weather = url2.current.weather.map((w) => `<span>${w.icon}</span>\n<p>${w.description}</p>`).join("\n");
You can replace the HTML tags with what works for you and just output weather.

Related

How to store data retrieved from the server into an array with JavaScript?

Can someone tell me how can I store the values of the CSV file into an array that I am retrieving from the web server.
Data example:
Time2,Price,Size
0.0,20998.0,69
0.0,20999.0,18042
0.0,21001.0,14783
0.0,21003.0,100
Suppose I have the following scenario shown below:
var url1 = 'path for CSV file'
$.get(url1, function(data) {
// data param contains all the data that I retrieved from the csv
});
using the above example, how can I store my data into an array so the end result looks like the following:
A very straight forward approach:
Split into lines on \n
Split each line ,
const csv = `Time2,Price,Size
0.0,20998.0,69
0.0,20999.0,18042
0.0,21001.0,14783
0.0,21003.0,100`;
const result = csv.split("\n").map(l=>l.split(','));
console.log(result);
Use a reducer (Array.reduce):
// create an array of arrays
const csvLines = `Time2,Price,Size
0.0,20998.0,69
0.0,20999.0,18042
0.0,21001.0,14783
0.0,21003.0,100`
.split("\n")
.map(v => v.split(","));
// bonus: to array of objects
let headers = csvLines.shift();
const fromCsv = csvLines.reduce( (acc, val) => [...acc, {
[headers[0]]: parseFloat(val[0]),
[headers[1]]: parseFloat(val[1]),
[headers[2]]: parseFloat(val[2]) } ], []);
console.log(fromCsv);

Extract unique values of a key in a object - Javascript/d3 legend

Consider the following simplified csv file
x,y,names
1,2,group1
3,2,group2
4,3,group1
7,8,group3
3,5,group2
which I am reading in with d3.csv and afterwards apply a some function on it
d3.csv('file_name.csv').then(data => {
render(dataset)
});
Could someone explain to me how I could extract the unique strings in the category names and store them in a list
---> iam_a_list = [group1, group2, group3]
The elements in this list will later be used as text for a legend in a plot.
You can use a set to get unique results. Just loop over your data and make an array of all the names. Then make a set, which will remove all the duplicates and give you a unique list.
Using .map() and d3.set().values()
let uniqueListOfNames= []
d3.csv('file_name.csv').then(data => {
// listOfNames = ['group1', 'group2', 'group1', 'group3', 'group2']
const listOfNames = data.map(row => row.names)
// uniqueListOfNames = ['group1', 'group2', 'group3']
uniqueListOfNames = d3.set(listOfNames).values()
});
Using a loop.
let uniqueListOfNames= []
d3.csv('file_name.csv').then(data => {
const listOfNames= []
for (const row of data) {
listOfNames.push(row.names)
}
// listOfNames= ['group1', 'group2', 'group1', 'group3', 'group2']
// uniqueListOfNames = ['group1', 'group2', 'group3']
uniqueListOfNames = d3.set(listOfNames).values()
});

Get max top 10 element in array in javascript

I have an array something like that and I want to sort by population property.
const countries = [
{"name":"Burkina Faso",population:19034397},
{"name":"Burundi",population:10114505}
...
]
Then I want to get top max 10 object with name and property into something like that
const data = {
labels=[<country names>]
datasets:[
{data:[<population numbers>]}
]
}
I tried some code
const sortItem = () => {
let arr =[]
let values = dataSource.map(item => arr.push({name:item.name,population:item.population}))
let topValues = values.sort((a,b) => b.population-a.population);
console.log(topValues) // output 1,2,3,4,5...
}
But I can't get what I want. How can I achieve the solution ?

Get cypress database query output objects in to variables

I have a cypress test which has been set up with mysql node module. When I run bellow mentioned test Its giving output as follows.
const executeQuery = (query) => {
cy.task('DBQuery', query).then(function (recordset) {
var rec = recordset
cy.log(rec)
})
}
Query:
select *
from Users
where email = 'sheeranlymited#lymitedtest.com'
OUTPUT: log [Object{23}]
Query:
select firstname
from Users
where email = 'sheeranlymited#lymitedtest.com'
OUTPUT: log [{firstname: Edward}]
instead of cy.log(rec) I want to get the output of 23 columns to assign in to different variables based on the column name.
Appreciate if someone can help me to resolve this...
You can use Object.values in js to retrieve values from your object
Let's say you need to extract the value of the 3rd column, so your code will look like,
cy.task('DBQuery', query).then(function (recordset) {
var rec = recordset
const results = Object.values(rec[0])
// results[index of the column] will output the results
cy.log(results[3])
})
We can do a small modification to make your task easier,
cy.task('DBQuery', query).then(function (recordset) {
var rec = recordset
const Values = Object.values(rec[0]);
const keys = Object.keys(rec[0]);
let result = {};
let index = 0;
keys.forEach(key => {
result[keys[index]] = Values[index];
i++
})
//result.firstName will give you your results
cy.log(result.firstName);
})
In this way, we are generating key-value pairs having the key as the column name. So you can use the column name to find the value.
Hope this helps.
cheers.

Cheerio Not Parsing HTML Correctly

I've got an array of rows that I've parsed out of a table from html, stored in a list. Each of the rows in the list is a string that looks (something) like this:
["<td headers="DOCUMENT" class="t14data"><a target="6690-Exhibit-C-20190611-1" href="http://www.fara.gov/docs/6690-Exhibit-C-20190611-1.pdf" class="doj-analytics-processed"><span style="color:blue">Click Here </span></a></td><td headers="REGISTRATIONNUMBER" class="t14data">6690</td><td headers="REGISTRANTNAME" class="t14data">SKDKnickerbocker LLC</td><td headers="DOCUMENTTYPE" class="t14data">Exhibit C</td><td headers="STAMPED/RECEIVEDDATE" class="t14data">06/11/2019</td>","<td headers="DOCUMENT" class="t14data"><a target="5334-Supplemental-Statement-20190611-30" href="http://www.fara.gov/docs/5334-Supplemental-Statement-20190611-30.pdf" class="doj-analytics-processed"><span style="color:blue">Click Here </span></a></td><td headers="REGISTRATIONNUMBER" class="t14data">5334</td><td headers="REGISTRANTNAME" class="t14data">Commonwealth of Dominica Maritime Registry, Inc.</td><td headers="DOCUMENTTYPE" class="t14data">Supplemental Statement</td><td headers="STAMPED/RECEIVEDDATE" class="t14data">06/11/2019</td>"]
The code is pulled from the page with the following page.evaluate function using puppeteer.
I'd like to then parse this code with cheerio, which I find to be simpler and more understandable. However, when I pass each of the strings of html into cheerio, it fails to parse them correctly. Here's the current function I'm using:
let data = res.map((tr) => {
let $ = cheerio.load(tr);
const link = $("a").attr("href");
const number = $("td[headers='REGISTRATIONNUMBER']").text();
const name = $("td[headers='REGISTRANTNAME']").text();
const type = $("td[headers='DOCUMENTTYPE']").text();
const date = $("td[headers='STAMPED/RECEIVEDDATE']").text();
return { link, number, name, type, date };
});
For some reason, only the "a" tag is working correctly for each row. Meaning, the "link" variable is correctly defined, but none of the other ones are. When I use $("*") to return a list of what should be all of the td's, it returns an unusual node list:
What am I doing wrong, and how can I gain access to the td's with the various headers, and their text content? Thanks!
It usually looks more like this:
let data = res.map((i, tr) => {
const link = $(tr).find("a").attr("href");
const number = $(tr).find("td[headers='REGISTRATIONNUMBER']").text();
const name = $(tr).find("td[headers='REGISTRANTNAME']").text();
const type = $(tr).find("td[headers='DOCUMENTTYPE']").text();
const date = $(tr).find("td[headers='STAMPED/RECEIVEDDATE']").text();
return { link, number, name, type, date };
}).get();
Keep in mind that cheerio map has the arguments reversed from js map.
I found the solution. I'm simply returning the full html through puppeteer instead of trying to get individual rows, and then using the above suggestion (from #pguardiario) to parse the text:
const res = await page.evaluate(() => {
return document.body.innerHTML;
});
let $ = cheerio.load(res);
let trs = $(".t14Standard tbody tr.highlight-row");
let data = trs.map((i, tr) => {
const link = $(tr).find("a").attr("href");
const number = $(tr).find("td[headers='REGISTRATIONNUMBER']").text();
const registrant = $(tr).find("td[headers='REGISTRANTNAME']").text();
const type = $(tr).find("td[headers='DOCUMENTTYPE']").text();
const date = moment($(tr).find("td[headers='STAMPED/RECEIVEDDATE']").text()).valueOf().toString();
return { link, number, registrant, type, date };
});

Categories

Resources