Generate JSON using jQuery - javascript

I have 4 inputs in a form:
<form id="mark_date_form">
<input type="text" name="title" class="form-control" placeholder="Title" value="motherday">
<input type="text" name="date" class="form-control datepick" placeholder="MM/DD" value="05/13">
<input type="text" name="title" class="form-control" placeholder="Title" value="fatherday">
<input type="text" name="date" class="form-control datepick " placeholder="MM/DD" value="06/18">
</form>
When I use $('#mark_date_form').serializeArray() in jQuery, it returns
[
{
"name": "title",
"value": "motherday"
},
{
"name": "date",
"value": "05/13"
},
{
"name": "title",
"value": "fatherday"
},
{
"name": "date",
"value": "06/18"
}
]
The question is I have to come out with something like this:
[
{
"title": "motherday",
"date": "05/13"
},
{
"title": "fatherday",
"date": "06/18"
}
]
What should be the jQuery looks like?
Thank you very much!

I think you are looking for this $("#mark_date_form").serialize();
Update: sorry for the #daniel-cai is correct.
Use $("#mark_date_form").serializeArray(); for getting JavaScript literal object.

You can use this:
var a = [];
$('#mark_date_form input').each(function(){
if($(this).attr('name')=='title'){
a.push({"title":$(this).val(),"date":$(this).next().val()});
}
});
console.log(a);
Output:
[Object { title="motherday", date="05/13"}, Object { title="fatherday", date="06/18"}]

Simple way to get a json file as you want is:
var o = {};
$("#mark_date_form").serializeArray().map(function(x){o[x.name] = x.value;});
console.log(o);
Result:
Object {title: "motherday", date: "05/13"}
DEMO: http://jsfiddle.net/gon250/s3xerkgc/1/
Hope it's helps.

Related

How to convert Json object of html element into actual HTML element that i can render on view using C# or js or jquery

My requirement is, i want to get a json(in the form of html tag) from DB and convert it into html.
{"input":{
"name":"fname",
"type":"text",
"placeholder":"Enter your firstname",
"Id":"fname"
}
}
{"button" :{
"name":"btn",
"class":"save",
"type":"submit",
"Id":"btn1",
"text":"save"
}
}
i want to convert this json into html tags like
<input type="text" id="fname" name="fname" placeholder="Enter your firstname">
<button type="submit" class="save" id="btn1" name="btn">save</button>
how can i convert this using c# or javascript or jquery anything will help me
To solve your problem you need to loop throw your json and createElement along the way.
let json = {
"input": {
"name": "fname",
"type": "text",
"placeholder": "Enter your firstname",
"id": "fname"
},
"button" : {
"name": "btn",
"class": "save",
"type": "submit",
"id": "btn1",
"text": "save"
}
}
Object.keys(json).forEach( (element) => {
let foo = document.createElement(element)
Object.keys(json[element]).forEach( (nestedAttribute) => {
foo.setAttribute(nestedAttribute, json[element][nestedAttribute]);
})
document.body.appendChild(foo)
})
Object.keys(json) allow you to get the keys of your json
This way the result looks like this :
Have a nice day !

Get Dynamic Input ID javascript

I have an input type check box and load from database and form like this
<input type="checkbox" name="akses[]"
id="<?php echo $menu_id;?>"
value="<?php echo $action_name;?>"> <?php echo $menu_name;?>
and my json is
{
"status": 200,
"message": "sukses",
"data": {
"fullname": "TEST",
"username": "TEST_USER",
"position": "24",
"privileges_status": "based on jabatan",
"list_menu": [{
"action_name": "menu1 ",
"parent_id": 9,
"menu_id": 15,
"menu_name": "Menu 1"
}, {
"action_name": "menu2",
"parent_id": 9,
"menu_id": 16,
"menu_name": "Menu 2"
}]
}
}
I'm already successfully parsing the id using ajax, but the problem is that I don't know how to to check when id from json is same like the id in input.
If I define manually like
<input type="checkbox" name="akses[]" id="15" value=""> Menu 1
I can check and automatically check the checkbox
Now I change my input type like this
<input type="checkbox" name="akses[]" id="menu1" value=""> Menu 1
UPDATE: The js like this after implementing suggested answer
for (var i = 0; i < res['data']['list_menu'].length; i++)
{
var action_name = res['data']['list_menu'][i]['action_name'];
var idsFromJSON = new Array();
idsFromJSON.push(action_name);
console.log(idsFromJSON);
$("[name='akses[]']").each(function() {
this.checked=idsFromJSON.indexOf(this.id)!=-1;
});
}
but didn't work. if I declare array manually like this it works
var idsFromJSON=["menu1", "menu2"];
You want something like this
I would however recommend not to have numeric IDs
var idsFromJSON=["menu15","menu16"];
$("[name='akses[]']").each(function() {
this.checked=idsFromJSON.indexOf(this.id)!=-1;
});

use javascript to push into javascript "members" object

