My code running wrong and making A instead of not answered - javascript

When I pdf is generated instead of not answering it is appearing as a for this code
function generatePDF() {
// Create a new PDF document
var doc = new jsPDF();
// Define an array of questions
var questions = [
"Question 1", "Question 2", "Question 3", "Question 4", "Question 5",
"Question 6", "Question 7", "Question 8", "Question 9", "Question 10",
"Question 11", "Question 12", "Question 13", "Question 14", "Question 15",
"Question 16", "Question 17", "Question 18", "Question 19", "Question 20",
"Question 21", "Question 22", "Question 23", "Question 24", "Question 25",
"Question 26", "Question 27", "Question 28", "Question 29", "Question 30",
"Question 31", "Question 32", "Question 33", "Question 34", "Question 35",
"Question 36", "Question 37", "Question 38", "Question 39", "Question 40",
"Question 41", "Question 42", "Question 43", "Question 44", "Question 45",
"Question 46", "Question 47", "Question 48", "Question 49", "Question 50",
"Question 51", "Question 52", "Question 53", "Question 54", "Question 55",
"Question 56", "Question 57", "Question 58", "Question 59", "Question 60",
"Question 61", "Question 62", "Question 63", "Question 64", "Question 65",
"Question 66", "Question 67", "Question 68", "Question 69", "Question 70",
"Question 71", "Question 72", "Question 73", "Question 74", "Question 75",
"Question 76", "Question 77", "Question 78", "Question 79", "Question 80",
"Question 81", "Question 82", "Question 83", "Question 84", "Question 85",
"Question 86", "Question 87", "Question 88", "Question 89", "Question 90"
];
for (var i = 0; i < questions.length; i++) {
// Check if there is a radio button selected for the current question
var radioButton = document.querySelector(`input[name="${i + 1}"]:checked`);
if (radioButton) {
var answer = radioButton.value;
} else {
// Check if there is an input text field for the current question
var inputField = document.querySelector(`input[name="${i + 1}"]`);
if (inputField) {
var answer = inputField.value;
} else {
var answer = "Not answered";
}
}
// Wrap the text in cells
doc.cell(20, 20 + i * 10, 100, 10, questions[i], i);
doc.cell(50, 20 + i * 10, 100, 10, "Answer: " + answer, i);
}
// Save the PDF
doc.save("Question and answers.pdf");
}
I was expecting it will generate not answered if questions are left blank but it is showing as a (option) for this div
<div id="question75" class="question" style="display:none;">
<p>Question 75</p>
<div id="answers" class="answers">
<label>
<input type="radio" name="75" value="A">
a
</label>
<label>
<input type="radio" name="75" value="B">
b
</label>
<label>
<input type="radio" name="75" value="C">
c
</label>
<label>
<input type="radio" name="75" value="D">
d
</label>
</div>
</div>

Related

Remove element from array inside array of objects if present in another array of objects

