i have a json and i create a simple dynamic form based on my json file . there are labels and each lables are exist in divs seperately.but there is a problem in this code that this code does not show my inputs. how to appends them inside each divs below each lable?
this code should show input but does not work.
here is my code :
document.body.onload = addElement;
function addElement() {
var schema = [{
"queestion": "Name",
"type": "128",
"attrs": [{
"attr": {
"name": "class",
"value": "nofilling2 engword"
}
},
{
"attr": {
"name": "id",
"value": "name"
}
},
{
"attr": {
"name": "type",
"value": "text"
}
},
{
"attr": {
"name": "placeholder",
"value": "Name"
}
},
{
"attr": {
"name": "name",
"value": "_root.passengerinfo__1.passengerinfo.fullname.firstname"
}
}
]
},
{
"queestion": "Family",
"type": "128",
"attrs": [{
"attr": {
"name": "class",
"value": "nofilling2 engword"
}
},
{
"attr": {
"name": "id",
"value": "family"
}
},
{
"attr": {
"name": "type",
"value": "text"
}
},
{
"attr": {
"name": "placeholder",
"value": "Family"
}
},
{
"attr": {
"name": "name",
"value": "_root.passengerinfo__1.passengerinfo.fullname.lastname"
}
}
]
}
]
for (var i = 0; i < schema.length; i++) {
var type = schema[i].type;
if (type == 128) {
var titleinput = schema[i].queestion;
var newDiv = document.createElement("div");
newDiv.className = 'c-infoo';
var newContent = document.createElement('label');
newContent.className = 'abs-tlt';
newDiv.appendChild(newContent);
newContent.innerHTML = titleinput + " : ";
document.getElementById('tblreserve').appendChild(newDiv);
var string = "<input ";
for (var y = 0; y < schema[i].attrs.length; y++) {
string += schema[i].attrs[y].attr.name + '="' + schema[i].attrs[y].attr.value + '" '
}
string += ">";
newDiv.appendChild = string;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="tblreserve"></div>
In your last line you wrote newDiv.appendChild=string;.
But stringas its name says is a String and can't be appended as an child.
You can use your string by writing newDiv.innerHTML+=string; instead.
PS: Please fix your indentation style. It doesn't look very nice...
Related
I am having an json object below. I want to delete a part if the question value is empty. So according to below json I need to delete the id=7602 portion.
[ {
"id": 9333,
"component": "question_pool",
"sub_comp_arr": [
{
"id": 7769,
"component": "question",
"sub_comp_arr": [
{
"id": 2552,
"component": "question_segment",
"value": "Answer1"
},
{
"id": 1011,
"component": "question_segment",
"value": "Answer2"
},
{
"id": 8691,
"component": "question_segment",
"value": "Answer3"
}
],
"type": "single_choice",
"value": "<p>Question1?</p>\n"
},
{
"id": 7602,
"component": "question",
"sub_comp_arr": [
{
"id": 921,
"component": "question_segment",
"value": ""
}
],
"type": "single_choice",
"value": ""
}
]
},{...}
]
I have implemet the code as below
var y= content_json.content_arr;
var keyCount = Object.keys(y).length;
for (var i = 0; i < keyCount; i++) {
var questionCount = (content_json.content_arr[i]['sub_comp_arr']).length;
for (let j = 0; j < questionCount; j++){
var emptyquestion= ((content_json.content_arr[i]['sub_comp_arr'][j]['value']).trim()).length;
if (emptyquestion===0){
delete (content_json.content_arr[i]['sub_comp_arr'][j]);
}
}
}
But the problem is if I use delete (content_json.content_arr[i]['sub_comp_arr'][j]); It is saving a null value on my Json, Which I don't want. How to achieve it
You could use filter instead.
content_json.content_arr[i].sub_comp_arr = content_json.content_arr[i].sub_comp_arr.filter(q => q.value)
I have a function to generate an object which I'm transforming to a JSON later on:
function createSearchCriteria(payload) {
var output = [];
if (payload['searchCriteria'] != null) {
for (var i = 0; i < payload['searchCriteria'].length; i++) {
var content = payload['searchCriteria'][i];
output[i] = {};
if (content['grouping'] != null) {
output[i]['groupOperator'] = content['grouping'];
output[i]['searchCriteria'] = [];
output[i]['searchCriteria'].push(createSearchCriteria(content))
} else {
output[i]['name'] = content['name'];
output[i]['type'] = content['type'];
}
}
}
return output
}
The input payload for this method is also a JSON value parsed
payload = JSON.parse(request);
The input structure is almost the same as the output, the only difference is the "grouping" attribute, which in the output is called "groupOperator".
I have implemented my function recursive because we can have different levels of search criteria.
Even though the searchCriteria in the input has only one [] each.
Why does each searchCriteria in the result comes with 2 pairs of squared brackets?
{
"searchCriteria": [
{
"groupOperator": "AND",
"searchCriteria": [
[
{
"groupOperator": "OR",
"searchCriteria": [
[
{
"name": "FirstName",
"type": "string"
},
{
"name": "LastName",
"type": "string"
},
{
"name": "MiddleName",
"type": "string"
},
{
"name": "Document",
"type": "string"
},
{
"name": "DOB",
"type": "date"
},
{
"name": "CdrId",
"type": "string"
}
]
]
},
{
"groupOperator": "AND",
"searchCriteria": [
[
{
"name": "Active",
"type": "bool"
},
{
"name": "Id",
"type": "int"
},
{
"name": "CountryId",
"type": "int"
}
]
]
}
]
]
}
],
"groupOperator": "AND"
}
Thanks in advance for your help.
try
output[i]['searchCriteria'] = createSearchCriteria(content)
instead of
output[i]['searchCriteria'] = [];
output[i]['searchCriteria'].push(createSearchCriteria(content))
I'm struggling with the following issue:
I have a nested object. From the server I get a response with an object with changed values. So I want to find the object in my nested object and replace it.
My object has a structure like this:
$scope.page = {
id: 5,
label: 'myPage',
items : [
{
"type": "Container",
"id": 1,
"label": "header",
"items": [
{
"type": "Container",
"id": 2,
"label": "left",
"items": [
{
"type": "Menu",
"label": "settings-menu",
"id": "5"
},
{
"type": "Menu",
"label": "main-menu",
"id": "7"
}
]
},
{
"type": "Container",
"id": 4,
"label": "right",
"items": [
{
"type": "Post",
"label": "contact",
"id": "25"
}
]
}
]
},
{
"type": "Postlist",
"label": "nieuwsberichten",
"id": "17"
},
{
"type": "HTML",
"label": "over deze site",
"id": "18"
},
{
"type": "Other",
"label": "twitter feed",
"id": "19"
}
]
}
From the server I get a new object:
var newItem = {
"type": "Post",
"label": "contact",
"id": "25"
}
How can I update the object inside $scope.page the right way? I've tried the following:
$scope.findAndReplace(newItem,$scope.page.items);
$scope.findAndReplace = function(newItem, items) {
for (var i = 0; i < items.length; i++) {
if (items[i].id == newItem.id) {
items[i] = newItem;
} else if (items[i].items) {
$scope.findAndReplace(newItem, items[i].items);
}
}
}
and:
var oldItem = $scope.findById(item.id, $scope.page.items);
oldItem = newItem;
$scope.findById = function(id, items) {
var match = null;
angular.forEach(items, function(i){
if (match == null) {
if (i.id == id) {
match = i;
} else if (i.items) {
match = $scope.findById(id, i.items)
}
}
})
return match;
}
Neither of these options work. That's because of the nested loops where the object isn't the one in $scope.page anymore.
Anyone an idea to handle this?
Your example looks fine, can't understand why they are not working.
Neither of these options work. That's because of the nested loops where the object isn't the one in $scope.page anymore.
You can keep object reference by using angular.copy(newItem, oldItem)
Hi I have created a fiddle for you.
click for fiddle
for(var indx=0; indx < $scope.page.items.length; indx++) {
var tmpObj = $scope.page.items[indx];
if(tmpObj.hasOwnProperty('items')) {
// check inside
for(var indx1=0; indx1<tmpObj.items.length; indx1++ ) {
var innerObj = tmpObj.items[indx1];
// check for next level
if(innerObj.hasOwnProperty('items')) {
for(var counter=0; counter< innerObj.items.length; counter++) {
var thirdTmp = innerObj.items[counter];
console.log('3rd level inner object', thirdTmp);
if(thirdTmp.id === newItem.id) {
innerObj.items[counter] = newItem;
tmpObj.items[indx1] = innerObj;
$scope.page.items[indx] = tmpObj;
}
}
}
}
} else if(tmpObj.id === newItem.id) {
$scope.page.items[indx] = newItem;
}
};
{"menu" :[{
"name": "Computers",
"children": [{
"name": "Notebook",
"children": [{
"name": "Apple"
}, {
"name": "Windows"
}]
}, {
"name": "Tablets",
"children": [{
"name": "Apple"
}, {
"name": "Android"
}, {
"name": "Windows"
}]
}]
}, {
"name": "Phones",
"children": [{
"name": "Android",
"children": [{
"name": "Samsung"
}, {
"name": "Nokia"
}, {
"name": "Lenovo"
}]
}, {
"name": "Windows Phones",
"children": [{
"name": "Microsoft"
}, {
"name": "Nokia"
}]
}]
}, {
"name": "Cameras",
"children": [{
"name": "Digital",
"children": [{
"name": "Nikon"
}, {
"name": "Fuji"
}]
}, {
"name": "DSLR",
"children": [{
"name": "Canon"
}, {
"name": "Nikon"
}]
}]
}]
}
and i want to print it so each parent have its children .. here is my code
$(document).ready(function() {
$.ajax({
url: 'menuData.json',
type: 'get',
dataType: 'json',
error: function(data){
alert("error");
},
success: function(data){
var i=0;
var j=0;
var n=0;
var obj=data;
var json = JSON.stringify(obj);
var s = JSON.parse(json);
for( i=0;i<s.menu.length;i++){
$("#main-menu").append(' <li>'+ s.menu[i].name +'</li>');
for( j=0;j<s.menu[i].children.length;j++)
{ $("#main-menu").append(' <li>'+ s.menu[i].children[j].name + '</li>');
for( n=0;n<s.menu[i].children[j].children.length;n++){
$("#main-menu").append(' <li>'+ s.menu[i].children[j].children[n].name +'</li>');
}
}
}
$('#main-menu').smartmenus({
subMenusSubOffsetX:1,
subMenusSubOffsetY: -8
});
}
});
});
but it ends up like this
any help please .. thanks in advance .. btw i am beginner so please help me .. thanks again
Your code is logically correct except you are always appending to the $("#main-menu"). Consider doing this:
...
for( var i=0; i < s.menu.length; i++)
{
$("#main-menu").append(' <li id="menu-list-' + i + '">' + s.menu[i].name + '</li>');
var list_length = s.menu[i].children.length;
if (list_length > 0)
$("#main-menu li#menu-list-" + i).append('<ul></ul>');
for( var j=0; j < list_length; j++)
{
$("#main-menu li#menu-list-" + i + " ul").append(' <li id="menu-list-' + i + '-children-list-' + j + '">'+ s.menu[i].children[j].name + '</li>');
var children_list_length = s.menu[i].children[j].children.length;
if(children_list_length > 0)
$("#main-menu li#menu-list-" + i + " ul li#menu-list-" + i + "-children-list-" + j).append("<ul></ul>");
for( var n=0; n < children_list_length; n++)
{
$("#main-menu li#menu-list-" + i + " ul li#menu-list-" + i + "-children-list-" + j + " ul").append(' <li>'+ s.menu[i].children[j].children[n].name +'</li>');
}
}
}
...
I have a JSON object at my disposal looking like this :
{
"Fields": [
{
"table": "catalogue",
"field": "Histo_Qtite",
"type": "STRING"
},
{
"table": "catalogue",
"field": "id_article",
"type": "STRING"
},
{
"table": "contact",
"field": "contact_email",
"type": "STRING"
},
{
"table": "contact",
"field": "contact_firestname",
"type": "STRING"
},
{
"table": "customer",
"field": "activity_type",
"type": "STRING"
},
{
"table": "customer",
"field": "adress",
"type": "STRING"
}
],
"Tables": [
{
"entity": "CATALOGUE",
"table": "catalogue"
},
{
"entity": "CLIENT",
"table": "customer"
},
{
"entity": "CONTACT",
"table": "contact"
}
]
}
I am trying to create a multidimensional array for every "Fields" objects base on the name of the table. To do so I experimented with javascript and it resulted in this code :
var objectPREFIX = "object_",
selectedObject = '',
objectArray = [],
objectImport = [],
OFImport = [],
TablesLength = jsonImport.Tables.length,
FieldsLength = jsonImport.Fields.length;
for (i = 0; i < FieldsLength; i++) {
selectedObject = objectPREFIX + jsonImport.Fields[i].table;
OFImport[selectedObject] = {
tableName : jsonImport.Fields[i].table,
FieldName : jsonImport.Fields[i].field,
fieldType : jsonImport.Fields[i].type
}
for (j = 0; j < TablesLength; j++) {
if(OFImport[selectedObject].tableName == jsonImport.Tables[j].table) {
objectImport.push(OFImport[selectedObject]);
objectArray[selectedObject] = OFImport[selectedObject];
}
}
}
console.log(objectArray);
The problem as I understand it is that OFImport[selectedObject] contain every object iteration of "Fields" and only display the last object in the console.
I would like to know how to make a comparison condition between "Fields" and "Tables" to get each iteration in separate arrays.
Here is a FIDDLE that demonstrates the issue (sorry if I have troubles articulating my explanation).
If I understand what your looking to do, which is have an array of tables, which has an array of fields, then I think you have your for loops backwards.
you need to loop your tables first, then add your fields like so:-
jsonImport = {
"Fields": [{
"table": "catalogue",
"field": "Histo_Qtite",
"type": "STRING"
}, {
"table": "catalogue",
"field": "id_article",
"type": "STRING"
}, {
"table": "contact",
"field": "contact_email",
"type": "STRING"
}, {
"table": "contact",
"field": "contact_firstname",
"type": "STRING"
}, {
"table": "customer",
"field": "activity_type",
"type": "STRING"
}, {
"table": "customer",
"field": "adress",
"type": "STRING"
}],
"Tables": [{
"entity": "CATALOGUE",
"table": "catalogue"
}, {
"entity": "CLIENT",
"table": "customer"
}, {
"entity": "CONTACT",
"table": "contact"
}]
}
var objectArray = [],
objectPREFIX = "object_",
selectedObject = '',
TablesLength = jsonImport.Tables.length,
FieldsLength = jsonImport.Fields.length;
for (i = 0; i < TablesLength; i++) {
selectedObject = objectPREFIX + jsonImport.Tables[i].table;
objectArray[selectedObject] = {
table: jsonImport.Tables[i].table,
entity: jsonImport.Tables[i].entity,
Fields: []
}
for (j = 0; j < FieldsLength; j++) {
if (jsonImport.Tables[i].table == jsonImport.Fields[j].table) {
objectArray[selectedObject].Fields.push({
"field": jsonImport.Fields[j].field,
"type": jsonImport.Fields[j].type
});
}
}
}
console.log(objectArray);
outputting:-