Develop Reference

How do I properly access and output API object and array data?

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

Hide checked element Vue

I have three arrays, and i every item has the checkbox. I need to hide each checked element
<ul class="list" v-for="item in technicType" :key="item.name">// looping array
<li v-show="hidden">{{item.name}}// show property
<span><input type="checkbox" :value="item.name" v-model="checked"></span>
</li>// checkbox
</ul>
<ul class="list" v-for="item in model" :key="item.name">// looping array
<li>{{item.name}}// array item
<span><input type="checkbox" :value="item.name" v-model="checked"></span>// checkbox
</li>
</ul>
<ul class="list" v-for="item in technic" :key="item.name">//looping array
<li>{{item.name}}// array item
<span><input type="checkbox" :value="item.name" v-model="checked"></span>// checkbox
</li>
</ul>
data(){
return{
technicType: [],//array i am getting from api
hidden: true,
model: [],//array i am getting from api
technic: [],//array i am getting from api
checked: []
}
}
hideItem(id){
this.hidden = id
}
I need to hide the checked item. How could i implement this?

First of all pay attention, you attach v-for directive to li tag, not to ul. Otherwise it will create multiple ul's instead of multiple li's.
Second, v-if and v-show are suitable in case of conditions only. For example in case you need to modify clicked item (by color, underlining, etc). But not suitable for removing forever.
Third, you do not need to create ID's manually for every item in your array. In v-for directive, besides item itself you can also pass its index, like so v-for="(item,index) in technicType". So when you'll be calling hideItem method you can pass index as an argument. #click = "hideItem(index)" so it will pass current item's index in your array.
And in the end in Vue instance you just splice your array like so
hideItem(index){
this.technicType.splice(index, 1);
}
It will delete item with index that you passed from html.

Angular repeater save $index in node prop

I want to take the $index from the repeater and save it on the current node in a prop called sort.
somehow like this
<li ng-repeat="node in rootNodeLst | orderBy:'node.Sort'"
ng-include="'nodes_renderer.html'" ng-mode=['node.Sort' = $index]></li>
where the line below shows what to focus on here.
ng-mode=['node.Sort' = $index]
So. Take the ng-repeat index, and save it on the current child node's prop called Sort.
the reason behind this is that i need to have the sort updated when i move the elements in the <li>
can this be done?

In your ng-repeat directive add ng-init like this
<li ng-repeat="node in rootNodeLst" ng-init="node.Sort = $index">
{{ node.Sort }}
</li>
http://plnkr.co/edit/WeUeBxGBJVUYErWY3hAX

ng-repeat, do not update table after data was updated?

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.

Angularjs : What is the best way to let Binding Data later update

If I have a ng-repeat directive bind with my initial data,
<!-- list 1-->
<li ng-repeat="data in datas">{{data.name}}</li>
and I change the data by another ng-repeat and ng-model directive,
<!-- list 2-->
<li ng-repeat="data in datas">
<input type="text" ng-model="data.name">
</li>
In Angular way, any method can do list 1 ng-repeat data refresh not immediately (after I click a Save button)?
<button ng-click="save()">Save</button>

You can use a second (temporary) clone to make the changes and copy the changes over to the actual object using angular.copy.
The actual list:
<ul><li ng-repeat="item in items">
{{item.name}} (id: {{item.id}})
</li></ul>
Edit the list:
<ul><li ng-repeat="item in tempCopy">
<input type="text" ng-model="item.name" />
</li></ul>
<button ng-click="persistChanges()">Save</button>
<button ng-click="discardChanges()">Discard</button
In your controller:
/* Persist the changes */
$scope.persistChanges = function () {
angular.copy($scope.model.tempCopy, $scope.model.items);
};
/* Discard the changes */
$scope.discardChanges = function () {
angular.copy($scope.model.items, $scope.model.tempCopy);
};
See, also, this short demo.
Finally, there is a similar example on the Angular docs on angular.copy.

It seems you are creating new items within datas by extending the array by one element? If this is so, why not use a different model for the form and push the result onto the array data when the save button is clicked?
Similarly, when editing an item, clone the array element and make it the model for the resulting form, then modify the original array element when the save button is clicked.