How to display the 3collections data in one table in angular js - javascript

I have 3 collections and one object
#
scope.quessionary={};
$scope.jobquestions=[{"id": 2,
"category": "raju",
"question": "haii?",}];
$scope.companyquestionsquestions=[{"id": 2,
"category": "ramu",
"question": "hello?",}];
$scope.departmentquestions=[{"id": 2,
"category": "somu",
"question": "hello?",}];
Now i have to display the category and question field values inthe all collections in one table how can i display ?

You can do something like this:
$scope.quessionary = [];
$scope.quessionary = $scope.quessionary.concat($scope.jobquestions).concat($scope.companyquestionsquestions).concat($scope.departmentquestions);
And in the html:
<table>
....
<tr ng-repeat="question in quessionary">
<td>{{question.category}}</td>
<td>{{question.question}}</td>
</tr>
<table>

Related

How to create an HTML Vertical Table for compare from array of object..?

I want to create an html Vertical table with only re-render td inside th only after once th has been rendered with the having dynamic key as th. Using Only JavaScript
And I have two array of object data such as like this:
let Products = [
{
"Title": "Shirt",
"description": "Levies Shirt",
"image": "someImage1.png",
},
{
"Title": "Jeans",
"description": "Calvin Clean",
"image": "someImage2.png"
}
];
let Variants= [
{
"Collection": "Men-Shirt",
"Sku": "s-ch2",
"Size": "S"
},
{
"Collection": "Men-Jeans",
"Sku": "m-ch3",
"Size": "M"
},
];
I am completely unable to resolve that how to achieve it.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers
Using the link above as a template of the html structure of a vertical table:
for (product in Products){
// create new <td>
// add text from product["Title"]
// append <td> to proper <tr> (tr:nth-child(1) then tr:nth-child(2) ...)
// create new <td>
// add text from product["description"]
// etc ...
}

Merging Data Objects in Javascript for Display in VueJS