I am trying to push data into a "members" object. This addition doesn't have to be permanent! But my code string doesn't work, although it looks (to me) like it should work fine. Can anyone please tell me why the push below doesn't work?
<script>
var members = [
{ "Class": "B", "Rating": "1776", "ID": "12537964", "Name": "Smith, John", "Expires": "2018.10.18" },
{ "Class": "C", "Rating": "1500", "ID": "12210580", "Name": "Jones, Jim", "Expires": "2019.01.12" },
{ "Class": "B", "Rating": "1759", "ID": "10117780", "Name": "Williams, Paula", "Expires": "2018.09.12" }
]
</script>
HTML:
<form action="" id = "newMember" class="pure-form" method = "">
<fieldset>
<label for="mem-name">Last, First name:</label> <input type="text" id = "mem-name" />
<label for="mem-expires">Membership:</label> <input type="text" id = "mem-expires" /> <br />
<label for="mem-rating">Rating:</label> <input type="text" id = "mem-rating" />
<label for="mem-ID">ID:</label> <input type="text" id = "mem-ID" />
<label for="mem-class">Class:</label> <input type="text" id = "mem-class" />
<button type="button" id="addPlayer" style="margin-left:2rem;" onclick="validateForm()">add new player</button>
<button type="reset">reset form</button>
</fieldset>
</form>
JAVASCRIPT:
<script>
function validateForm() {
var memName = document.getElementById('mem-name').value;
var memExpires = document.getElementById('mem-expires').value;
var memRating = document.getElementById('mem-rating').value;
var memID = document.getElementById('mem-ID').value;
var memClass = document.getElementById('mem-class').value;
if (memName == "") {
alert("Name must be filled out");
return false;
}
//The line below doesn't work:
members.push({Name: "memName", Expires: "memExpires", Rating: "memRating", ID: "memID", Class: "memClass"});
}
</script>
You're pushing the strings, but you've to use variables instead. Instead of this:
members.push({Name: "memName", Expires: "memExpires", Rating: "memRating", ID: "memID", Class: "memClass"});
do this:
members.push({Name: memName, Expires: memExpires, Rating: memRating, ID: memID, Class: memClass});
For example "memName" is a string which has memName in it, whereas if you want the value of the text input, which you're storing in a variable named memName, you need to unwrap the value from double quotes.

Angular js Properties in Selected object is not accessible in model

<select id="singleselect" ng-model="selectedQuestion" class="form-control select2"
ng-options="x.Title for x in tabnames">
</select>
now when i access the value if {{selectedQuestion.Title}} i am getting proper value,
when i am accessing value of {{selectedQuestion.ID}} also i am getting proper value,
what i actually need is value of {{selectedQuestion.ControlPrefix}} to be accessed in model(javascript) but it cannot be accessed neither in UI with {{selectedQuestion.ControlPrefix}} nor in model like
$scope.Newmodel = {
Title: "New Question Title",
ControlPrefix: $scope.selectedQuestion.ControlPrefix
};
basicaly i want the value inside the $scope.Newmodel.ControlPrefix variable i.e $scope.Newmodel.ControlPrefix
**tabnames array/objet is below**
{
"$id": "1",
"ID": 3,
"Title": "Text",
"ControlPrefix": "txt"
},
{
"$id": "2",
"ID": 4,
"Title": "Number",
"ControlPrefix": "num"
},
I don't See any problem with this, please check and verify -
var app = angular.module("myApp",[]);
app.controller("myCntr",function($scope){
$scope.tabnames = [
{
"$id": "1",
"ID": 3,
"Title": "Text",
"ControlPrefix": "txt"
},
{
"$id": "2",
"ID": 4,
"Title": "Number",
"ControlPrefix": "num"
},]
$scope.NewQuestionmodel = {
Title: "",
QuestionTypeID: "",
};
$scope.Dosomething = function(selectedQuestion){
$scope.NewQuestionmodel.Title = selectedQuestion.Title;
$scope.NewQuestionmodel.QuestionTypeID= selectedQuestion.ID;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntr">
<select id="singleselect" ng-model="selectedQuestion" class="form-control select2"
ng-options="x.Title for x in tabnames" ng-change="Dosomething(selectedQuestion)">
</select>
<br>
<span>FRom UI - Selected Question Title : {{selectedQuestion.Title}} </span><br>
<span>From UI - Selected Question ID : {{selectedQuestion.ID}} </span><br>
<span>From UI - Selected Question ControlPrefix : {{selectedQuestion.ControlPrefix}} </span><br><br>
<br>
<span>Selected Question Title from Backend is {{NewQuestionmodel.Title}}</span><br>
<span>Selected Question ID from Backend is {{NewQuestionmodel.QuestionTypeID}}</span>
</div>

angularjs: ng-model double object

I try to achieve a double nested object. (Example Below)
The Problem is that my current Code is generating a Array inside a Object.
<div ng-if="newResultUnits()" ng-repeat="set in sets" ng-model="newexercise.sets[$index]">
<label>Set {{$index+1}}</label>
<label>
<label>
<input type="text" ng-repeat="resultUnit in newResultUnits()" ng-model="newexercise.sets[$parent.$index][$index].value" placeholder="{{resultUnit.name}}">
</label>
</label>
</div>
Example (the name attr is added later):
{
name:"MultiTest",
sets:[
{
0:{
value:"10",
name:"Kg"
},
1:{
value:"10",
name:"Wdh"
}
}
]
}
This is how it should be: (Please note the doubble [[ and the missing 0:)
{
"name": "MultiTest",
"sets": [
[
{
"value": "10",
"name": "Kg"
},
{
"value": "10",
"name": "Wdh"
}
]
]
}
Im sorry if I mixedup Array and Object.. Thanks!
You need properly initialize your data structures. So in controller begin with
$scope.newexercise = { sets: [] };
So Angular knows that you want $scope.newexercise to be an array. Then in template use ngInit on every inner loop ng-init="newexercise.sets[$parent.$index] = []":
<div ng-repeat="set in sets">
<label>Set {{$index+1}}</label>
<label>
<label>
<input type="text"
ng-repeat="resultUnit in newResultUnits()"
ng-init="newexercise.sets[$parent.$index] = []"
ng-model="newexercise.sets[$parent.$index][$index].value"
placeholder="{{resultUnit.name}}">
</label>
</label>
</div>
Demo: http://plnkr.co/edit/s1rInT8rLg50ISsSVxyV?p=preview

Categories