Develop Reference

How to create an object of arrays in javascript

I have a collection in mongodb with a value o type array with 12 rows in it. See the screenshot:
In my code make an axios request in the componentDidMount and successfully get the respone and values
async componentDidMount() {
const {data: locations} = await axios.get('http://localhost:4000/try1');
this.setState({locations})
console.log(locations)
// Use processCsvData helper to convert csv file into kepler.gl structure {fields, rows}
const data = Processors.processCsvData(nycTrips);
console.log(data)
// Create dataset structure
const dataset = {
data,
info: {
// `info` property are optional, adding an `id` associate with this dataset makes it easier
// to replace it later
id: 'my_data'
}
};
// addDataToMap action to inject dataset into kepler.gl instance
this.props.dispatch(addDataToMap({datasets: dataset}));
}
The problem is I am getting the location object like shown in this screenshot:
but my required output is as shown below:
I need the required output to pass it to my mapping application so that the map markers can be generated.
Please advise how I can create an object in the required format.
Following is my simple get api:
app.get('/try1', (req, res) => {
try1.find()
.then(data => res.json(data))
})
Thanks in advance guys.

mongoosejs - find() using nested objects

question is possibly a duplicate but I haven't found anything that provides an appropriate answer to my issue.
I have an ExpressJS server which is used to provide API requests to retrieve data from a MongoDB database. I am using mongoosejs for the MongoDB connection to query/save data.
I am building a route that will allow me to find all data that matches some user input but I am having trouble when doing the query. I have spent a long while looking online for someone with a similar issue but coming up blank.
I will leave example of the code I have at the minute below.
code for route
// -- return matched data (GET)
router.get('/match', async (req, res) => {
const style_data = req.query.style; // grab url param for style scores ** this comes in as a string **
const character_data = req.query.character; // grab url param for character scores ** this comes in as a string **
// run matcher systems
const style_matches = style_match(style_data);
res.send({
response: 200,
data: style_matches
}); // return data
});
code for the query
// ---(Build the finder)
const fetch_matches_using = async function(body, richness, smoke, sweetness) {
return await WhiskyModel.find({
'attributes.body': body,
'attributes.richness': richness,
'attributes.smoke': smoke,
'attributes.sweetness': sweetness
});
}
// ---(Start match function)---
const style_match = async function (scores_as_string) {
// ---(extract data)---
const body = scores_as_string[0];
const richness = scores_as_string[1];
const smoke = scores_as_string[2];
const sweetness = scores_as_string[3];
const matched = [];
// ---(initialise variables)---
let match_count = matched.length;
let first_run; // -> exact matches
let second_run; // -> +- 1
let third_run; // -> +- 2
let fourth_run; // -> +- 3
// ---(begin db find loop)---
first_run = fetch_matches_using(body, richness, smoke, sweetness).then((result) => {return result});
matched.push(first_run);
// ---(return final data)---
return matched
}
example of db object
{
_id: mongoid,
meta-data: {
pagemd:{some data},
name: whiskyname
age: whiskyage,
price: price
},
attributes: {
body: "3",
richness: "3",
smoke: "0",
sweetness: "3",
some other data ...
}
}
When I hit the route in postman the JSON data looks like:
{
response: 200,
data: {}
}
and when I console.log() out matched from within the style match function after I have pushed the it prints [ Promise(pending) ] which I don't understand.
if I console.log() the result from within the .then() I get an empty array.
I have tried using the populate() method after running the find which does technically work, but instead of only returning data that matches it returns every entry in the collection so I think I am doing something wrong there, but I also don't see why I would need to use the .populate() function to access the nested object.
Am I doing something totally wrong here?
I should also mention that the route and the matching functions are in different files just to try and keep things simple.
Thanks for any answers.

just posting an answer as I seem to have fixed this.
Issue was with my .find() function, needed to pass in the items to search by and then also a call back within the function to return error/data. I'll leave the changed code below.
new function
const fetch_matches_using = async function(body, richness, smoke, sweetness) {
const data = await WhiskyModel.find({
'attributes.body': body,
'attributes.richness': richness,
'attributes.smoke': smoke,
'attributes.sweetness': sweetness
}, (error, data) => { // new ¬
if (error) {
return error;
}
if (data) {
console.log(data)
return data
}
});
return data; //new
}
There is still an issue with sending the found results back to the route but this is a different issue I believe. If its connected I'll edit this answer with the fix for that.

Programmatically create Gatsby pages from API data

