Develop Reference

How to map this data to reach data property?

I'm trying to clean up the data received from firebase to view them in a FlatList. How can I clean my data to a simple array where I can iterate in FlatList?
EDIT! There are many other coins in my database that I want to pull into the FlatList. So the solution that I'm looking for is to view all these coins in my FlatList and then show their data such as price, market_cap etc.
My data is currently stored in a state and looks like this.
favoriteList data is:
Object {
"bitcoin": Object {
"-MahI1hCDr0CJ_1T_umy": Object {
"data": Object {
"ath": 54205,
"ath_change_percentage": -40.72194,
"ath_date": "2021-04-14T11:54:46.763Z",
"atl": 51.3,
"atl_change_percentage": 62536.71794,
"atl_date": "2013-07-05T00:00:00.000Z",
"circulating_supply": 18719656,
"current_price": 32164,
"fully_diluted_valuation": 674764316483,
"high_24h": 33004,
"id": "bitcoin",
"image": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
"last_updated": "2021-05-27T10:07:02.525Z",
"low_24h": 30652,
"market_cap": 601493137412,
"market_cap_change_24h": -15118857257.119507,
"market_cap_change_percentage_24h": -2.45192,
"market_cap_rank": 1,
"max_supply": 21000000,
"name": "Bitcoin",
"price_change_24h": -641.85835686,
"price_change_percentage_1h_in_currency": 0.25769270475453127,
"price_change_percentage_24h": -1.95655,
"price_change_percentage_24h_in_currency": -1.9565521832416402,
"price_change_percentage_7d_in_currency": 4.978932125496787,
"symbol": "btc",
"total_supply": 21000000,
"total_volume": 36947814578,
},
},
},
}
The firebase structure is like this where the data above is fetched from:

Object.keys(favourite.bitcoin)[idx] This line gives you the name of key at index 0 into object favourite.bitcoin.
So the variable key will be your firebase key.
let favourite = {
bitcoin: {
"-MahI1hCDr0CJ_1T_umy": {
data: {
ath: 54205,
ath_change_percentage: -40.72194,
ath_date: "2021-04-14T11:54:46.763Z",
atl: 51.3,
atl_change_percentage: 62536.71794,
atl_date: "2013-07-05T00:00:00.000Z",
circulating_supply: 18719656,
current_price: 32164,
fully_diluted_valuation: 674764316483,
high_24h: 33004,
id: "bitcoin",
image:
"https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
last_updated: "2021-05-27T10:07:02.525Z",
low_24h: 30652,
market_cap: 601493137412,
market_cap_change_24h: -15118857257.119507,
market_cap_change_percentage_24h: -2.45192,
market_cap_rank: 1,
max_supply: 21000000,
name: "Bitcoin",
price_change_24h: -641.85835686,
price_change_percentage_1h_in_currency: 0.25769270475453127,
price_change_percentage_24h: -1.95655,
price_change_percentage_24h_in_currency: -1.9565521832416402,
price_change_percentage_7d_in_currency: 4.978932125496787,
symbol: "btc",
total_supply: 21000000,
total_volume: 36947814578,
},
},
},
};
let idx = 0; //key at index 0
let key = Object.keys(favourite.bitcoin)[idx];
console.log(key)
let data = favourite.bitcoin[key].data;
console.log(data)
Please let me know if it's works or not !

To get the data from your database, you need to query its parent reference. This will allow you to do things like "find all entries under /favorites/bitcoin that have a current price of over 30000".
Because you want to simply query for all the data under /favorites/bitcoin in your question, you would do the following:
Get a reference for /favorites/bitcoin
Get the data under /favorites/bitcoin
Iterate over the data, and assemble an array
Use this new array for your FlatList
These steps can be made into the following function:
function getDataForFlatlistUnder(databasePath) {
return firebase.database()
.ref(databasePath)
// consider using .limitToFirst(10) or similar queries
.once("value")
.then((listSnapshot) => {
// listSnapshot contains all the data under `${databasePath}`
const arrayOfDataObjects = [];
// For each entry under `listSnapshot`, pull its data into the array
// Note: this is a DataSnapshot#forEach() NOT Array#forEach()
listSnapshot.forEach((entrySnapshot) => {
// entrySnapshot contains all the data under `${databasePath}/${entrySnapshot.key}`
const data = entrySnapshot.child("data").val();
// data is your data object
// i.e. { ath, ath_change_percentage, ath_date, atl, ... }
// add the key into the data for use with the FlatList
data._key = entrySnapshot.key;
arrayOfDataObjects.push(data);
});
return arrayOfDataObjects;
});
}
Which you can use in your component like so:
function renderItem((dataObject) => {
// TODO: render data in dataObject
});
function MyComponent() {
const [listData, setListData] = useState();
const [listDataError, setListDataError] = useState(null);
const [listDataLoading, setListDataLoading] = useState(true);
useEffect(() => {
const disposed = false;
getDataForFlatlistUnder("favorites/bitcoin")
.then((arrayOfDataObjects) => {
if (disposed) return; // component was removed already, do nothing
setListData(arrayOfDataObjects);
setListDataLoading(false);
})
.catch((err) => {
if (disposed) return; // component was removed already, do nothing
// optionally empty data: setListData([]);
setListDataError(err);
setListDataLoading(false);
});
// return a cleanup function to prevent the callbacks above
// trying to update the state of a dead component
return () => disposed = true;
}, []); // <-- run this code once when component is mounted and dispose when unmounted
if (listDataLoading)
return null; // or show loading spinner/throbber/etc
if (listDataError !== null) {
return (
<Text>
{"Error: " + listDataError.message}
</Text>
);
}
return (
<FlatList
data={listData}
renderItem={renderItem}
keyExtractor={item => item._key} // use the key we inserted earlier
/>
);
}
Note: This code is for a one-off grab of the data, if you want realtime updates, you would modify it to use .on("value", callback) instead. Make sure to use .off("value", callback) in the unsubscribe function of the useEffect call to clean it up properly.

