I'm new to Vue and trying to learn. I have an object:
info: [
{
email: "newperson#xyzc.edu"
}, {
Initial: "Initial Biosketch"
}
]
How do I load values into the html? I have tried {{email}} and {{info[0]}} and [[infor.email}} and {{infor["email"]}}. Nothing seems to work. info[0] works a little it gives me "email": "newperson#xyzc.edu".
You could try {{ info[0].email }} and {{ info[1].Initial }} and plus you are using the wrong variable name here
{{ infor['email'] }}
If the info property is not dynamic and not required to be an array it would be easier to struct it as an object. Try using object structure instead of array like:
info: {
email: "newperson#xyzc.edu",
initial: "Initial Biosketch"
}
and then use it in the template like {{ info.email }} and {{ info.initial }}
Related
I have the following data:
[...]
data() {
return {
theme: "dark",
data: {
ioa: [
{
title: "xyz1",
applications: ["app1","app2","app3"],
},
{
title: "xyz2",
applications: ["app1","app2"],
},
],
applications: {
app1:{
name: "app1",
},
mastodon:{
app2: "app2",
},
app3:{
name: "app3",
},
}
}
}
},
[...]
<!--
First i loop thow the ioa array in data json object an print it with vues text template syntax
-->
<div v-for="item in data.ioa">
{{ item.title }}
<!--
for every element i will loop again throw the applications array in this object.
-->
<div v-for="id in item.applications>
<!--
in "id" there is a specific name, that is also the json key of the application object in data.
But when i want to print the title my application will show nothing
-->
{{ data.applications.id.name }}
</div>
</div>
The Problem is that i can now access the "application" object, with the returned "id" in text template syntax
The browsers console says: "Uncaught TypeError: data.applications.id is undefined". I know there is a problem with "id" which is a string ... but i dont know how to solve this.
I want to get the value of "application" json object, based on the return id value from data.ioa json object
While you inside the v-for item.applications the data should call as id not data.applications.id.name
Answer here >>> Full Answer
<state data-value="{{ state }}"></state>
In my JavaScript file I have :
var state = document.getElementsByTagName('state')[0].getAttribute('data-value');
In the past this was done because of XHTML1.1 spec - what is the correct approach in today's times ?
<div data-value="{{ state }}"></div> ?
We could also do in the html template <script>var state = '{{ state }}';<script> but I have like a bunch of such assignments.
How else can we mass-assign JavaScript variables pushed in the HTML template ?
You could add something like this in the Django view context:
"MY_VARIABLES": json.dumps({
"state": "My state",
"number": 40,
"isActive": True,
...
})
And in the template assign only one variable and just use the values as object properties:
var MY_VARIABLES = {{ MY_VARIABLES|safe }};
> MY_VARIABLES.state
'My state'
> MY_VARIABLES.number
40
> MY_VARIABLES.isActive
true
I'm fetching a list that I'm trying to loop through that has an object inside. I'm using vue and the array looks like this:
companies: [
name: "company1"
id: 1
type: "finance"
additionalData: "{"funder":"blabla","idType":5,"number":"2"}"
]
My problem is accessing the different ones inside the additionalData.
This is how far I've come:
<div
v-for="(company, idx) in companies"
:key="idx"
>
<p class="font-weight-bold text-h6"> {{ company.name }} </p>
<p class="font-weight-bold"> {{ company.additionalData.funder }} </p>
</div>
This doesn't work and I've tried a loop inside the loop aswell. When I only print out {{ company.additionalData }} I get the whole object. Can it have something to do with that the object is inside a string? Could I do a computed or something to figure this out or? :)
It looks like additionalData is a string containing JSON, so try converting the string to an object. Something like this should work:
<p class="font-weight-bold"> {{ JSON.parse(company.additionalData).funder }} </p>
Yes, you're right, you can't access json properties with dot notation in html. You can fix that with JSON.parse, which will turn your JSON object into a JavaScript object that you can access the properties of in your template.
companies: {
name: "company1"
id: 1
type: "finance"
additionalData: JSON.parse("{"funder":"blabla","idType":5,"number":"2"}")
}
Syntax problem
companies: [
name: "company1"
id: 1
type: "finance"
additionalData: {
"funder": "blabla",
"idType": 5,
"number":"2"
}
]
I am iterating through an array of person objects using ng-repeat Say the array looks like this:
[{
"display_name": "John Smith",
"status": "part-time",
"bio": "I am a person. I do people stuff.",
}, {
"display_name": "Jane Doe",
"status": "full-time",
"bio": "I am yet another person.",
}, ...]
Meanwhile, I have another number_list object that looks like this (note the uppercase):
{
"JOHN SMITH": 12,
"JANE DOE": 34,
...
}
In the HTML, I am able to interpolate from each person object like so:
<p>
Person Name: {{ person.display_name }}
Person Bio: {{ person.bio }}
...
</p>
But I'd also like to interpolate from the second object, accessing the value where the key matches the person object I'm on, like so:
<p>
...
Person Number: {{ number_list['{{ person.display_name | uppercase }}'] }}
</p>
I am using the EMCAScript Bracket notation rather than the dot notation to specify the key, because of the spaces in the key names of number_list (e.g."JOHN SMITH") but I get nothing out of that interpolation.
I have confirmed that if I type in a name e.g. {{ number_list['JOHN SMITH'] }} that I am able to interpolate the value -- 12 in this example. This means the issue doesn't have to do with scope or anything like that as far as I can tell.
Nested interpolation with double curly braces ({{ }}) is not supported by the AngularJS framework. If you want to run more complex code, you should make it a controller method and call the method from your view.
<p ng-repeat="person in persons">
...
̶P̶e̶r̶s̶o̶n̶ ̶N̶u̶m̶b̶e̶r̶:̶ ̶{̶{̶ ̶n̶u̶m̶b̶e̶r̶_̶l̶i̶s̶t̶[̶'̶{̶{̶ ̶p̶e̶r̶s̶o̶n̶.̶d̶i̶s̶p̶l̶a̶y̶_̶n̶a̶m̶e̶ ̶|̶ ̶u̶p̶p̶e̶r̶c̶a̶s̶e̶ ̶}̶}̶'̶]̶ ̶}̶}̶
Person Number: {{ ::personNumber(person.display_name) }}
</p>
$scope.personNumber = function(name) {
return $scope.number_list[name.toUpperCase()];
};
You can also use filter to personNumber for an object:
app.controller("ctrl", function($scope){
$scope.persons = [...];
$scope.number_list = [...];
})
app.filter("personNumber", function(){
return function(array, name){
return array[name.toUpperCase()];
}
})
<p ng-repeat="person in persons">
...
Person Number: {{person.display_name | personNumber: number_list}}
</p>
I'm having two array in my scope: employees and cars. Every employee has a carId which matches a car out of the cars-array.
Employee looks like
[{'id': 1, 'name': 'John', 'carId': 1}]
Car like
[{'id': 1, 'color': 'red'}]
Now I have an ng-repeat and would like to output the color of the car directly with an filter:
{{ employee.carId | selectFromCars:$scope.cars }}
I don't know how to get access to the cars array inside the filter. Is this even possible or should I inject the car into the employee after loading and then just use following?
{{ employee.car.color }}
you can make your own custom filter and just add it the end of your controller like so:
.filter('empCarFilter', function() {
return function(carId, cars) {
// you can access $scope.cars here, for example...
angular.forEach(cars,function(value){
if (value.id === carId) {
return value.color;
}
// etc...etc...
})
}
The above method is under the assumption that you are passing employee.carId into the filter. But, not sure how useful this would be for you, but you can pass the whole object to the filter as well and not just one key with:
{{ employee | empCarFilter }}
Here is also a pretty good reference for custom filters:
https://scotch.io/tutorials/building-custom-angularjs-filters