This is a similar question to this.
I'm looking for help programmatically creating pages using createPage or createPages and am having trouble - the docs give an example for creating pages from markdown files but not much explanation.
I am using a plugin in plugins\characters\gatsby-node.js to add data from the Rick & Morty API to the GraphQL data layer. My plugin is at the bottom of the question in case it is relevant.
The plugin does add the data successfully as I can see the data in http://localhost:8000/___graphql, and I have successfully managed to use the data in (static) pages.
Where I am lost is that I would like to be able to create a page for each individual character, using the url characters/<characterIdHere> for each of the pages. I am aware that I need to add some logic to my (main or plugins version of....?) gatsby-node.js file, but this is the part I am stuck on. I do not know what I need to put into the gatsby-node.js file. The examples I can find all use json or markdown files and I would like to use data that I have pulled in (from an API) to gatsby's data layer. I have obviously researched this for a few hours and played around with it before asking, but not had any luck.
The component on the pages I would like to create should look something like this:
const CharactersViewSingle = ({ character}) => {
return (
<div>
<Helmet>
<title>{character.name && character.name}</title>
</Helmet>
<NavBar />
<CharactersViewBox character={character} width={300} height={520} />
</div>
)
}
The above code is taken from what the component returned when I was using create-react-app.
The graphQL query (which obviously reflects the structure of the data I would like to use) I use to get the data on other (static) pages looks like this:
export const query = graphql`
query CharactersQuery {
allCharacters(limit: 5) {
edges {
node {
id
name
status
gender
image
}
}
}
}
`
Plugin code:
const axios = require("axios")
exports.sourceNodes = async ({
actions,
createNodeId,
createContentDigest,
}) => {
const { createNode } = actions
const integerList = (start, length) =>
Array.from({ length: length }, (v, k) => k + start)
const rickMortyURL = `https://rickandmortyapi.com/api/character/${integerList(
1,
493
)}`
const rickMorty = await axios.get(rickMortyURL)
const query = await axios.get(rickMortyURL)
rickMorty.data.forEach(character => {
const nodeContent = JSON.stringify(character)
const nodeMeta = {
id: character.id.toString(),
//id: createNodeId(`char-data-${character.id}`),
parent: null,
children: [],
internal: {
type: `Characters`,
content: nodeContent,
contentDigest: createContentDigest(character),
},
}
const node = Object.assign({}, character, nodeMeta)
createNode(node)
})
}

Gatsby's createPages API is what you might be looking for.
I used it to create multiple pages like blog1, blog2, blog3 etc...
In the same way, you can create multiple pages for your characters.
Since you mentioned you have a graphql call to get your characters using
const pages = await graphql(`
query CharactersQuery {
allCharacters(limit: 5) {
edges {
node {
id
name
status
gender
image
}
}
}
}
`)
The above graphql call returns results in pages.data.allCharacters.edges
Now you can iterate them using foreach and use createPage to create the pages.
Below is complete mock code you might need to add in your gatsby-node.js file
const path = require('path');
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const templateOfYourCharacterPage = path.resolve(`src/templates/exampleTemplateFile.jsx`)
const pages = await graphql(`
query CharactersQuery {
allCharacters(limit: 5) {
edges {
node {
id
name
status
gender
image
}
}
}
}
`)
let characters = pages.data.allCharacters.edges;
characters.forEach(edge => {
createPage({
path: `/${edge.node.id}`,
component: templateOfYourCharacterPage,
context: {id: edge.node.uid, name: edge.node.name } // This is to pass data as props to your component.
})
})
}

How to clone a node to another path based on a reference value from the initial path on Google Cloud Functions?

I am trying clone an "original" node's data (as soon as I create the data) to a path that is based on the original node's path.
This is my data structure:
root: {
doors: {
111111111111: {
MACaddress: "111111111111",
inRoom: "-LBMH_8KHf_N9CvLqhzU", // I will need this value for the clone's path
ins: {
// I am creating several "key: pair"s here, something like:
1525104151100: true,
1525104151183: true,
}
}
},
rooms: {
-LBMH_8KHf_N9CvLqhzU: {
ins: {
// I want the function to clone the same data here:
1525104151100: true,
1525104151183: true,
}
}
}
My cloud function is now like this:
exports.updateRoom = functions.database.ref('/doors/{MACaddress}/ins').onWrite((change, context) => {
const beforeData = change.before.val(); // data before the write
const afterData = change.after.val(); // data after the write
const roomPushKey = change.before.ref.parent.child('/inRoom');
console.log(roomPushKey); // this is retrieving all the info about the ref "inRoom" but not its value...
Question 1) How can I get to this ref/node's value?
My code goes on by trying to get the value like this.
roomPushKey.once('child_added').then(function(dataSnapshot) {
let snapVal = dataSnapshot.val();
console.log(snapVal);
});
Question 2 (which I think is basically question 1 rephrased): How can I get the snapVal outside the then. method's scope?
return change.after.ref.parent.parent.parent.child('/rooms')
.child(snapVal).child('/ins').set(afterData);
// snapVal should go above
});
Error message: ReferenceError: snapVal is not defined