It is interesting to see how programmers interpret questions. Or perhaps how beginners fail to articulate clearly what they want to achieve. Here is the answer:
const formatData = (data) => {
let arr = [];
let test = Object.values(data).forEach((o) => {
Object.values(o).forEach((a) =>
Object.values(a).forEach((b) => arr.push(b))
);
setFormattedData(arr);
});

Cannot assign to read only property with .map(). Recoil with NextJs

before I use only nextJs everything is good to go but after I try to use recoil and I try to assign new value to array object by using .map() but the error show up
Cannot assign to read only property
Here is my example Array object
const [allData, setAllData] = useRecoilState(
allDataStatte
);
Here is example state AllData
const allData = [
{
id:1,
value:"test1"
},
{
id:2,
value:"test2"
}
]
Here is my code
const edit = (listId, value) => {
allData.map((data) => {
if (data.id === listId) {
data.value = value;
}
});
};
example I want to call edit funcion like this
edit(1,"newTitle1")
I want my new allData output look like this
const data = [
{
id:1,
value:"newTitle1"
},
{
id:2,
value:"test2"
}
]
I have read someone told that I have to use .slice() to create new object but still not use how to use slice with an array object

Here is what you need to do,
const [allData, setAllData] = useRecoilState(allDataState);
const edit = (listId : number, value : string) => {
let newAllData = allData.map((data) => {
let newData = {...data};
if (data.id === listId) {
newData.value = value;
}
return newData;
});
setAllData (newAllData);
};
edit(1, 'new value 1');
Noticed, newAllData is a new array. Also newData is a new object constructed from data.

it's because of atom in recoil you have to re create object array and then setState again by using _clondeep or slice

Setting react state with nested objects from JSON fetch call

I am fetching recipes from a recipe app and id like to insert certain objects from the returning json result onto my state with setstate. I know how to do one of these but im having trouble figuring out how to map the results on to my state. Can anyone help me on this?
The code for the issue is here. I have changed my api key and code for security
componentDidMount() {
let url = `https://api.edamam.com/search?q=banana&app_id=chjhvje1&app_key=b67djhhvhvhaef`;
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let recipeUIState = [ ...this.state.RecipeUI ];
recipeUIState[0].title = data.hits[0].recipe.label;
recipeUIState[0].thumbnail = data.hits[0].recipe.image;
recipeUIState[0].href = data.hits[0].recipe.url;
this.setState({ RecipeUI: recipeUIState });
console.log(data.hits[0].recipe);
});
}
State is as follows-
export default class RecipeUI extends Component {
constructor(props) {
super(props);
this.state = {
food: '',
RecipeUI: [ { title: '' } ]
// thumbnail: '', ingredients: '', href: ''
};
this.search = this.search.bind(this);
}
reponse from API is attached as image

data.hits.forEach(({ recipe }) => {
// We get the original state every before it's updated in the iteration
const recipeUIState = [...this.state.RecipeUI];
// Check if there's an existing recipe with the same title
const idx = recipeUIState.findIndex(r => r.title === recipe.title);
// Helper object to create a recipe from the current iteration
const currentRecipe = {
title: recipe.label,
thumbnail: recipe.image,
href: recipe.url
};
// `findIndex` returns -1 if no entry was found, otherwise it returns the index
if (idx < 0) {
// No existing recipe was found, append the new recipe to the original state
return this.setState({
recipeUIState: [...recipeUIState, ...currentRecipe]
});
}
// Recipe already existed, create a new recipe by overwriting
// the object at the index we found earlier
const newRecipeUIState = {
...recipeUIState[idx],
...currentRecipe
};
// Replace the recipe at found index
recipeUIState[idx] = newRecipeUIState;
this.setState({ recipeUIState });
});
Something like this? could probably be simplified using Array#reduce but I don't feel too comfortable using it.

Infinite functions calls like 'string'.replace().replace()

I'm not really sure how to explain so I will start with the output.
I need to return this:
{
replies:
[
{ type: 'text', content: 'one' }
{ type: 'text', content: 'two' }
{ type: 'text', content: 'three' }
],
conversation: {
memory
}
}
And I wanted to return that through in-line statement.
So I would like to call something like:
reply.addText('one').addText('two').addText('three').addConversation(memory)
Note that addText can be called infinite times while addConversation can be called only one time. Also conversation is optional, in that case, if conversation is absent the conversation object should not appear in the output.

To create a custom structured object use a constructor, say Reply.
To call instance methods on the return value of method calls, return the instance object from the method.
Choices to prevent multiple additions of conversation objects include throwing an error (as below) or perhaps logging a warning and simply not add additional objects after a first call to addConversation.
Write the code to implement the requirements.
For example using vanilla javascript:
function Reply() {
this.replies = [];
}
Reply.prototype.addText = function( content) {
this.replies.push( {type: "text", content: content});
return this;
}
Reply.prototype.addConversation = function( value) {
if( this.conversation) {
//throw new Error("Only one conversation allowed");
}
this.conversation = {conversation: value};
return this;
};
Reply.prototype.conversation = null;
// demo
var reply = new Reply();
reply.addText( "one").addText("two").addConversation("memory?");
console.log( JSON.stringify( reply, undefined," "));
(The console.log uses JSON stringify to avoid listing inherited methods)

A possible implementation is to create a builder as follows:
function create() {
const replies = []; // store all replies in this array
let conversation; // store the memory here
let hasAddConversationBeenCalled = false; // a state to check if addConversation was ever called
this.addText = function(content) {
// add a new reply to the array
replies.push({
type: 'text',
content
});
return this; // return the builder
};
this.addConversation = function(memory) {
if (!hasAddConversationBeenCalled) { // check if this was called before
// if not set the memory
conversation = {
memory
};
hasAddConversationBeenCalled = true; // set that the memory has been set
}
return this; // return the builder
}
this.build = function() {
const reply = {
replies
};
if (conversation) { // only if converstation was set
reply.conversation = conversation; // add it to the final reply object
}
return reply; // finally return the built respnse
}
return this; // return the new builder
}
You can then use it as follows:
const builder = create();
const reply = builder.addText('one').addText('two').addText('three').addConversation({}).build();
Here is a link to a codepen to play around with.

If you specifically want to add assemble this via multiple function calls, then the builder pattern is your best bet, as vader said in their comment.
However, if the goal is to simply create shorthand for concisely building these objects, it can be done using a function that takes the list of text as an array.
const buildObject = (textArray, memory) => {
return Object.assign(
{},
{
replies: textArray.map(x => {
return {
type: 'text',
value: x
}
})
},
memory ? {conversation: memory} : null
)
}
var memory = { };
//with memory
console.log(buildObject(['one', 'two', 'three'], memory ))
//without memory
console.log(buildObject(['one', 'two', 'three']));
Fiddle example: http://jsfiddle.net/ucxkd4g3/

Knockout mapping for objects in an array whose property name is dynamic

I have a service that returns data of the following form (I can add fields to this, but I can't change the hierarchical structure):
{
Sections: {
3a: [
{
/* Item definition */
ID: 1,
Text: "Completed Form INNSAMEM002",
...
},
...
],
3b: [
...
],
...
}
}
I would like to use the mapping plugin to call a custom constructor for each of the item definitions, but am having trouble because it is split into sections; so, a mapping would work like this:
var _mapping = {
'3a': {
create: function(o) { return new ItemModel(o.data); }
}
});
However, the section names cannot be known ahead of time.
I can go through the AJAX data, find all the sections, and generate the mapping config from that before I run it, but just wanted to know if there is a better way?
SOLUTION: The answer from CrimsonChris gave me the way to do it; final mapping is this:
var _mapping = {
'Sections': {
create:
function(o)
{
var res = {};
$.each(o.data,
function(sectionkey, section)
{
var secres = [];
$.each(section,
function(itemindex, item)
{
secres.push(new ItemModel(item));
}
);
res[sectionkey] = secres;
}
);
return res;
}
}
};

You can loop over the properties of Sections in the response to get each section. Then map each section's items to an ItemModel.
var _mapping = {
'Sections': {
create: function (options) {
var sections = [];
for (var sectionName in options.data) {
sections.push(new SectionModel(options.data[sectionName], sectionName);
}
return sections;
}
}
}
function SectionModel(items, sectionName) {
this.items = items.map((item) => new ItemModel(item));
this.sectionName = sectionName;
}