first time question asker.
I am working on trying to bring together data from two different API endpoints being served from a Django Rest Framework backend and rendering the display with VueJS on the frontend.
The challenge I am faced with is merging my questionnaire sections and questions with the associated answers. The questionnaire information is coming from one endpoint and the answers from another. Below is a sample of the data.
Sections & Questions Data
{
"survey_id": 2,
"survey_name": "My Survey",
"instructions": "Instructions.",
"other_header_info": ""
"section": [
{
"section_id": 2,
"section_name": "Section Name",
"section_title": "Section Title",
"section_instructions": "Some Instructions",
"section_required_yn": true,
"question": [
{
"question_id": 2,
"question_name": "Question One.",
"question_subtext": "None.",
"answer_required_yn": true,
"input_type_id": {
"id": 3,
"input_type_name": "Dropdown"
},
"option_group_id": "1 - 10",
"allow_multiple_option_answers_yn": false
},
{
"section_id": 3,
"section_name": "Another Section",
"section_title": "Section Title",
"section_instructions": "Section Instructions",
"section_required_yn": true,
"question": [
{
"question_id": 10,
"question_name": "Another question to be answered",
"question_subtext": "None.",
"answer_required_yn": true,
"input_type_id": {
"id": 3,
"input_type_name": "Dropdown"
},
"option_group_id": "1 - 10",
"allow_multiple_option_answers_yn": false
},
Answers Data
"results": [
{
"id": 100,
"answer_numeric": 4,
"answer_text": null,
"answer_yn": null,
"answer_group": "4-ojepljuu",
"question_id": 2,
},
{
"id": 101,
"answer_numeric": 1,
"answer_text": null,
"answer_yn": null,
"answer_group": "4-ojepljuu",
"user_id": 4,
"question_id": 5,
},
I know I need to match up the question_id fields from both the questionnaire sections data and the answers data. The problem I am facing is, how does one go about doing this?
I would like to create a new set of data that appends the answer data to the question data. I am also trying to build in some flexibility since I have multiple survey types with a variable number of sections and questions.
Trying to keep the data in sections so I can render the frontend views the way I would like.
I've tried looping through sections and questions, using the example I found here: Merge two array of objects based on a key but haven't had much luck.
Still relatively new - any information, guidance or even a working example would be greatly appreciated.
Update:
I've managed to make a bit of progress on this. Writing a small test function, I can now update the section/question object with some dummy data.
var a = this.answers;
var s = this.section;
var newObj = { answer_text: "test1", answer_numeric: "test2" };
for (var idx3 = 0; idx3 < s.length; idx3++) {
for (var idx4 = 0; idx4 < s[idx3].question.length; idx4++) {
Object.assign(s[idx3].question[idx4], newObj);
}
}
Each of the question objects within each section now includes the answer_text and answer_numeric key/value pairs.
The next challenge is to find the matching answer data based on matching the appropriate question_id within the answer object to the question_id in the question object.
Any thoughts?
I would store results as a dictionary, instead of an array:
var results_to_dict = function (results) {
var dict = {};
results.forEach(r => dict[r.question_id] = r);
return dict;
};
results = results_to_dict(results);
Now, you can show your questions in your template with their answers:
<div v-for="question in section.questions" :key="question.question_id">
<p>Question: {{question.question_name}}</p>
<p>Answer: {{answers[question_id].text}}</p>
</div>

Set list items in ng-model in a dropdownmenu angularjs

currently I stuck with an angularjs problem. The following scenario:
I have a Game entity and a Team entity. One Game can hold multiple Team objects. (ManyToMany Relationship)
In my frontend application I want to add a new Game with optional Teams. For the Teams I decided to use two dropdown-menus (each menu for one team).
Now I am not able to give the ng-model the correct values.
I tried something like this but it might be wrong:
<select class="form-control" ng-options="team.teamname for team in teams
track by team.id" ng-model="game.teams[0]">
<option value="" selected>-- No Team --</option>
</select>
<select class="form-control" ng-options="team.teamname for team in teams
track by team.id" ng-model="game.teams[1]">
<option value="" selected>-- No Team --</option>
</select>
As soon as I click the save button i get an error message "400: Unable to process JSON":
Possibly unhandled rejection: {"data":{"code":400,"message":"Unable to process JSON"},"status":400,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","data":{"teams":{"0":{"id":1,"games":[{"id":1,"date":20180810}],"teamname":"BVB"},"1":{"id":2,"games":[{"id":1,"date":20180810}],"teamname":"FCB"}},"date":"20180810"},"url":"/api/games","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"}},"statusText":"Bad Request"}
When creating the two Teams for a Game with Postman it works:
{
"date": 20180810,
"teams": [{"id": 1}, {"id": 2}]
}
Output:
{
"id": 1,
"date": 20180810,
"teams": [
{
"id": 1,
"games": [
{
"id": 1,
"date": 20180810
}
],
"teamname": "BVB"
},
{
"id": 2,
"games": [
{
"id": 1,
"date": 20180810
}
],
"teamname": "FCB"
}
]
}
Any suggestions how to set the ng-model (Game) with the values of the first and second dropdown-menus? thanks
I have added a screenshot of the form that i want to have:
If i understand well, when you do the request with postman, you send this:
{
"date": 20180810,
"teams": [{"id": 1}, {"id": 2}]
}
But your angular form is actually sending this:
{
"date": "20180810"
"teams": {
"0": {
"id": 1,
"games": [
{
"id": 1,
"date": 20180810
}
],
"teamname": "BVB"
},
"1": {
"id": 2,
"games": [
{
"id": 1,
"date": 20180810
}
],
"teamname": "FCB"
}
}
}
While the date looks fine, your teams is an object but your backend is expecting an array. You also have additional informations in your teams (like games and teamname, but i can't know if this is a problem for your backend.
Most of the time this kind of problems with Angularjs are not in the html template but in the controller. In your controller you should have something like this:
scope.game = {
date: 'something',
teams: []
};
I think your problem is that you don't initialize scope.game.teams as an array properly. So ng-model just initliaze it by itself with an object.
From what i gather you want to add multiple teams for each game, follow the checklist model, its probably what you want, https://vitalets.github.io/checklist-model/ from there you can pass the server a list of games for each team

Using nested ng-repeat with dynamic ng-model as object

Okay let me be honest as i am a beginner in angular i am not sure how to frame this question i will try my best to explain this question.
Pic 1 :
As you see in the above pic i have a situation where I have a list of classes, and each class will have no of sections under it. you can see a blue button on each row on clicking which i need to know which 'section' was selected.
This is the problem statement.
Now here is the HTML I have for this
<table class="table table-hover">
<tbody>
<tr>
<th>Syllabus</th>
<th>{{phrase.className}}</th>
<th>Select Section</th>
<th>{{phrase.Operations}}</th>
</tr>
<tr ng-repeat="class in classes| filter:searchText">
<td id="syl">
<span ng-repeat="(sid, syllabi) in syllabus" ng-if="sid == class.classAcademicYear">
{{ syllabi.yearTitle}}
</span>
</td>
<td id="cls">{{class.className}}</td>
<td id="sec">
<div class="form-group">
<select class="form-control" name="student_section" ng-model="selectedSection">
<option ng-selected='class.sections[$index].id' ng-repeat="(key, section) in class.sections" value="{{section.id}}">{{section.sectionName}}</option>
</select>
</div>
</td>
<td id="vew">
<button ng-click="edit(class.id)" type="button" class="btn btn-info btn-flat" title="{{phrase.ReadSchedule}}" tooltip><i class="fa fa-fw fa-th-list"></i></button>
</td>
</tr>
<tr ng-show="!classes.length">
<td class="noTableData" colspan="3">{{phrase.NoClasses}}</td>
</tr>
</tbody>
</table>
Here we see a nseted ng-repeat where i am creating table rows based on the list of classes, now this class object also holds the section object inside as you can see inner ng-repeat uses that classes.sections to iterate the options
Now the classes json object is as shown below
[{
"id": 11,
"className": "Class-1 (STATE)",
"classAcademicYear": 2,
"classSubjects": "[\"1\",\"2\",\"3\",\"4\",\"5\",\"6\"]",
"dormitoryId": null,
"sections": [{
"id": 11,
"sectionName": "Section -1 (STATE)",
"sectionTitle": "section title -1",
"classId": 11,
"teacherId": "[\"10\",\"11\",\"12\",\"13\",\"14\",\"15\"]"
}]
}, {
"id": 12,
"className": "Class-2",
"classAcademicYear": 2,
"classSubjects": "[\"0\"]",
"dormitoryId": null,
"sections": [{
"id": 12,
"sectionName": "Section -1",
"sectionTitle": "section title -1",
"classId": 12,
"teacherId": "[\"0\"]"
}]
}, {
"id": 13,
"className": "Class-3",
"classAcademicYear": 2,
"classSubjects": "[\"0\"]",
"dormitoryId": null,
"sections": [{
"id": 13,
"sectionName": "Section -1",
"sectionTitle": "section title -1",
"classId": 13,
"teacherId": "[\"0\"]"
}]
}, {
"id": 14,
"className": "Class-4",
"classAcademicYear": 2,
"classSubjects": "[\"0\"]",
"dormitoryId": null,
"sections": [{
"id": 14,
"sectionName": "Section -1",
"sectionTitle": "section title -1",
"classId": 14,
"teacherId": "[\"0\"]"
}]
}]
What I am trying to do is set a ng-model for the inner select dropdown element that is dynamic , something like below so that every time the section is selected i can set the blue button action to whatever section id is.
ng-model="selectedSection[class.id]"
which is not working.
I know this might not be sufficient information but if some one is interested to help solve me this i can share further details.
For checking what ng-repeat line was selected you should send values $index and $parent.$index (if you have nested ng-repeat).
<button ng-click="edit($index, $parent.$index)" type="button">
Does it help?

Efficient way to Populate Table with multidimensional JSON

I'm looking to the most efficient way to convert this json.
{
"Kitchen":{
"protocol":[
"pollin"
],
"id":[
{
"systemcode":31,
"unitcode":1
}
],
"state":"off"
},
"BBQ":{
"protocol":[
"pollin"
],
"id":[
{
"systemcode":31,
"unitcode":4
}
],
"state":"off"
},
"Server":{
"protocol":[
"pollin"
],
"id":[
{
"systemcode":15,
"unitcode":1
}
],
"state":"off"
}
}
Into the following table:
[Name] [Protocol] [Systemcode] [S] [State]
Kitchen pollin 31 1 off
BBQ pollin 31 4 off
Server pollin 15 1 off
My page consists of a table in html and jquery is already loaded.
<table class="table" id="tableDevices">
<thead>
<tr>
<th>Name</th>
<th>Protocol</th>
<th>Systemcode</th>
<th>Unitcode</th>
<th>State</th>
</tr>
</thead>
</table>
Now I'm looking for the fastest way to loop trough the JSON, and populate the table with the data. I first flattened the JSON, and then fed it to the table with a loop. However the code I modified to flatten the JSON was painfully slow. This is the my first time working with version control and javascript and I apparently didn't commit my code properly. I'm looking for the most efficient way to fill this table and I'm stuck myself so can someone show my the most efficient way to do this?
I'm going to assume you've parsed the JSON and have a variable, data, that refers to the parsed result.
Then it's a simple for-in loop:
var tbody = $("<tbody>");
var key, entry, tr;
for (key in data) {
entry = data[key];
tr = $("<tr>");
$("<td>").text(key).appendTo(tr);
$("<td>").text(entry.protocol[0]).appendTo(tr);
$("<td>").text(entry.id[0].systemcode).appendTo(tr);
$("<td>").text(entry.id[0].unitcode).appendTo(tr);
$("<td>").text(entry.state).appendTo(tr);
tr.appendTo(tbody);
}
tbody.appendTo("#tableDevices");
That said, you might look at a templating library like Handlebars instead.
Live Example:
// This stands in for the parsed JSON
var data = {
"Kitchen": {
"protocol": [
"pollin"
],
"id": [{
"systemcode": 31,
"unitcode": 1
}],
"state": "off"
},
"BBQ": {
"protocol": [
"pollin"
],
"id": [{
"systemcode": 31,
"unitcode": 4
}],
"state": "off"
},
"Server": {
"protocol": [
"pollin"
],
"id": [{
"systemcode": 15,
"unitcode": 1
}],
"state": "off"
}
};
var tbody = $("<tbody>");
var key, entry, tr;
for (key in data) {
entry = data[key];
tr = $("<tr>");
$("<td>").text(key).appendTo(tr);
$("<td>").text(entry.protocol[0]).appendTo(tr);
$("<td>").text(entry.id[0].systemcode).appendTo(tr);
$("<td>").text(entry.id[0].unitcode).appendTo(tr);
$("<td>").text(entry.state).appendTo(tr);
tr.appendTo(tbody);
}
tbody.appendTo("#tableDevices");
<table class="table" id="tableDevices">
<thead>
<tr>
<th>Name</th>
<th>Protocol</th>
<th>Systemcode</th>
<th>Unitcode</th>
<th>State</th>
</tr>
</thead>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Note that the JSON structure is fairly odd. You have arrays lying around that have just one entry in them.
Why not use Datables instead? You will have most of the burden of populating the table lifted from your shoulders.

Categories

Resources