i'll keep it simple.I have the following map:
export class Component {
total: Map<string, number> = new Map([["test1", 2],["test2",3]])
}
How can I access a particular value using its key in the html component?.I tried the following code without success and all examples that i found use an ngFor which i don't want to use.
test.component.html
{{total[test1]}}
{{total.get(test1)}}
Thanks in advance.
Don't forget the quotes for the string type key.
{{total.get('test1')}}
It's an array of arrays, therefore an additionl index access is required
{{total[0]['test1']}}
{{total[1]['test2']}}
or
{{total[0].test1}}
{{total[1].test2}}
Related
I'm trying to display a json array on the EasyAdmin detail page. I read here Is there a way to represent a JSON field in EasyAdmin 3? that you can use ArrayField in EasyAdmin 3 to display a json array, which would make sense to me as that is the only field in EasyAdmin that could display it so I added it like this:
public function configureFields(string $pageName): iterable
{
return [
ArrayField::new('status', $this->translator->trans('form.label.status'))->onlyOnDetail(),
];
}
But it gives me this error:
An exception has been thrown during the rendering of a template ("Notice: Array to string conversion"). Do I need to add something else to it or does it not work at all?
change "status" to a multiplicity "statuses"
Worked for me with changing "print" to "prints"
I found a workaround that resolved the issue in my situation where I wanted just to show JSON on details page
So in your entity add a get function as an unmapped field as indicated in the official documentaiton
https://symfony.com/bundles/EasyAdminBundle/current/fields.html#unmapped-fields
for example
public function getJsonField() {
return json_encode($this->yourEntityJsonAttribute);
}
then in configureFields function in your CrudController add your field like this
TextAreaField::new('jsonField')->onlyOnDetail()
You can also read the json attribute and generate an HTML string in the getJsonField function then in configure field just add renderAsHtml in th field like this
TextAreaField::new('jsonField')->onlyOnDetail()->renderAsHtml()
Wish this suits your case too, Good luck
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,
})
);
I have json as below :
this.myObj = {
keyOne: 'myValue1',
keyTwo: 'myValue2',
keyThree: 'myValue3',
keyFour: 'myValue4',
};
I want to set key and value in my html.I have tried as below code :
<ul>
<li repeat.for="prop of myObj | objectKeys">${prop}</li>
</ul>
But my code is not work. Please give me solution regarding this.
I am a bit confused about what you wish to accomplish here.
I assume you wish to get the keys of myObj and loop through them.
I suggest reading about repeaters at aurelia documents.
For a solution that may get you going, add this to your modal file:
export class ObjectKeysValueConverter {
toView(value) {
return Object.keys(value);
}
}
Object.keys( myObj ) will return an array, which repeat.for attribute requires. It can't iterate objects by default.
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]
Showing a collection of static known fields is basic to Meteor
where known fixed document key field names are placed in an html template.
However if all the field names are to be found at the time the
data is inserted,then the basic Meteor rendering cannot be used.
Is there any way to publish all the fields which are found by
parsing the json tabulated data ?
Perhaps Houston is the answer ?
Basically you just need to return keys as values along with the actual values. For example:
{{#each kvp object}}
key: {{key}}
value: {{value}}
{{/each}}
With a helper:
Template.myTemplate.helpers(function(){
kvp: function(obj){
return Object.keys(obj).map(function(k) { return {key: k, value: obj[k] });
}
});
That assumes an object with no nesting.
Object.keys(obj) gives you an array of keys. The map function then loops over each of those keys. In the mapping function we build a new object from the key and value. The end result is an array of objects that can be looped over in Blaze.