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>
Related
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;
}
My website works ok, my question is...
i have a
<li ng-repeat="(key,value) in bpData.slots">
{{key}} Slots: {{value}}
</li>
which works perfectly as it should, but some of the keys have words like weaponsC or weaponsS, again this is reading from the json as it should.... can i change that somehow(without changing the json as its also used for another page) ie weaponsC would display as weapons concussive, weaponsS would display as weapons surface.
does it need to be changed in the js or can i change it some other way?
to see the working page and a live example
www.ahoymearty.co.uk/blueprints-wiki and search using the hull menu.
thanks in advance
wayne
You could use a filter, this way you can handle all kinds of cases.
Example:
angular.module('appName')
.filter('weaponsFilter', function(){
return function(weapon) {
var weaponStrings = {
'weaponsC':'Weapons Concussive',
'weaponsS':'Weapons surface',
...
}
return weaponStrings[weapon]
};
});
Used in your ng-repeat:
<li ng-repeat="(key,value) in bpData.slots">
{{ key | weaponsFilter }} Slots: {{value}}
</li>
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>
Hi I have two different list which I want to display. I was wondering how to use ng-repeat twice to get them printed.
This is the HTML page:
<div>
<div>Search: <input ng-model="query" placeholder="filter"></div>
<ul>
<li ng-repeat="doc in documents | filter:query | state in statusofdoc" ng-click="selectedDocument(doc)" >{{doc}}{{state}}</li>
</ul>
</div>
This thing just display the doc but does not display the state. How to get ng-repeat run for both?
Angular noob here
I have an angular app in this plunkr.
How do i sort the list displayed here using angular such that the course with the flag always stays on the top and the remaining items are sorted alphabetically?
You can use the orderBy.
Change your ngRepeat to this:
<a ng-repeat="prog in programs | orderBy:'academic_program.program_title' | orderBy:'primary_program':true" href="#" ng-click="display.addprogram = false" class="list-group-item">
Here's the modified plunker: http://plnkr.co/edit/PJBvf5MyGe3ggD2uFkKf?p=preview