We Keep Coding

Angulajs:Nested JSON array in ng-repeat not displaying the values - javascript

Here is my other_prizeJSON data
[{"prizeno":2,"prizedesc":"Rs
:100,000/-","totalamt":100000,"conslation":"f","prizeticket":[{"seriesname":"RJ","digit":443581,"district":"THRISSUR"},{"seriesname":"RK","digit":633225,"district":"THIRUVANANTHAPURAM"},{"seriesname":"RL","digit":328674,"district":"KOTTAYAM"},{"seriesname":"RG","digit":753947,"district":"PALAKKAD"},{"seriesname":"RE","digit":153871,"district":"ERNAKULAM"},{"seriesname":"RD","digit":394850,"district":"PALAKKAD"},{"seriesname":"RC","digit":162287,"district":"KOZHIKKODE"},{"seriesname":"RB","digit":315428,"district":"ALAPPUZHA"},{"seriesname":"RA","digit":706397,"district":"KOTTAYAM"},{"seriesname":"RH","digit":213805,"district":"IDUKKI"},{"seriesname":"RK","digit":633435,"district":"THIRUVANANTHAPURAM"},{"seriesname":"RL","digit":801842,"district":"KOTTAYAM"},{"seriesname":"RA","digit":275046,"district":"KOTTAYAM"},{"seriesname":"RB","digit":352182,"district":"KASARGODE"},{"seriesname":"RC","digit":347419,"district":"WAYANAD"},{"seriesname":"RD","digit":909948,"district":"MALAPPURAM"},{"seriesname":"RE","digit":138627,"district":"IDUKKI"},{"seriesname":"RG","digit":583798,"district":"KOTTAYAM"},{"seriesname":"RH","digit":557799,"district":"THIRUVANANTHAPURAM"},{"seriesname":"RJ","digit":837793,"district":"PALAKKAD"}]},{"prizeno":3,"prizedesc":"Rs
:10,000/-","totalamt":10000,"conslation":"f","prizeticket":{"seriesname":[],"digit":52012,"district":[]}},{"prizeno":4,"prizedesc":"Rs
:5,000/-","totalamt":5000,"conslation":"f","prizeticket":[{"seriesname":[],"digit":3795,"district":[]},{"seriesname":[],"digit":4012,"district":[]},{"seriesname":[],"digit":146,"district":[]},{"seriesname":[],"digit":7857,"district":[]},{"seriesname":[],"digit":5581,"district":[]},{"seriesname":[],"digit":4553,"district":[]},{"seriesname":[],"digit":1200,"district":[]},{"seriesname":[],"digit":7683,"district":[]},{"seriesname":[],"digit":5295,"district":[]},{"seriesname":[],"digit":7791,"district":[]}]},{"prizeno":5,"prizedesc":"Rs
:2,000/-","totalamt":2000,"conslation":"f","prizeticket":[{"seriesname":[],"digit":1841,"district":[]},{"seriesname":[],"digit":4560,"district":[]},{"seriesname":[],"digit":5234,"district":[]},{"seriesname":[],"digit":8664,"district":[]},{"seriesname":[],"digit":7982,"district":[]},{"seriesname":[],"digit":7335,"district":[]},{"seriesname":[],"digit":3849,"district":[]},{"seriesname":[],"digit":8760,"district":[]},{"seriesname":[],"digit":3543,"district":[]},{"seriesname":[],"digit":7865,"district":[]}]},{"prizeno":6,"prizedesc":"Rs
:1,000/-","totalamt":1000,"conslation":"f","prizeticket":[{"seriesname":[],"digit":9090,"district":[]},{"seriesname":[],"digit":8105,"district":[]},{"seriesname":[],"digit":6440,"district":[]},{"seriesname":[],"digit":8793,"district":[]},{"seriesname":[],"digit":1035,"district":[]},{"seriesname":[],"digit":7703,"district":[]},{"seriesname":[],"digit":7414,"district":[]},{"seriesname":[],"digit":1059,"district":[]},{"seriesname":[],"digit":3944,"district":[]},{"seriesname":[],"digit":7595,"district":[]},{"seriesname":[],"digit":5854,"district":[]},{"seriesname":[],"digit":6580,"district":[]},{"seriesname":[],"digit":7488,"district":[]},{"seriesname":[],"digit":4921,"district":[]},{"seriesname":[],"digit":7977,"district":[]},{"seriesname":[],"digit":158,"district":[]},{"seriesname":[],"digit":8635,"district":[]},{"seriesname":[],"digit":5597,"district":[]},{"seriesname":[],"digit":1997,"district":[]},{"seriesname":[],"digit":9732,"district":[]},{"seriesname":[],"digit":891,"district":[]},{"seriesname":[],"digit":5797,"district":[]},{"seriesname":[],"digit":1806,"district":[]},{"seriesname":[],"digit":8352,"district":[]},{"seriesname":[],"digit":3870,"district":[]},{"seriesname":[],"digit":3115,"district":[]}]},{"prizeno":7,"prizedesc":"Rs
:500/-","totalamt":500,"conslation":"f","prizeticket":[{"seriesname":[],"digit":8629,"district":[]},{"seriesname":[],"digit":3004,"district":[]},{"seriesname":[],"digit":2960,"district":[]},{"seriesname":[],"digit":4344,"district":[]},{"seriesname":[],"digit":9959,"district":[]},{"seriesname":[],"digit":1768,"district":[]},{"seriesname":[],"digit":367,"district":[]},{"seriesname":[],"digit":9917,"district":[]},{"seriesname":[],"digit":8403,"district":[]},{"seriesname":[],"digit":947,"district":[]},{"seriesname":[],"digit":2276,"district":[]},{"seriesname":[],"digit":4566,"district":[]},{"seriesname":[],"digit":2522,"district":[]},{"seriesname":[],"digit":6844,"district":[]},{"seriesname":[],"digit":430,"district":[]},{"seriesname":[],"digit":8319,"district":[]},{"seriesname":[],"digit":1661,"district":[]},{"seriesname":[],"digit":4134,"district":[]},{"seriesname":[],"digit":6830,"district":[]},{"seriesname":[],"digit":5016,"district":[]},{"seriesname":[],"digit":8097,"district":[]},{"seriesname":[],"digit":7708,"district":[]},{"seriesname":[],"digit":6577,"district":[]},{"seriesname":[],"digit":134,"district":[]},{"seriesname":[],"digit":5229,"district":[]},{"seriesname":[],"digit":2329,"district":[]},{"seriesname":[],"digit":9174,"district":[]},{"seriesname":[],"digit":3712,"district":[]},{"seriesname":[],"digit":7316,"district":[]},{"seriesname":[],"digit":8242,"district":[]},{"seriesname":[],"digit":3538,"district":[]},{"seriesname":[],"digit":4243,"district":[]},{"seriesname":[],"digit":7288,"district":[]},{"seriesname":[],"digit":8270,"district":[]},{"seriesname":[],"digit":4060,"district":[]}]},{"prizeno":8,"prizedesc":"Rs
:100/-","totalamt":100,"conslation":"f","prizeticket":[{"seriesname":[],"digit":7062,"district":[]},{"seriesname":[],"digit":7981,"district":[]},{"seriesname":[],"digit":3890,"district":[]},{"seriesname":[],"digit":4997,"district":[]},{"seriesname":[],"digit":3009,"district":[]},{"seriesname":[],"digit":2103,"district":[]},{"seriesname":[],"digit":325,"district":[]},{"seriesname":[],"digit":3995,"district":[]},{"seriesname":[],"digit":3587,"district":[]},{"seriesname":[],"digit":1667,"district":[]},{"seriesname":[],"digit":3737,"district":[]},{"seriesname":[],"digit":3277,"district":[]},{"seriesname":[],"digit":9228,"district":[]},{"seriesname":[],"digit":6854,"district":[]},{"seriesname":[],"digit":9008,"district":[]},{"seriesname":[],"digit":8170,"district":[]},{"seriesname":[],"digit":7364,"district":[]},{"seriesname":[],"digit":199,"district":[]},{"seriesname":[],"digit":4286,"district":[]},{"seriesname":[],"digit":9285,"district":[]},{"seriesname":[],"digit":2873,"district":[]},{"seriesname":[],"digit":2636,"district":[]},{"seriesname":[],"digit":337,"district":[]},{"seriesname":[],"digit":8529,"district":[]},{"seriesname":[],"digit":7677,"district":[]},{"seriesname":[],"digit":1236,"district":[]},{"seriesname":[],"digit":1142,"district":[]},{"seriesname":[],"digit":5923,"district":[]},{"seriesname":[],"digit":2026,"district":[]},{"seriesname":[],"digit":2461,"district":[]},{"seriesname":[],"digit":4696,"district":[]},{"seriesname":[],"digit":9062,"district":[]},{"seriesname":[],"digit":4848,"district":[]},{"seriesname":[],"digit":9409,"district":[]},{"seriesname":[],"digit":5198,"district":[]},{"seriesname":[],"digit":5735,"district":[]},{"seriesname":[],"digit":7926,"district":[]},{"seriesname":[],"digit":8557,"district":[]},{"seriesname":[],"digit":3853,"district":[]},{"seriesname":[],"digit":713,"district":[]},{"seriesname":[],"digit":8026,"district":[]},{"seriesname":[],"digit":4445,"district":[]},{"seriesname":[],"digit":3326,"district":[]},{"seriesname":[],"digit":1485,"district":[]},{"seriesname":[],"digit":2219,"district":[]},{"seriesname":[],"digit":6833,"district":[]},{"seriesname":[],"digit":6948,"district":[]},{"seriesname":[],"digit":757,"district":[]},{"seriesname":[],"digit":1226,"district":[]},{"seriesname":[],"digit":5657,"district":[]},{"seriesname":[],"digit":5052,"district":[]},{"seriesname":[],"digit":7343,"district":[]},{"seriesname":[],"digit":5222,"district":[]},{"seriesname":[],"digit":6426,"district":[]},{"seriesname":[],"digit":148,"district":[]},{"seriesname":[],"digit":5230,"district":[]},{"seriesname":[],"digit":5701,"district":[]},{"seriesname":[],"digit":4860,"district":[]},{"seriesname":[],"digit":2885,"district":[]},{"seriesname":[],"digit":7078,"district":[]}]}]
I am trying to display prizeticket nested array in an html
<p ng-repeat="prize in other_prize">
{{prize.prizeno}}PRIZE
<p ng-repeat="each in prize.prizeticket">
{{each.district}}
</p>
</p>
But this ng-repeat didn't display the data
<p ng-repeat="each in prize.prizeticket">
{{each.district}}
</p>
However {{prize.prizeticket}} will returns the JSON array ,but it doesn't display the values in ng-repeat

Use for the outside element
<div ng-repeat="prize in other_prize">
{{prize.prizeno}}
<p ng-repeat="each in prize.prizeticket">
{{each.district}}
</p>
</div>
DEMO

Related

I want to send a value from html to javascript using javascript variable.
I've created a div from javascript like this:
<body>
<div id="row" class="category-cards">
// creates from js
</div>
</body>
<script>
var d1 = document.getElementById("row");
for (let i=5; i>0; i--) {
d1.insertAdjacentHTML('beforeend',
<div class="card card-small card-category">
<div class="card-del-btn">
<button id="btnDel" onclick="deleteCategory(i)"> <b> × </b> </button>
</div>
<!-- displays the record --!>
</div>
}
function deleteCategory(index){
// takes the index and searches the mysql database for match, and deletes the record
}
</script>
Each iteration of the for loop inserts a card of a record from the database, and I wish to delete that record from the document, as well as the database, when the button is clicked.
Is there a way to associate a unique id or value to each card and send it through the onclick?
I have tried sending the value of i but it is always the last index, which in this case was 0.

There many ways to achieve what you looking for but simplest one would be to use custom html attributes and provide element that triggered event as argument to your callback.
This could be achieved like this
function handleClick(element) {
const elementData = element.getAttribute('data-my-data')
// do some stuff here with element data
}
Using your code:
d1.insertAdjacentHTML('beforeend', `
<div class="card card-small card-category">
<div class="card-del-btn">
<button data-my-data="here goes your data" onclick="handleClick(element)"> <b> × </b> </button>
</div>
</div>
`)

I am trying to pull a specific title from an array using Angular.
Whilst I can use ng-repeat to loop through all titles and print these to my news listing webpage, I only wish to pull the first heading in my array for the news details page. Do I need to use the ng-repeat or can I use something different?
I have tried using number:0 as well as json:0.
$scope.newsListings = [
{
title: "Why cooking is great";
},
{
title: "Windsurfing is fun";
}
];
<div ng-controller="primaryController">
<article>
<div ng-repeat="item in newsListings | json:0">
<h1>{{item.title }}</h1>
<p class="synopsis">{{item.synopsis}}</p>
</div>
<article>
</div>

If you want to show only one item, you can omit the ng-repeat part as you want only one item from your array. You need just to use index.
<div ng-controller="primaryController">
<article>
<div>
<h1>{{ newsListings[0].title }}</h1>
<p class="synopsis">{{ newsListings[0].synopsis }}</p>
</div>
<article>
</div>

You can actually use ng-model for this with a first element of array if you need 2 way binding as well (for inputs of course). For other purposes you can use just index.
<div ng-controller="primaryController">
<article>
<div>
<input type="text" ng-model="newsListings[0].title" />
</div>
<div ng-bind="newsListings[0]">
<h1>{{newsListings[0].title }}</h1>
<p class="synopsis">{{newsListings[0].synopsis}}</p>
</div>
<article>
</div>

I'm using a JSON API with Angular 4 frontend, now I'm trying to show the data of this JSON Object.
I used the following code:
<div *ngFor="let Questionnaire of struc.data">
<span>{{Questionnaire.attributes.content.headline}}</span><br>
<span>{{Questionnaire.attributes.content.text}}</span><br>
<span>{{Questionnaire.attributes.content.question}}</span>
</div>
<div *ngFor="let Questionnaire of struc.data">
<li>{{Questionnaire.attributes.content.answers}}</li>
</div>
It works, but I get my answer in the format:
überhaupt nicht,Sehr selten,einige Male,häufig,sehr häufig
instead of looking like this:
überhaupt nicht
Sehr selten
einige Male
häufig
sehr häufig
What's wrong with my code?

You can do this Questionnaire.attributes.content.answer.split(','),
<div *ngFor="let Questionnaire of struc.data">
<div *ngFor="let ans of Questionnaire.attributes.content.answers.split(',')">
<li>{{ans}}</li>
</div>
</div>
EDIT
After your JSON object post, seems answers is an array, you need to do this,
<div *ngFor="let Questionnaire of struc.data">
<div *ngFor="let ans of Questionnaire.attributes.content.answers">
<li>{{ans}}</li>
</div>
</div>
DEMO

I have an array as follows:
self.arrayObj : Array[2]
>0:Object
>Display1
->InnerObjects
>__proto
>1:Object
>Display2
-->InnerObjects
My interntion is to display "Display1" and "Display2" which are strings
I am doing the html binding as follows:
<div data-bind="foreach: self.arrayObj">
<span data-bind="text:$data[0]"></span>
</div>
How can I iterate over the array and display only texts?

In case your array is just an array of strings you should do the following:
<div data-bind="foreach: self.arrayObj">
<span data-bind="text:$data"></span>
</div>
In case your array is an array of objects which have for example a property 'Name', which is a string, then you do it like this. Knockout knows you're inside the foreach so it knows which element you're at while looping.
<div data-bind="foreach: self.arrayObj">
<span data-bind="text:Name"></span>
</div>

I would like to answer my own question.
It is not a simple thing when we want to bind the object with dynamic keys and values in the UI using Knockout js. If we have the fixed keynames then its easy.
What I did was , converted the json object to 2-D array :
In the .js file
var 2Darray = jsonObject.map(function(val) {
var keyname = Object.keys(val)[0];
var value = val[keyname];
return [keyname,value];
});
In the html file , we can bind it two times in a loop:
<div data-bind:"foreach:2Darray">
<div data-bind:"foreach: $data">
<div data-bind:"text:$data[0]">
<div data-bind:"foreach: $data[1]">
<div data-bind:"text:$data.val">
</div>
</div>
</div>

How to get 3.1 and 3.2 from following HTML using JQuery?
<div class="question3">
<div class="pure-u-1-2 questionNumber">
<p class="boldText">3.1 </p>
</div>
<div class="pure-u-1-2 questionNumber">
<p class="boldText">3.2 </p>
</div>
</div>
Tried JQuery:
$.map($('.questionNumber'), function (el) { alert(el.html) });
How to get question numbers dynamically for class question3 in JQuery?

You can use
var arr = $('.questionNumber').map(function(){ return +$(this).text() }).get()
This will produce this array: [3.1, 3.2]
Note that your own code fails because you use html instead of html().