Vue - Loop through an array with nested objects - javascript

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"
}
]

Related

Vue.Js can not access Json-Data with a returned json key attribute as string - text template syntax

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

Adding text into a double mustache using Vue.js

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 }}

Angularjs can't loop with ng-repeat if key has colon ":"

I've got a problem to loop a simple json in angularjs with ng-repeat. The json is this one:
$scope.lines = {
data: [
{ "properties": {
"name": "My test",
"test:testOne": "This is test one" }
}
]
};
and the problem is this: test:testOne. I need to parse that property but i don't know how do it because it has the colon. I made a jsfiddle here: http://jsfiddle.net/7MhLd/1250/ in which i tried some ways but without success
You can use [] bracket notation, like so
<div ng-controller="MyCtrl">
<div ng-repeat="line in lines.data">
{{ line.properties['test:testOne'] }}
{{ line.properties.name }}
</div>
</div>
Example

how to bind nested list in an object in angular

I have a list named "posts" that comprises of objects like below.
{_id: "559301710de9c23407b237ee"
author: {user_id: "557c6922925a18a81930d2ce", username: "test"}
comment_id: []
content: "<p>123</p>"
created_at: "2015-06-30T20:52:01.738Z"
image_id: []
like_user_id: ["557c6922925a18a81930d2ce"]
likes: 1
tags: [{_id: "558ded1b8526b45407fd0bb1", tag_name: "1"}, {_id: "559301630de9c23407b237ec", tag_name: "2"},…]
title: "123"}
I want to extract tag_name and show it in html
<a ng-repeat="post in bests" ng-href="/post/{{post._id}}">
<em class="tag">{{post.tags.tag_name}}</em> //This appearently doesn't work!
<span>{{post.title}}</span>
<em class="likes">+{{post.likes}}</em>
<time>{{post.created_at}}</time>
</a>
Everything works fine except for tag_name.
I tried using ng-repeat inside ng-repeat and it doesn't seem to work. how do you do it?
Try
<em class="tag" ng-repeat="tag in post.tags">{{tag.tag_name}}</em>
post.tags is an array so the easiest way to show the tag_names is using ng-repeat...
this works
<em class="tag" ng-repeat="tag in post.tags">{{tag.tag_name}}</em>
tags is in an array therefore you need an index in order to use it
{{post.tags[0].tag_name}}
<em class="tag">{{post.tags[0].tag_name}}</em> //<== sample code that works
|
Your desired index goes here
Alternatively you could iterate using ng-repeat

Reference a string filter from object value

I am trying to apply a filter to the output of an angular ng-repeat. Here's an example of the data:
{name: "followers", label: "Followers", filter:"number:0"},
{name: "following", label: "Following",filter:"number:0"},
{name: "mediaCount", label: "Media Count",filter:"number:0"}
The display of things looks like this:
<span ng-repeat="item in rows">
<div class="col col-gh-4"><label>{{item.label}}</label></div>
<div class="col col-gh-2" ng-bind="item.value ? (item.value|{{item.filter}}) : '-'"></div>
I am trying to apply the filter in this case "number:0" as defined in the data object at display-time using something like: item.value|{{item.filter}} or item.value|item.filter
Both of those attempts don't work, any advice on how to reference the filter from the object value? Is it possible?
Thanks for any suggestions!

Categories