I am working with a large array of objects. I have simplified my data structure to the following. Each object has an id and each id has two arrays associated with it type1 and type2.
const arr = [{id: "12345", type1: ["Hat 1", "Hat 3"], type2: ["Hat 2", "Glove 4"]},
{id: "12345", type1: ["Glove 1", "Hat 1"], type2: ["Glove 3", "Hat 2"]},
{id: "54321", type1: ["Jacket 1", "Hat 4"], type2: ["Hat 3", "Hat 4"]},
{id: "54321", type1: ["Glove 2", "Hat 2"], type2: ["Glove 3", "Jacket 4"]},
{id: "13579", type1: ["Hat 1", "Hat 2"], type2: ["Hat 3", "Hat 4"]},
{id: "13579", type1: ["Glove 1", "Glove 2"], type2: ["Glove 3", "Glove 4"]}]
I have a "lookup" array of objects. Each object has an id and a title
const lookup = [{id: "12345", title: "Hat 1"},
{id: "12345", title: "Hat 2"},
{id: "12345", title: "Glove 3"},
{id: "54321", title: "Hat 3"}
{id: "54321", title: "Jacket 4"},
{id: "54321", title: "Glove 5"},
{id: "13579", title: "Hat 2"},
{id: "13579", title: "Jacket 3"}]
I need to use the "lookup" object for any matching id that has a title I need to remove it from type1 or type2 or both. So my resulting array of objects would look something like so
const result = [{id: "12345", type1: ["Hat 3"], type2: ["Glove 4"]},
{id: "12345", type1: ["Glove 1"], type2: []},
{id: "54321", type1: ["Jacket 1", "Hat 4"], type2: ["Hat 4"]},
{id: "54321", type1: ["Glove 2", "Hat 2"], type2: ["Glove 3"]},
{id: "13579", type1: ["Hat 1"], type2: ["Hat 3", "Hat 4"]},
{id: "13579", type1: ["Glove 1", "Glove 2"], type2: ["Glove 3", "Glove 4"]}]
The duplicates and having to search through both arrays for any matching id's is confusing me. Is there a simple way to do this or maybe a better way to structure the data so it's not so convoluted?
Loop through arr and for each entry of arr, loop through lookup to compare and modify arr
for(let arrEntry of arr) {
let id = arrEntry.id;
let type1 = arrEntry.type1;
let type2 = arrEntry.type2;
for(let lookupEntry of lookup) {
let title = lookupEntry.title;
if(lookupEntry.id === id && type1.includes(title)) {
type1.splice(type1.indexOf(title), 1);
}
if(lookupEntry.id === id && type2.includes(title)) {
type2.splice(type2.indexOf(title), 1);
}
}
}
console.log(arr)
Let's not mutate the original data, and create a new resultant array. you can use map, filter and some of Array
arr.map(({id, type1, type2}) => ({
id,
type1: type1.filter(t => !lookup.some(l => id===l.id && l.title === t)),
type2: type2.filter(t => !lookup.some(l => id===l.id && l.title === t))
}));
Here is an working example:
const arr =[
{id: "12345", type1: ["Hat 1", "Hat 3"], type2: ["Hat 2", "Glove 4"]},
{id: "12345", type1: ["Glove 1", "Hat 1"], type2: ["Glove 3", "Hat 2"]},
{id: "54321", type1: ["Jacket 1", "Hat 4"], type2: ["Hat 3", "Hat 4"]},
{id: "54321", type1: ["Glove 2", "Hat 2"], type2: ["Glove 3", "Jacket 4"]},
{id: "13579", type1: ["Hat 1", "Hat 2"], type2: ["Hat 3", "Hat 4"]},
{id: "13579", type1: ["Glove 1", "Glove 2"], type2: ["Glove 3", "Glove 4"]}
],
lookup = [
{id: "12345", title: "Hat 1"},
{id: "12345", title: "Hat 2"},
{id: "12345", title: "Glove 3"},
{id: "54321", title: "Hat 3"},
{id: "54321", title: "Jacket 4"},
{id: "54321", title: "Glove 5"},
{id: "13579", title: "Hat 2"},
{id: "13579", title: "Jacket 3"}
],
res = arr.map(({id, type1, type2}) => ({
id,
type1: type1.filter(t => !lookup.some(l => id===l.id && l.title === t)),
type2: type2.filter(t => !lookup.some(l => id===l.id && l.title === t))
}));
console.log(res);

Fixing gap between sections in different media queries while using bootstrap columns

I am practicing web developing with AngularJS. I have a ul called itemList which looks like this in my app.js file
bootstrapColumnMdWidth: "6",
itemList: [
"Item 1",
"Item 2",
"Item 3",
"Item 4",
"Item 5",
"Item 6",
"Item 7",
]
},{
bootstrapColumnMdWidth: "6",
itemList: [
"Item 8",
"Item 9",
"Item 10",
"Item 11",
"Item 12",
"Item 13",
"Item 14",
]
},{
bootstrapColumnWidth is a dynamic class that I made through which I assign bootstrap column width to an element. I wanted the items from the two lists to be next to each other, so each itemList is given width 6.
So on my laptop, this looks like this:
"Item 1", "Item 8",
"Item 2", "Item 9",
"Item 3", "Item 10",
"Item 4", "Item 11",
"Item 5", "Item 12",
"Item 6", "Item 13",
"Item 7", "Item 14",
This is exactly what I wanted; Two lists that are spaced equally with two 6 columns.
Now the problem that I am having is that, since I have two itemLists instead of one, when my view is mobile, it will look like this:
"Item 1",
"Item 2",
"Item 3",
"Item 4",
"Item 5",
"Item 6",
"Item 7",
"Item 8",
"Item 9",
"Item 10",
"Item 11",
"Item 12",
"Item 13",
"Item 14",
The gap between the lists is an issue for me. I still want to keep my two lists separate with their respective width values, but on a mobile phone, I want to have all the items displayed without the gap in between. Is there any quick fix for this ?
You would need to remove the 'margin-bottom' from the first list using CSS for the xs breakpoint:
#media (max-width: $screen-xs-max) {
.parent-element ul:first-of-type {
margin-bottom: 0;
}
}

How to get descendants of Json object

