My issue is probably very simple, but I am a complete beginner studying Javascript and I have a project where I am supposed to create an anime info web application by fetching data from an API.
I have an issue with a "genres" category. It is listed as an array with various items and item names which I need to have displayed in a 'Genres' column on my page.
Here is an example of some of the data I need to retrieve.
genres array data: https://imgur.com/a/pApGU59
And here is an example of what my current output looks like:
e.g. column output: https://imgur.com/a/1rRwG5L
If I am supposed to accomplish this by means of a forEach loop, what would be the proper syntax? And if there is another or a simpler way, an example of that would also be appreciated.
Here is an example of how I was printing data into their respectful columns through JavaScript.
<div className="col-md-8">
<h2>${movie.title}</h2>
<ul className="list-group">
<li class="list-group-item">
<strong>Japanese Title:</strong> ${movie.title_japanese}
</li>
<li class="list-group-item">
<strong>Genres:</strong> ${movie.genres}
</li>
<li class="list-group-item">
<strong>Type:</strong> ${movie.type}
</li>
<li class="list-group-item">
<strong>Premiered:</strong> ${movie.premiered}
</li>
<li class="list-group-item">
<strong>Episodes:</strong> ${movie.episodes}
</li>
</ul>
</div>;
Of course, using "movie.genres.name" returns 'undefined' and just using "movies.genres" would print many [object Object] results into said column.
I would just need the "name" item of the genres array to be automatically filled into my Genres column upon loading up a page.
movie.genres is an array and you will have to loop it to get each property
let output = "";
for(let i=0;i< movie.genres.length; i++){
output+= movie.genres[i].name;
}
Related
I am looping through some API data in Vue. I want to get the value that is displayed in my braces {{ currency.description }} and post that to my db.
I have tried for example PostService.insertPost(e.target.innerHTML);
Also have tried this.$refs.criteria[0].innerHTML
When console logged it shows exactly what I need, but when posted to the db it shows null.
VUE template
<ul v-bind:key="currency.id" ref="criteria" v-for="currency in info">
<li id="criteria" v-on:click="apiTest" >{{ currency.description }}</li>
</ul>
JS
apiTest(e) {
console.log(e.target.innerHTML);
await PostService.insertPost(e.target.innerHTML);
}
data() {
return{
info: [],
My goal is to get the string value of currency.description into my db, instead of it showing up as null. I am guessing it has to do with my info array in my returned data, I am not sure how to go about it though.
You want to make the loop on the li-element instead, and pass the description to the click function you're calling, like so:
// Template
<template>
<ul>
<li
v-for="currency in info"
v-bind:key="currency.id"
v-on:click="apiTest(currency.description)">
{{ currency.description }}
</li>
</ul>
</template>
// Method / Click function
async apiTest(description) {
await PostService.insertPost(description);
}
Try using await PostService.insertPost(currency.description); in $nextTick function. I think the problem may be the delay in loading the DOM since it is looping the list items.
<ul>
<li v-for="currency in info" :id="currency.id" #click="apiTest(currency)">{{ currency.description }} </li>
</ul>
apiTest: function (currency){
//You can get the html element
//var element = document,getElementById(currency.id)
console.log(currency.description);
await PostService.insertPost(currency.description);
}
I have an issue where I'm trying to display an array in Angularjs using ng-repeat but its showing the entire json array and not only the text inside.
This is my array
$scope.problems = [
{
problem: "problem1",
works: [
"a0",
"a9"
]
}
]
And this is where I want to display it
<li ng-repeat="works in problems | filter: searchCard">{{works}}</li>
Now the {{works}} tag shows this in the live document:
{"problem":"probleem1","works":["a0","a9"]}
According to most tutorials and things i've seen its supposed to display the a0 and a9 not the entire json line.
My second question which might be completely different is, how can I display the text correctly but also hide all of them until a person has used the input to search the "works" input field.
when you have objects Array on ng-repeat you have to select that object params; in this sample our object params are "problem" and "works"
also in our object we have "string array" and string array not have params because that we use it directly in this sample {{work}} is object of string array.
<li ng-repeat="item in problems | filter: {problem: searchCard}">
{{item.problem}}
<ul>
<li ng-repeat="work in item.works">{{work}}</li>
</ul>
</li>
you can use the nested ng-repeats like #Maher mentioned. also, in order to hide data until searchCard is typed, you can use ng-if directive in nested ui.
<li ng-repeat="item in problems | filter: searchCard">
{{item.problem}}
<ul ng-if="searchCard">
<li ng-repeat="work in item.works">{{work}}</li>
</ul>
</li>
Okay this seems fairly odd but i am allowing my users to create any number of category / subcategories they want
When i pull the category data out it might look something like this:
as you can see from the above example the sub categories can have subcategories this list tree could go on forever.
Now trying to make the menu i have a simple list:
<ul class="nav dker">
<li ui-sref-active="active">
<a ui-sref="app.ui.jvectormap" href="#/app/ui/jvectormap">
<span translate="aside.nav.components.ui_kits.VECTOR_MAP" class="ng-scope">Vector Map</span>
</a>
</li>
</ul>
The issue here is that i don't know how many times i have to repeat the subcategories which makes it impossible for me to know when to check for it?
i hope you know where im going with this how can i make a reliable list that follows the array pattern above when i don't know how many levels there are?
You are going to want to create a recursive template which will essentially look something like this:
<div data-ng-include="'displaySubcategory.html'"></div>
where displaySubcategory.html contains the ng-repeat and a recursive call to itself.
<div data-ng-repeat="category in category.subcategories">
<h1>{{category.name}}</h1>
<div data-ng-include="'displaySubcategory.html'"></div>
</div>
The idea is that everytime you call ng-repeat you are creating a scope around the child element, so a call to {{category}} will display the lowest level (current child) of the tree/data structure.
I have two angularjs models and I would like to use firstkey of firstcollection as index value in the anothercollention. Basically I want to iterate over anothercollention.firstkey using the key from the previous ng-repeat. Here is some code which I hope makes sense of what I'm trying to do. I've checked all the angularjs docs but none seems to provide an example for this scenario. All of them assume that you have the data in the same ng-repeat model.
<ul>
<li ng-repeat="(firstkey, value) in firstcollection"></li>
<ul>
<li ng-repeat="(subkey, subvalue) in anothercollention.firstkey"></li>
<ul>
</ul>
Example
first collection {"fruits": "are the best", "veggies": "are the worst"}
another collection {"fruits": [1, 2, 3 ], "veggies":[2,4,5]},
HTML page should look like this:
fruits are the best
1, 2, 3
veggies are the worst
2,4,5
Ok, I guess I got it. All you need to do is:
<ul>
<li ng-repeat="(firstkey, value) in firstcollection"></li>
<ul>
<li ng-repeat="(subkey, subvalue) in anothercollention[firstkey]"></li>
</ul>
</ul>
I have a table that is populating with ng-repeat, and I also have navigation button that change table data. Before I had custom filter on the data in html file, like so:
ng-repeat="car in carList | filter:tableFilter"
Even so it worked, it slowed my website, a lot. So now I am updating my table data in my controller. But there is another problem, ng-repeat do not want to update. So no matter how much I will update my data, the table will be still the same.
How can I fix that?
Here is my ng-repeat:
<tbody>
<tr ng-repeat="car in sortedCarList">
....
Here is my nav-bar:
<section class="tab" ng-controller="TablePanelCtrl as panel">
<ul class="nav nav-pills car-navigation">
<li ng-class="{ active: panel.isSelected(1)}">
<a href ng-click="panel.selectTab(1); initCarList(1); resetActiveRow(); formattedTable(2); hideTypeBox()">Sort by Reviews</a>
</li>
<li ng-class="{ active: panel.isSelected(2)}">
<a href ng-click="panel.selectTab(2); initCarList(2); resetActiveRow() formattedTable(2); hideTypeBox()">Sort by Rating</a>
</li>
</ul>
initCarList() changes the data according to tab number.
formattedTable() filters table data according to filter values that can be changes by user.
UPDATE:
my formatting function:
$scope.formattedTable = function(index){
$scope.initCarList(index);
$scope.sortedCarList = [];
var carlistLength = $scope.carList.length;
for (var i=0;i<carlistLength;i++){ // just check every row if values passes user requirements
var rowBool = $scope.tableFilter($scope.carList[i]);
if (rowBool){
$scope.sortedCarList.push($scope.carList[i]);
}
}
}
While I agree with cerbrus that we need to see a bit more of your code, I'll take a stab in the dark : you call formattedTable(2) in both tabs, which means that your filtering never changes.