So to cut this quick, here is what I am trying to do.
I have two JSON outputs and I am looping through all of the data, I can output the item name and website URL successfully, these are working. However, each job has a department_id and each department has an id. I can pass both sets of ids but I need to put the correct department with the job, so I need someway of cross-referencing the ids so the department is shown on the correct job.
Here is what I have so far
<script>
(function() {
const jobPositions = document.getElementById('jobPositions');
var jobs = $.ajax({
url : 'https://www.welcomekit.co/api/v1/external/jobs?access_token=redac&organization_reference=redac&websites=true&status=published',
dataType: 'json'
});
var jobDepartments = $.ajax({
url: 'https://www.welcomekit.co/api/v1/external/departments?access_token=redac&organization_reference=redac',
dataType: 'json'
});
$.when(jobs, jobDepartments).done(function(jobs, jobDepartments) {
var data1 = jobs[0];
var data2 = jobDepartments[0];
$.each(data1, function(i, item) {
var start = i++;
var jobDept = item.department_id;
var jobID = data2[i].id;
var JobDeptName = data2[i].name;
const dept = jobID === jobDept;
console.log(jobID, jobDept, dept);
if(start) {
$(jobPositions).append('\
<a target="_blank" href="'+ item.websites[1].url +'" class="jobPosition-item d-md-flex justify-content-between align-items-center flex-wrap">\
<div>\
<span class="jobPositions-name">' + item.name + '</span>\
</div>\
<div class="right right-info d-flex align-items-center">\
<span class="jobPositions-profession">' + JobDeptName + '</span>\
<div class="d-flex">\
<img src="/hubfs/www/about/white-icon-arrow.png" height="11" width="11" alt="arrow">\
</div>\
</div>\
</a>\
');
}
});
});
})();
</script>
The code here (I'll reference with comments)
//gets the department_id from item
var jobDept = item.department_id
//gets the department id from data2
var jobID = data2[i].id
//gets the name from each department to be used in the HTML
var JobDeptName = data2[i].name;
//This is to see whether both ids match, not sure if this is the right way to do this
const dept = jobID === jobDept;
//outputs everything
console.log(jobID, jobDept, dept);
The result I get is this:
Which displays this
This is incorrect as both of these jobs are under 10893 so not the right ID, it's also not showing all item responses I assume due too the undefined error but every job has a department.
I'm not sure what the best way to do this is, any suggestions welcome.
The error is here: var jobID = data2[i].id;. You apply index of data1 array to data2 array. It should be something like this.
var job = data2.find(d => d.id === item.department_id);
if(job)
var jobID = job.id;
Related
I have a filter in ng-repeat and ng-if condition and there almost always will be less then 10 results per page (10 results is what I get from API).
My idea is that in js file should be a cycle with condition
First we declare variable so we can check the length
var numberOfArticlesOnPage = container.children.length
console.log(numberOfArticlesOnPage)
for (i = 0; numberOfArticlesOnPage < 10); i++ {
$scope.pageNumber = $scope.pageNumber + 1
var i=1
i++
$http(
{
method: 'GET',
url:
//Here I put i instead of page number so it loads next page and every time we create results[i] with new number in the end
'https://api.nytimes.com/svc/search/v2/articlesearch.json?fq=news_desk:("Politics")&page=' + i + '&api-key=groQeNemKAhk7QjDWircgauo5jYVcwez', /* Most recent */
}).then(function successCallback(result) {
$scope.results[i] = result.data.response.docs;
}, function errorCallback(result) {
console.log("there's a error, man...");
});
//Check the length again
var container = document.querySelector(".container");
var numberOfArticlesOnPage = container.children.length```
//And that is the template where it should be shown
```<div class="container">
<div class="box" ng-repeat="result in results | filter : '!trump'" ng-if="result.multimedia[2].url != null">
<h2>{{result.headline.main}}</h2>
<p class="abstract">{{result.abstract}}</p>
<img src="https://static01.nyt.com/{{result.multimedia[0].url}}">
<p></p>
<a ui-sref="article ({
articleSlug:'{{result.headline.main | slugify}}',
title: '{{result.headline.main}}',
url: '{{result.web_url}}',
image: 'https://static01.nyt.com/{{result.multimedia[0].url}}',
externalUrl: '{{result.url}}'
})">Read more...</a>
</div>
</div>```
//But I don't know how to write a code in the template so it can take more data?
I am working on a Javascript that aims to return then manipulate an object from a clicked button. I am now stuck how can i get its object then process it on a post method. On my button I have this:
<button type="submit" name="submit" form="form-add" id="export-btn" class="btn btn-small" style="border-radius: 0;"><i class="fas fa-save"></i><span class="button-save"></span>Save</button>
and i have this javascript method:
<script type="text/javascript">
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');
...
// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function () {
var $rows = $TABLE.find('tr:not(:hidden)');
var headers = [];
var data = [];
// Get the headers (add special header logic here)
$($rows.shift()).find('th:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
// Turn all existing rows into a loopable array
$rows.each(function () {
var $td = $(this).find('td');
var h = {};
// Use the headers from earlier to name our hash keys
headers.forEach(function (header, i) {
h[header] = $td.eq(i).text();
});
data.push(h);
});
// Output the result
$EXPORT.text(JSON.stringify(data));
return data;
});
</script>
and on top of my page I have this:
if(isset($_POST['submit'])){
echo "Test";
// Process here the object
}
but How can i access those data, since $EXPORT.text(JSON.stringify(data)); output a JSON, that looks like this [{"id":"1","Val":"Sample","data":"Sample Date"}] on my paragraph tag.
You can't post data from paragraph.
Create hidden input in the form and assign the data to it.
$(this).append($("<input />", { name : "foo", value : data, type : "hidden" }))
I have a working html form (in laravel) that is using a javascript call to employe Ajax.
Right now I'm using console log to make sure my click event shows the variables which it does.
However, because of how my values are below, I get multiple values in one variable and I'm wondering if there's a way to parse them into their own.
For example, in my form I have multiple values sharing table cells:
<form id="saveLineup">
#foreach($lists as $list)
<tr style="text-align:center;">
<td id="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
<td id="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
<td id="category">{{$list['CATEGORY']}}</td>
<td><input id="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
</tr>
#endforeach
</form>
But when I log my variables I get
category: "categoryOne" //which is correct
detailColor: "123/Blue - Description"
productNumber: 123 - productOne
What I'd like to do is parse those and have it all as separate values like so:
category:"categoryOne"
detail: "123"
color: "Blue"
productNumber: "123"
productDescription: "productOne"
Is there a way to do that within my JS?
$("#addToLineup").click(function (e) {
var productNumber = document.getElementById("productNumber").innerHTML = productNumber;
var detailColor = document.getElementById("detailColor").innerHTML = detailColor;
var category = document.getElementById("category").innerHTML = category;
updatedata.productNumber = productNumber;
updatedata.detailColor = detailColor;
updatedata.category = category;
$.ajax({
url: "/test/addToLineup",
data: updatedata,
_token: phpVariables.csrfToken,
type: "POST",
beforeSend: function () {
showLoading(element);
},
success: function (data) {
location.reload();
},
});
});
I believe the simplest way is splitting your variables like this:
var detailColor = "123/Blue - Description";
var productNumber = "123 - productOne";
var first = detailColor.split(' - ');
var just_color = first[0].split('\/');
var detail = just_color[0];
var color = just_color[1];
var second = productNumber.split(' - ');
var product_number = second[0];
var product_description = second[1];
console.log(detail , color, product_number, product_description);
I'm sending html back from my controller with this function :
$scope.filterLocation=function(obj){
var loc = $filter('filter')( $scope.locationss, {'product_code':obj});
var htmlstring = "";
angular.forEach(loc, function(value, key) {
htmlstring = '<div ng-click="locationModal()">' + htmlstring + value.location_description + '</div>';
})
return $sce.trustAsHtml(htmlstring);
}
I then have this html to show the list of locations :
<td><span ng-bind-html="filterLocation(l.productcode)" style="cursor: pointer;"></span></td>
The issue is, as you can see in the controller im sort of injecting '<div ng-click="locationModal()">' and when i view the inspector the function is there correctly :
<span ng-bind-html="filterLocation(l.productcode)" style="cursor: pointer;" class="ng-binding"><div ng-click="locationModal()">A5AL</div></span>
But when i try to click it i get no results, is it because it is inside the ng-bind-html? it was a div but i changed it to a span to see if that changed anything.
I'm doing this fast for the moment, but hopefully you'll have the begin of an answer.
You could do some workaround like this :
$scope.htmlstrings = [];
var string = {
htmlLoc: ''
};
angular.forEach(loc, function(value, key) {
string.htmlLoc= string.htmlLoc+ value.location_description;
$scope.htmlstrings.push(string);
})
I don't understand why you do htmlstring = htmlstring + value.location_description; tho.
Then :
<span ng-init="filterLocation(l.productcode);" ng-repeat="htmlstring in htmlstrings">
<div ng-click="locationModal();" ng-bind="htmlstring.htmlLoc"></div>
</span>
You can change this to a return way with : <span ng-init="htmlstrings = filterLocation(l.productcode);" ng-repeat="htmlstring in htmlstrings">
And without using var string = {} but var string = '' html looks like that:
<span ng-init="htmlstrings = filterLocation(l.productcode);" ng-repeat="htmlstring in htmlstrings">
<div ng-click="locationModal();" ng-bind="htmlstring"></div>
</span>
I'll develop this later. Hope it works in your case.
Hi i having problem when i retrieve data from firebase in console.log($scope.statusbaca) it display 2 query true and false. but when it showing in the app it only display false. Sorry for my bad english. English is not my native language. Hope you understand my problem
App return false but console log display true and false
and this is my code
Template
<div ng-repeat= "item in users">
<div class="list card" style="padding:1%;">
<div class="col-50" style="float:left;">
<h5>{{item.displayName}} - {{item.handphone}}</h5>
<h5>{{item.email}}</h5>
</div>
<div class="col-33" style="float:right; position: relative;" ng-repeat = "datas in statusbaca">
<h5>{{datas}}</h5>
</div>
</div>
</div>
Controller
var rootRef = new Firebase('https://example-app.firebaseio.com/');
var childUsers = rootRef.child('users');
var childDate = rootRef.child('tanggal');
var rekapId = $stateParams.rekapId;
console.log(rekapId);
childDate.child(rekapId).child('tanggalBaca').once('value',function(snap){
$timeout(function() {
var snapshot= snap.val();
$scope.tanggal = snapshot;
console.log($scope.tanggal);
myAfterFunction();
});
})
function myAfterFunction(){
var dates = $scope.tanggal;
console.log(dates);
var rekapUsers = childUsers.on('value', function(snapshot){
snapshot.forEach(function(childSnapshot){
var key = childSnapshot.key();
console.log(key);
var childStatus = childUsers.child(key+'/status/'+dates);
childStatus.on('value',function(grandsnap){
var snapval =grandsnap.val();
$scope.statusbaca = snapval;
$scope.key = key;
console.log($scope.statusbaca);
console.log($scope.key);
})
})
var snapshotVal = snapshot.val();
$scope.users =snapshotVal;
console.log($scope.users);
})
}
Any idea what's wrong with my code and how to fix this? thanks
I'm not sure if this will fix it but your div elements are unbalanced.
You should add a ending div element like this,
<div class="col-33" style="float:right; position: relative;" ng-repeat = "datas in statusbaca">
<h5>{{datas}}</h5>
</div>
Also, I can't find some of the variables referenced by the HTML in the JavaScript and rather than having your
value output like this:
<h5>{{datas}}</h5>
you should have it like this:
<h5>{{datas.THE NAME OF YOUR KEY:VALUE PAIR}}</h5>
I can't test it since you're using firebase but, I would do quick run through with your code.