How do I get all descendants of of a json object and filter it. the following is a c# code and I want to be able do it in angular side. Some part of it is a Linq. I am trying to select all leaf children.
e.g. if the following is the input, the answer could be at any level deep.
{
"title": "first question?",
"yes": {"title": "answer A" },
"no": {
"title": "second question?",
"yes": {
"title": "thirsd question?",
"yes": {
"title": "Fifth question?",
"yes": {
"title": "fourth question",
"yes": {"title": "answer D"},
"no": {
"title": "another question?",
"yes": { "title": "answer E" },
"no": {"title": "answer F"}
}
},
"no": {"title": "answer B"}
},
"no": {"title": "Answer F"}
},
"no": {"title": "Answer G"}
}
}
The output would be:
["answer A", "answer B", "answer D", "Answer F", "Answer G", "answer E"]
Check this snippet
var obj={
"title": "first question?",
"yes": {"title": "answer A" },
"no": {
"title": "second question?",
"yes": {
"title": "thirsd question?",
"yes": {
"title": "Fifth question?",
"yes": {
"title": "fourth question",
"yes": {"title": "answer D"},
"no": {
"title": "another question?",
"yes": { "title": "answer E" },
"no": {"title": "answer F"}
}
},
"no": {"title": "answer B"}
},
"no": {"title": "Answer F"}
},
"no": {"title": "Answer G"}
}
}
var titles=[];
getTitle(obj);
function getTitle(obj){
var keyLen=Object.keys(obj).length;
Object.keys(obj).forEach(function(key){
if(keyLen==1 && key=="title")
titles.push(obj[key]);
else if(obj[key] instanceof Object)
getTitle(obj[key]);
});
}
console.log(titles);
Hope this helps

Need help to extract data from Javascript object?

Hello I have this data:
var data={
"city_id": "2",
"dist": "2",
"City Name 1": [
{
"id": 1,
"name": "name 1",
"address": "address 1",
"tel": "tel 1",
"Radio": "0",
"surgery": "0"
},
{
"id": 2,
"name": "name 2",
"address": "address 2",
"tel": "tel 2",
"Radio": "0",
"surgery": "0"
}
],{
"city_id": "2",
"dist": "2",
"City Name 2": [
{
"id": 1,
"name": "name 1",
"address": "address 1",
"tel": "tel 1",
"Radio": "0",
"surgery": "0"
},
{
"id": 2,
"name": "name 2",
"address": "address 2",
"tel": "tel 2",
"Radio": "0",
"surgery": "0"
}
]
}
};
I want to loop through this JSON data to extract City_id, dist_id, City Name, and then another loop to get name and address and telephone. The data format is not correct, I don't know how to fix it.
I appreciate your help. Thank you
Your brackets are off making this not a valid json.
var data={ //------------------------------------open
"city_id": "2",
"dist": "2",
"City Name 1": [
{//----------------------open
"id": 1,
"name": "name 1",
"address": "address 1",
"tel": "tel 1",
"Radio": "0",
"surgery": "0"
},//----------------------close
{//-----------------------open
"id": 2,
"name": "name 2",
"address": "address 2",
"tel": "tel 2",
"Radio": "0",
"surgery": "0"
}//----------------------close
],{//----------------------------------open (problem is here. There is nothing index this object}
"city_id": "2",
"dist": "2",
"City Name 2": [
{//-----------------------open
"id": 1,
"name": "name 1",
"address": "address 1",
"tel": "tel 1",
"Radio": "0",
"surgery": "0"
},//----------------------close
{//-----------------------open
"id": 2,
"name": "name 2",
"address": "address 2",
"tel": "tel 2",
"Radio": "0",
"surgery": "0"
}//----------------------close
]
}//----------------------------------close
}; //------------------------------------------------close
That bit needs to be in the array or removed from the json.

angular load local json file via services

