I have to put data from json file to my reducer.
And after mapping this file I got an object which includes data that I need.
export const datas = data.properties.map(data => (<store key={Math.floor(Math.random()*1234)} author={data.value} comment={data.group} rate={data.type} />));
this is console log, I just need props from this
How to get just normall react-table, not an object which is not accepting by reducer state?
Or how to implement it to reducer state to get effect that I need?
I am sorry for stupid questions, I hope you will help me :)
The code which you posted takes an array of objects from a variable data.properties and maps them to an array of JSX elements created by the component store. Perhaps it is better readable with line breaks.
export const datas = data.properties.map(
data => (
<store
key={Math.floor(Math.random() * 1234)}
author={data.value}
comment={data.group}
rate={data.type}
/>
)
);
Your console.log of datas shows that array of React JSX element instances. In your array you have 5 objects which are each a JSX element ($$typeof: Symbol(react.element)) with type: "store" (the component type), the numeric key that you created for this element, and a props object which contains all of the props that you passed: author, comment, and rate (key is a special prop so it is not included here).
You are asking to just create an object with the props rather than creating a store element. We want to take the array data.properties and use the .map() method to map it to this props object.
The variable name that you use inside of your .map() callback can be anything, but as a best practice I recommend that you should not use the variable name data again. Reusing a name is called variable shadowing and it won't cause errors, but it can make your code very confusing. I will call it datum instead.
Here is the code that you want:
export const propsArray = data.properties.map(
datum => ({
key: Math.floor(Math.random() * 1234),
author: datum.value,
comment: datum.group,
rate: datum.type,
})
);
Related
I have sent a http get request and have received an JSON object as follows:
How can I destructure the json array and convert it into an array in my react component?
Alright, do you have an array of objects. It's no big deal my friend, you extract it on both of this ways, choose the one that fits your needs.
1st way, extracting only elements:
const [element1, element2, element3, ...rest] = carpak;
This way you will extract the three first elements to the variables above and the rest of the array will be placed in the variable rest.
2nd way, extracting properties of the elements in array:
const [{
id: id1,
latitude: la1,
longitude: lo1,
...rest: rest1,
}, {
id: id2,
latitude: la2,
longitude: lo2,
...rest: rest2,
}] = carpak;
In this example we accessed the first and the second element's properties. But we didn't care about the rest of the array of elements. Note that we are using some alias for the variables because if we don't do so, the variables would be used twice and we would have a compilation problem.
3rd way, extracting elements and properties from array:
const [{
id,
latitude,
longitude,
...restProperties,
}, element2, ...restElements] = carpak;
Now we have accessed the first element's properties, the entire second element and the rest of the elements in the array. Now we don't need aliases because we are only using the variables once.
Hope any of these help you man. In addition I would like to recommend you the next two links:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/
snapshot.forEach(doc => {
console.log("ID: "+doc.id, '=>', "Doc DATA: "+JSON.stringify(doc.data()));
});
I want to read only 1 item from doc.data() and that is an array of strings called ("supportedCurrencies").
How do i read? I'm new to firestore and TS so any help much appreciated.
Thanks!
When you call doc.data() you get a plain JavaScript object whose properties are each of the fields in the document:
const data = doc.data();
If you want one of those fields, just access it by name as a property of that object:
const supportedCurrencies = data.supportedCurrencies;
If it's an array, then you can treat it just like any other JavaScript array object.
I'm using a service to load my form data into an array in my angular2 app.
The data is stored like this:
arr = []
arr.push({title:name})
When I do a console.log(arr), it is shown as Object. What I need is to see it
as [ { 'title':name } ]. How can I achieve that?
you may use below,
JSON.stringify({ data: arr}, null, 4);
this will nicely format your data with indentation.
To print out readable information. You can use console.table() which is much easier to read than JSON:
console.table(data);
This function takes one mandatory argument data, which must be an array or an object, and one additional optional parameter columns.
It logs data as a table. Each element in the array (or enumerable property if data is an object) will be a row in the table
Example:
first convert your JSON string to Object using .parse() method and then you can print it in console using console.table('parsed sring goes here').
e.g.
const data = JSON.parse(jsonString);
console.table(data);
Please try using the JSON Pipe operator in the HTML file. As the JSON info was needed only for debugging purposes, this method was suitable for me. Sample given below:
<p>{{arr | json}}</p>
You could log each element of the array separately
arr.forEach(function(e){console.log(e)});
Since your array has just one element, this is the same as logging {'title':name}
you can print any object
console.log(this.anyObject);
when you write
console.log('any object' + this.anyObject);
this will print
any object [object Object]
I have a json file that is requested from a server so i can't modify how is sent, but all the data i need is there, so i want to put that data into the charts, the thing is how i can break down the json file, because the relevant data is nested, the structure is
estados(array of object)
id (property)
name (property)
localidades (array of object)
id (property)
name (property)
type1 (object)
type2 (object) etc..
i need to retrieve the id data from the object estados and localidades then especific data one of the objects nested in localidades.
How i can do that? i only know how to go through every nested object by iteration, but decomposing it?
here is a json sample :
http://www.jsoneditoronline.org/?id=9cd4c3af94f14b1cca2d35226794ea78
The Lodash library (Or Underscore, if you prefer) is what you are looking for. You can use it to manipulate your collections any way you want (pretty much). You could potentially do without helper libraries, but it is much easier (and sometimes faster, though browser dependent [ref]) to do it this way.
Here are some examples in the jsFiddle I put together for a demo. Some example of how to access particular property of an object inside an array of objects:
$scope.findObjects = function () {
var estado = _.find($scope.allJson, {
"idEstado": $scope.idToSearch
});
$scope.exampleOutput = _.filter(estado.localidades, function (item) {
return item.demanda && (item.demanda.ata > 5);
});
};
Any built-in ready-to-use solution in Kendo UI to parse JSON data according to schema.model?
Maybe something like kendo.parseData(json, model), which will return array of objects?
I was searching for something like that and couldn't find anything built-in. However, using Model.set apparently uses each field's parse logic, so I ended up writing this function which works pretty good:
function parse(model, json) {
// I initialize the model with the json data as a quick fix since
// setting the id field doesn't seem to work.
var parsed = new model(json);
var fields = Object.keys(model.fields);
for (var i=0; i<fields.length; i++) {
parsed.set(fields[i], json[fields[i]]);
}
return parsed;
}
Where model is the kendo.data.Model definition (or simply datasource.schema.model), and json is the raw object. Using or modifying it to accept and return arrays shouldn't be too hard, but for my use case I only needed a single object to be parsed at a time.
I actually saw your post the day you posted it but did not have the answer. I just needed to solve this problem myself as part of a refactoring. My solution is for DataSources, not for models directly.
kendo.data.DataSource.prototype.parse = function (data) {
return this.reader.data(data);
// Note that the original data will be modified. If that is not what you want, change to the following commented line
// return this.reader.data($.extend({}, data));
}
// ...
someGrid.dataSource.parse(myData);
If you want to do it directly with a model, you will need to look at the DataReader class in kendo.data.js and use a similar logic. Unfortunately, the DataReader takes a schema instead of a model and the part dealing with the model is not extracted in it's own method.