I want to get every text to the array. But some div name have " " or "(" in the class name that I can't use find().
So How can I get all of them in array? Thank you for any help
#html source code.
<div id="main-0-QuoteHeader-Proxy">
<div class="Mb($m-module-24)">
<div class="D(f) Ai(c) Mb(6px)">
<h1 class="C($c-link-text) Fw(b) Fz(24px) Mend(8px)">1.name</h1>
<span class="C($c-icon) Fz(24px) Mend(20px)">2.id</span>
<div class="Flxg(2)">
<a class="Td(n) Px(8px) Py(3px) Fz(12px) Fw(b) Bdrs(11px) C(#188fff) Bgc($tag-bg-blue) Bgc($tag-bg-blue-hover):h" href="/class-quote?sectorId=40&exchange=TAI">3.cag</a>
</div>
<button class="Ff(buttonFont) O(n) Bd Bxsh(n) Trsdu(.3s) Whs(nw) C(#fff) Bdc($c-button) Bgc($c-button) Cur(p) D(f) Ai(c) Fx(n) Bdrs(100px) Px(15px) Py(3px) Lh(20px) Fz(14px) Fw(b) Mstart(8px) Bdw(2px)">
<svg class="Cur(p)" width="16" style="fill:#fff;stroke:#fff;stroke-width:0;vertical-align:bottom" height="16" viewBox="0 0 24 24" data-icon="star"><path d="M8.485 7.83l-6.515.21c-.887.028-1.3 1.117-.66 1.732l4.99 4.78-1.414 6.124c-.2 1.14.767 1.49 1.262 1.254l5.87-3.22 5.788 3.22c.48.228 1.464-.097 1.26-1.254l-1.33-6.124 4.962-4.78c.642-.615.228-1.704-.658-1.732l-6.486-.21-2.618-6.22c-.347-.815-1.496-.813-1.84.003L8.486 7.83zm7.06 6.05l1.11 5.11-4.63-2.576L7.33 18.99l1.177-5.103-4.088-3.91 5.41-.18 2.19-5.216 2.19 5.216 5.395.18-4.06 3.903z"></path></svg>
<span class="Mstart(8px)">4.add</span>
</button>
</div>
<div class="D(f) Jc(sb) Ai(fe)">
<div class="D(f) Fld(c) Ai(fs)">
<div class="D(f) Ai(fe) Mb(4px)">
<span class="Fz(32px) Fw(b) Lh(1) Mend(16px) D(f) Ai(c) C($c-trend-down)">5.num</span>
<span class="Fz(20px) Fw(b) Lh(1.2) Mend(4px) D(f) Ai(c) C($c-trend-down)">
<span class="Mend(4px) Bds(s)" style="border-color:#00ab5e transparent transparent transparent;border-width:9px 6.5px 0 6.5px"></span>
6.up
</span>
<span class="Jc(fe) Fz(20px) Lh(1.2) Fw(b) D(f) Ai(c) C($c-trend-down)">7.down</span>
</div>
<span class="C(#6e7780) Fz(12px) Fw(b)">8.2023/02/17 13:30</span>
</div>
<div class="D(f)">
<div class="D(f) Fld(c) Ai(c) Fw(b) Pend(8px) Bdendc($bd-primary-divider) Bdends(s) Bdendw(1px)">
<span class="Fz(16px) C($c-link-text) Mb(4px)">9.total num</span>
<span class="Fz(12px) C($c-icon)">10.total</span>
</div>
<div class="D(f) Fld(c) Ai(c) Fw(b) Px(8px) Bdendc($bd-primary-divider) Bdends(s) Bdendw(1px)">
<span class="Fz(16px) C($c-link-text) Mb(4px)">11.other num</span>
<span class="Fz(12px) C($c-icon)">12.other</span>
</div>
<div class="D(f) Fld(c) Ai(c) Fw(b) Pstart(8px)">
<span class="Fz(16px) Mb(4px) C($c-trend-up)">
<div class="D(f)">
13.(
<span class="D(f) Ai(c)">
<span class="Mend(4px) Bds(s)" style="border-color:transparent transparent #ff333a transparent;border-width:0 5px 7px 5px"></span>
14.100%
</span>
15.)
</div>
</span>
<span class="Fz(12px) C($c-icon)">16.count</span>
</div>
</div>
</div>
</div>
</div>
#my code:
function getTextToArray()
{
var URL = "https://tw.stock.yahoo.com/d/s/major_2330.html";
var source = UrlFetchApp.fetch(URL);
var html = source.getContentText();
const $ = Cheerio.load(html,{ decodeEntities: false });
Logger.log($('#main-0-QuoteHeader-Proxy').find('div').first().text());
}
this resule only can show the line "1.name2.id3.cag4.add5.num6.up7.down8.2023/02/17 13:309.total num10.total11.other num12.other13.(14.100%15.)"
And can't use the class name to find and will show the error "Error: Unmatched selector: ($c-link-text) Fw(b) Fz(24px) Mend(8px)"
I want resule can like array[0] = 1.name, array[1] = 2.id, array[2]= 3.cag.......
it looks like you want:
$('h1,span').get().map(el => $(el).text())
Related
question.component.ts
ngOnInit() {
this.challengeId = this.route.snapshot.paramMap.get('challengeId');
// this.selectedNoOfAttempt = this.noofattempts[1];
this.myForm = this._fb.group({
question: ['', [Validators.required]],
correctAnswers: this._fb.array([
this.initCorrectAnswer(),
]),
selectedNoOfAttempt: ['', [Validators.required]]
});
}
initCorrectAnswer() {
return this._fb.group({
correctAnswers: ['', Validators.required],
});
}
addAnswer() {
const control = <FormArray>this.myForm.controls['correctAnswers'];
control.push(this.initCorrectAnswer());
}
removeAnswer(i: number) {
const control = <FormArray>this.myForm.controls['correctAnswers'];
control.removeAt(i);
}
question.component.html
<div formArrayName="correctAnswers">
<div *ngFor="let correctAnswers of myForm.controls.correctAnswers.controls; let i=index" class="panel panel-default">
<div class="panel-heading">
<span>Answer {{i + 1}}</span>
<span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.correctAnswers.controls.length > 1" (click)="removeAnswer(i)">Remove</span>
</div>
<div class="panel-body" [formGroupName]="i">
<div class="form-group col-xs-3">
<input type="text" class="form-control" formControlName="correctAnswers">
<small [hidden]="myForm.controls.correctAnswers.controls[i].controls.correctAnswers.valid" class="text-danger">
Answer is required
</small>
</div>
</div>
</div>
</div>
<div class="margin-20">
<a (click)="addAnswer()" style="cursor: default">
Add another answer +
</a>
</div>
The code above works as it is intended, dynamically insert more fields if needed, and also remove. It also able to return all the dynamic fields, however it is storing the data as
correctAnswers (array)
[0] (object)
correctAnswers: "test" (string)
[1] (object)
correctAnswers: "abc" (string)
I would like to store the data as follow
correctAnswers (array)
[0] "test" (string)
[1] "abc" (string)
In your initCorrectAnswer() function you are adding form group with child form control to your form array, that is why you see it as array of objects. Instead of this, you should add form control:
initCorrectAnswer() {
return this._fb.control('', Validators.required);
}
I also added correctAnswers getter for convenient use in HTML:
get correctAnswers(): FormArray {
return this.myForm.get('correctAnswers') as FormArray;
}
updated add and remove functions:
addAnswer() {
this.correctAnswers.push(this.initCorrectAnswer());
}
removeAnswer(i: number) {
this.correctAnswers.removeAt(i);
}
here is HTML:
<form [formGroup]="myForm">
<div formArrayName="correctAnswers">
<div class="panel panel-default"
*ngFor="let correctAnswer of correctAnswers.controls; index as i">
<div class="panel-heading">
<span>Answer {{i + 1}}</span>
<span class="glyphicon glyphicon-remove pull-right"
*ngIf="correctAnswers.controls.length > 1"
(click)="removeAnswer(i)">Remove</span>
</div>
<div class="panel-body">
<div class="form-group col-xs-3">
<input type="text" class="form-control" [formControlName]="i">
<small [hidden]="correctAnswer.valid" class="text-danger">
Answer is required
</small>
</div>
</div>
</div>
</div>
</form>
StackBlitz: https://stackblitz.com/edit/angular-643srq?file=app%2Fapp.component.html
Official reference
There is no way for you to achieve it through Angular's reactive form, because every form group that is repeated (via your *ngFor) is an object. Note that your form group name is actually your *ngFor index: formGroupName = i; and that your form control is correctAnswers - that corresponds to your object property with name correctAnswers as you have expected it.
You can however, do some post processing though. Simply use an array map() to flatten your object into arrays:
var flattenedArray = this.myForm.correctAnswers.map(x=>x.correctAnswers);
I have this code at below:
<div ng-repeat="person in Emotions" class="crop-item">
<div class="text-left">
<ul class="list-group no-buletts">
<li class="list-group-item" style="width: 300px;">
<img class="crop-img" alt="crop image" src="http://192.168.153.131:7000/tmp/{{Emotions['emotion-original-image-ref']}}.jpg.crop-{{$index}}.jpg"></img>
Top score: {{Emotions["emotion-top-scores"].$index}}
</li>
<li ng-repeat='(scoreTitle,scoreValue) in person.scores' class="list-group-item">
<div class="row">
<div class="col-md-6 text-left">
<label for="{{scoreTitle}}">{{scoreTitle}}: </label>
</div>
<div class="col-md-6 text-left">
{{scoreValue * 100 | number:2}} %
</div>
</div>
</li>
</ul>
</div>
</div>
I have this "Emotions" object that have this content:
{
"emotion-status-code": 200,
"emotion-response": [{
"faceRectangle": {
"height": 72,
"left": 147,
"top": 122,
"width": 72
},
"scores": {
"anger": 0.00165787316,
"contempt": 0.000218306363,
"disgust": 0.0000283911031,
"fear": 3.707502e-7,
"happiness": 1.67207048e-8,
"neutral": 0.948927,
"sadness": 0.04916397,
"surprise": 0.000004111683
}
}],
"emotion-original-image-ref": "e8c3a383-bba8-4015-a9de-a5bbc70843b2",
"emotion-top-scores": ["neutral"]
}
The problem is in the snippet right here:
Top score: {{Emotions["emotion-top-scores"].$index}}
I've checked the '$index' and it´s bringing the index as expected from 'ng-repeat' but I couldn't access the value and I don't know why. I believe I'm doing something silly. I tried to do this:
Top score: {{Emotions["emotion-top-scores"][$index]}}
Top score: {{Emotions["emotion-top-scores"][0]}}
And failing again.
Could you please help me in this "epic" situation, please?
Well, I made it! But appealing to an ugly XHG. I´ve created a 'ng-model' variable and wrote the content of response body directly on this variable through controller. Works but sucks! In the controller...
$scope.topScores = res["emotion-top-scores"];
In the HTML
<li class="list-group-item" style="width: 300px;" ng-model="topScores" >
Hope there is better solution. That really sucks! I´m really shamed!
Ive been trying to make the angular carousel work, but iam currently stuck.
I am a newbie in angular, thus can i not get the ng-repeat too work correct.
what ive done:
<div id="slides_control">
<div>
<carousel interval="3000">
<slide ng-repeat="book in bookslider" active="book.active">
<div class="col-md-3"><img ng-src="{{book.img}}"></div>
<div class="col-md-3"><img ng-src="{{book[$index +1].img}}"></div>
<div class="col-md-3"><img ng-src="{{book[$index +2].img}}"></div>
<div class="col-md-3"><img ng-src="{{book[$index +3].img}}"></div>
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
</div>
$scope.bookslider = [
{
img: "images/headerslider/5.jpg"
},
{
img: "images/headerslider/4.jpg"
},
{
img: "images/headerslider/2.jpg"
},
{
img: "images/headerslider/3.jpg"
}
];
This display only the first image because it cannot "render" - book[$index +1].img how would one go about getting the next index item for this situation?
Working plunk: http://plnkr.co/edit/VcD8tKOtfQGuOgt4tO08
I gone through the plunker you provided and I under stand your requirement. I think the mistake that you made is where you loop the bookslider object. You need to loop through bookslider object instead of that you looped through the book object which is actually an individual object of the bookslider array.
You just change the carousel object like this to fix the issue.
<carousel interval="3000">
<slide ng-repeat="book in bookslider track by $index" active="book.active">
<div class="col-md-3"><img ng-src="{{bookslider[($index) %4 ].img}}" style="width=100px"></div>
<div class="col-md-3"><img ng-src="{{bookslider[($index+1) % 4].img}}"></div>
<div class="col-md-3"><img ng-src="{{bookslider[($index+2) % 4].img}}"></div>
<div class="col-md-3"><img ng-src="{{bookslider[($index+3) % 4].img}}"></div>
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
I have attached the working plunker here.
I get Data from an api and easily list them, now i want to change one element of those, to "default". I dont know how to control that,
Here is the js.
$scope.updateDefault = function() {
if (AuthService.isAuth()) {
Account.one().get().then(
function(account) {
**account.data.defaultMsisdn= $scope.element.isSelected;
$log.d("account: ", account.data);
account.data.put();**
}
);
}
};
here is the HTML:
<div id="container" style="width:650px">
<ol ng-repeat="element in accountmsisdn">
**<li style=" text-align:left; float:left">
<input type="radio" ng-model="element.isSelected" ng-click="updateDefault()">
<span>{{element.msisdn}} </span>
</li>**
<li style="text-align:center;float: inside" ng-switch="element.active">
<span ng-switch-when=true>
{{'view.settings.sender.active'| translate}}</span>
<span ng-switch-when=false>
{{'view.settings.sender.notactive'| translate}}</span>
<span ng-switch-default>
<strong> - </strong> </span>
</li>
You need to pass the current element as an argument to updateDefault(), so it knows what element to update:
<input type="radio" ng-model="element.isSelected" ng-click="updateDefault(element)" />
$scope.updateDefault = function (element) {
...
account.data.defaultMsisdn = element.isSelected;
..
};
I am trying to do following but it's not working.
<div ng-repeat="a in ar">
<div ng-repeat="b in br">
<div ng-if="a.num == b.num">{{b.type}}
</div>
</div>
</div>
I am trying to do array objectives comparing same values
arrays is
ar = [ {num:1, str:"a"}, {num:2, str:"b"}, {num:3, str:"c"} ];
br = [ {num:3, type:"text"}, {num:5, type:"number"}, {num:8, type:"date"}];
It is working, its creating the outside divs, you can see it if you add a reference to the a items:
<div ng-repeat="a in ar">
{{a.str}}
<div ng-repeat="b in br">
<div ng-if="a.num == b.num">
{{b.type}}
</div>
</div>
</div>