I am trying to load a local json file within the same directory as my service file.
No JS errors and under the Net tab, I can see that the json file loaded.
Yet setting the response txt to the var "static_obj" doesn't load JSON data. When I have the JSON data hard coded var WEBTEST = {} it loads just fine. Why?
'use strict';
webTestApp.factory('webtest', function ($q, $timeout) {
var Webtest = {
//Methods exposed for the class
fetch: function(callback){
//fetch the data from below hard coded
var deferred = $q.defer();
var static_obj = [];
var promised = deferred.promise;
var xobj = new XMLHttpRequest();
//giving an artificial delay of .03 seconds..
//controller will render the page & will show the service data after .03 seconds
$timeout(function(){
xobj.overrideMimeType("application/json");
xobj.open('GET', 'angular/scripts/services/webtest.json', true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
static_obj = $.parseJSON(xobj.responseText);
}
};
xobj.send(null);
promised.then(callback(static_obj))
}, 30);
return promised;
}
}
return Webtest;
});
The following code works just fine, but I want to be able to load json files rather than hard code the JSON.
'use strict';
webTestApp.factory('webtest', function ($q, $timeout) {
var Webtest = {
//Methods exposed for the class
fetch: function(callback){
//fetch the data from below hard coded
var deferred = $q.defer();
var static_obj = null;
var promised = deferred.promise;
//giving an artificial delay of .03 seconds..
//controller will render the page & will show the service data after .03 seconds
$timeout(function(){
static_obj = WEBTEST;
promised.then(callback(static_obj))
}, 30);
return promised;
}
}
return Webtest;
});
var WEBTEST = [
{"id": "0","Name": "Items 0", "Description": "Description 0"},
{"id": "1","Name": "Items 1", "Description": "Description 1"},
{"id": "2","Name": "Items 2", "Description": "Description 2"},
{"id": "3","Name": "Items 3", "Description": "Description 3"},
{"id": "4","Name": "Items 4", "Description": "Description 4"},
{"id": "5","Name": "Items 5", "Description": "Description 5"},
{"id": "6","Name": "Items 6", "Description": "Description 6"},
{"id": "7","Name": "Items 7", "Description": "Description 7"},
{"id": "8","Name": "Items 8", "Description": "Description 8"},
{"id": "9","Name": "Items 9", "Description": "Description 9"},
{"id": "10","Name": "Items 10", "Description": "Description 10"},
{"id": "11","Name": "Items 11", "Description": "Description 11"},
{"id": "12","Name": "Items 12", "Description": "Description 12"},
{"id": "13","Name": "Items 13", "Description": "Description 13"},
{"id": "14","Name": "Items 14", "Description": "Description 14"},
{"id": "15","Name": "Items 15", "Description": "Description 15"},
{"id": "16","Name": "Items 16", "Description": "Description 16"},
{"id": "17","Name": "Items 17", "Description": "Description 17"},
{"id": "18","Name": "Items 18", "Description": "Description 18"},
{"id": "19","Name": "Items 19", "Description": "Description 19"},
{"id": "20","Name": "Items 20", "Description": "Description 20"},
{"id": "21","Name": "Items 21", "Description": "Description 21"},
{"id": "22","Name": "Items 22", "Description": "Description 22"},
{"id": "23","Name": "Items 23", "Description": "Description 23"},
{"id": "24","Name": "Items 24", "Description": "Description 24"},
{"id": "25","Name": "Items 25", "Description": "Description 25"},
{"id": "26","Name": "Items 26", "Description": "Description 26"},
{"id": "27","Name": "Items 27", "Description": "Description 27"},
{"id": "28","Name": "Items 28", "Description": "Description 28"},
{"id": "29","Name": "Items 29", "Description": "Description 29"},
{"id": "30","Name": "Items 30", "Description": "Description 30"},
{"id": "31","Name": "Items 31", "Description": "Description 31"},
{"id": "32","Name": "Items 32", "Description": "Description 32"},
{"id": "33","Name": "Items 33", "Description": "Description 33"},
{"id": "34","Name": "Items 34", "Description": "Description 34"},
{"id": "35","Name": "Items 35", "Description": "Description 35"},
{"id": "36","Name": "Items 36", "Description": "Description 36"},
{"id": "37","Name": "Items 37", "Description": "Description 37"},
{"id": "38","Name": "Items 38", "Description": "Description 38"},
{"id": "39","Name": "Items 39", "Description": "Description 39"},
{"id": "40","Name": "Items 40", "Description": "Description 40"},
{"id": "41","Name": "Items 41", "Description": "Description 41"},
{"id": "42","Name": "Items 42", "Description": "Description 42"},
{"id": "43","Name": "Items 43", "Description": "Description 43"},
{"id": "44","Name": "Items 44", "Description": "Description 44"},
{"id": "45","Name": "Items 45", "Description": "Description 45"}
];
Is there a reason why you don't use build in $http service to fetch JSON? It can be simpler with it:
webTestApp.factory('webtest', function($timeout, $http) {
var Webtest = {
fetch: function() {
return $timeout(function() {
return $http.get('webtest.json').then(function(response) {
return response.data;
});
}, 30);
}
}
return Webtest;
});
and in controller:
webtest.fetch().then(function(data) {
$scope.data = data;
});
Here is fixed code:
http://plnkr.co/edit/f1HoHBGgv9dNO7D7UfPJ?p=preview
Anyway, you problem was that you returned promise but never resolved (deferred.resolve) it. in this line
promised.then(callback(static_obj))
you don't resolve promise but manually invoke callback with some data. It worked because in case of hardcoded json object it's already available in page, but in case of ajax request you tried to call it before response has come. So you would need to move promised.then(callback(static_obj)) into onreadystatechange function. But if you go with this way you don't need deferred and promise at all, you just use callback.

Categories