The following should work.
const admin = require("firebase-admin");
....
....
exports.updateRoom = functions.database.ref('/doors/{MACaddress}').onWrite((change, context) => {
const afterData = change.after.val(); // data after the write
const roomPushKey = afterData.inRoom;
const ins = afterData.ins;
const updates = {};
updates['/rooms/' + roomPushKey] = ins;
return admin.database().ref().update(updates);
}).catch(error => {
console.log(error);
//+ other rerror treatment if necessary
});
Here are some explanations:
You get the roomPushKey by reading the "data after the write" as an object: roomPushKey = afterData.inRoom. You don't need to do roomPushKey.once('child_added').then()
Once you have the roomPushKey, you create a new child node in the rooms node by using update() and creating an object with square brackets notation which allow you to assign the id of the node (i.e. roomPushKey).
Note that you could also do:
return admin.database().ref('/rooms/' + roomPushKey).set(ins);
Note also that you have to import firebase-admin in order to be able to do return admin.database().ref()...
Finally, I would suggest that you have a look at the three following videos from the Firebase team: youtube.com/watch?v=7IkUgCLr5oA&t=517s & youtube.com/watch?v=652XeeKNHSk&t=27s & youtube.com/watch?v=d9GrysWH1Lc. A must for anyone starting coding for Cloud Functions.

React Native - How to save map using AsyncStorage

I try to save user inputs as a JS map using AsyncStorage in my React Native app.
It shows no errors when saving, but I got "[object Map]" when I tried to get the data back.
There is the simplified version of my user map. the actual User object has way more properties than this, but the ID is always same as the map key.
const dataKey = 'user-data';
let data = new Map();
data.set(1, { name: 'John', id: 1, title: 'Mr.' })
data.set(2, { name: 'Johanna', id: 2, title: 'Miss.' })
There is the code for saving the data.
async saveDate = (dataKey, data) => {
try {
await AsyncStorage.setItem(dataKey, data.toString());
} catch (err) {
console.log(err);
}
}
There will be more than 200 users in this map.
Any idea how to save complex data structure in react native?

Instead of converting your data to a string you need to save it as JSON. Change
await AsyncStorage.setItem(dataKey, data.toString());
to
await AsyncStorage.setItem(dataKey, JSON.stringify(data));
See this link to the official documents for more details: https://facebook.github.io/react-native/docs/asyncstorage.html#mergeitem

Like one of the other answers states, you need to save the data as JSON.
However, with you won't be able to simply convert data to JSON. Instead you will need to spread the array entries of Map and pass that to JSON.stringify().
So change
await AsyncStorage.setItem(dataKey, data.toString());
to
await AsyncStorage.setItem(dataKey, JSON.stringify([...data]));
And then when you want to get the item from Async you will need to convert it back to Map, i.e.
const jsonData = AsyncStorage.getItem(dataKey)
const mapData = new Map(jsonData)

The provided answers will not quite work. You can't create the new Map after reading back json without parsing first. This works:
saveData = async () => {
const dataKey = 'user-data';
let data = new Map();
data.set(1, { name: 'John', id: 1, title: 'Mr.' })
data.set(2, { name: 'Johanna', id: 2, title: 'Miss.' })
try {
await AsyncStorage.setItem(dataKey, JSON.stringify([...data]));
} catch (err) {
console.log(err);
}
const jsonData = await AsyncStorage.getItem(dataKey)
const parseData = JSON.parse(jsonData)
const mapData = new Map(parseData)
console.log(mapData);
//get a list of IDs
console.log(Array.from(mapData.keys()));
}
For 200 values this is a lot of overhead. I would consider using sprintf/sscanf libraries and just store a string, for instance one row of data per line.
This will only work if every row in the table has the same amount of elements and you don't change the layout. Of course it would all be on you to convert the string back to objects so you can recreate the Map. Just a thought!