I want to parse all the items in the JSON list and using the function decode, remove the HTML formatted spaces, %20 and the like.
See snippet below
My goals:
I want to change Andy%2EPeters to "Andy Peters"
I dont want to have to refer to each item as "this.product_model" using the key name.
$(document).ready(function() {
$('.btn').click(function() {
$(ray).each(function(index) {
console.log("Item BEFORE Decode : " + index + ": " + $(this).text() + ": " + this.product_model);
this.index = decodeString(this.item);
console.log("Item AFTER Decode : " + index + ": " + $(this).text() + ": " + this.product_model);
});
});
});
function decodeString(a) {
if (typeof a != 'undefined') {
return decodeURIComponent(a);
} else {
return '';
}
}
var ray = [{
"product_id": "1",
"product_model": "Andy%2EPeters",
}, {
"product_id": "2",
"product_model": "Tom%2EHanks",
}, {
"product_id": "1",
"product_model": "HFJ5G1.5",
}, ];
//console setup
var consoleLine = "<p class=\"console-line\"></p>";
console = {
log: function(text) {
$("#console-log").append($(consoleLine).html(text));
}
};
.console-line {
font-family: console;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="btn" type="button" id="btn" value="Go!">
<div id="console-log"></div>
Thanks
$(document).ready(function() {
$('.btn').click(function() {
var data = decodeURIComponent(JSON.stringify(ray).replace(/(%2E)/ig, "%20"));
ray = JSON.parse(data);
$(ray).each(function(){
console.log(this.product_model);
})
});
});
var ray = [{
"product_id": "1",
"product_model": "Andy%2EPeters"
}, {
"product_id": "2",
"product_model": "Tom%2EHanks"
}, {
"product_id": "1",
"product_model": "HFJ5G1.5"
} ];
//console setup
var consoleLine = "<p class=\"console-line\"></p>";
console = {
log: function(text) {
$("#console-log").append($(consoleLine).html(text));
}
};
.console-line {
font-family: console;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="btn" type="button" id="btn" value="Go!">
<div id="console-log"></div>
This uses the JSON object's native stringify to parse the object to a JSON string. Before decoding is done replace all the %2E with %20 and finally decode it all together. Then parse it back to a JavaScript object.
I don't know if this is for demonstration purposes only, but generally speaking: overwriting the console is a bad idea.
Related
I am trying to parse an unknown JSON whose format could be anything. So, I dont know the keys to access it. I want to access every key in JSON and print out all keys and values on screen using HTML. So I made a recursive function to access every key in JSON and used a variable name html to print the keys.
here`s the code:
JSON String:
{
"FetchDetails": {
"TransactionDetails": {
"ServiceName": "Airtel Mobile Bill Postpaid",
"officeID": "209",
"BillAmount": "931.00",
"ConsumerName": "Chetan Kumar Yadav",
"consumerKeysValues": "9352423664",
"partPaymentAllow": "1",
"partPaymentType": "Both",
"lookUpId": "6163298",
"officeCodeValue": "RATNC011"
},
"BillDetails": [{
"LableName": "Amount Before Due Date",
"LableValue": "931.00"
}, {
"LableName": "Due Date",
"LableValue": "NA"
}, {
"LableName": "Mobile Number",
"LableValue": "9352423664"
}, {
"LableName": "Amount After Due Date",
"LableValue": "931.00"
}, {
"LableName": "Bill Date",
"LableValue": "NA"
}, {
"LableName": "Consumer Name",
"LableValue": "Chetan Kumar Yadav"
}, {
"LableName": "Bill Cycle",
"LableValue": "NA"
}, {
"LableName": "Bill Number",
"LableValue": "NA"
}, {
"LableName": "Account Number",
"LableValue": "1116231291"
}]
}
}
Heres the code to access every key in Parsed JSON
function scan(info) {
var sub_root = [];
if (info instanceof Object) {
for (k in info) {
if (info.hasOwnProperty(k)) {
console.log('scanning property ' + k);
if (info[k] instanceof Object) {
me += "<div class='root'> <div class='sub_root'> <input class='node' name='sub_root[" + k + "]' value='" + k + "' type='checkbox' />" + k;
console.log(k);
counter++;
scan(info[k]);
me += "</div>";
me += "</div>";
} else {
me += "<div class='json_check' ><input class='node' name='sub_root[" + y + "] [" + k + "]' value='" + k + "' type='checkbox' />" + k + ": " + info[k] + " </div>";
scan(info[k]);
counter++;
}
}
}
} else {
console.log('found value : ' + info);
}
}
After this, I am able to access every key in JSON and printed every node in a nested form with checkboxes in front of them to select any node/key.
Here`s the screenshot:
[PROBLEM to be solved]
Now at the bottom, I have a submit button, when I click on it I want to form a JSON of checked values with their parent nodes. So like if I check a key with a value, I should get its parent keys along with it.
For example: I have selected ServiceName and officeID in TransactionDetails, and some array values in BillDetails, so I should get something like this
{
"FetchDetails": {
"TransactionDetails": {
"ServiceName": "Airtel Mobile Bill Postpaid",
"officeID": "209"
},
"BillDetails": [{
"LableName": "Amount Before Due Date",
"LableValue": "931.00"
}, {
"LableName": "Due Date",
"LableValue": "NA"
}, {
"LableName": "Account Number",
"LableValue": "1116231291"
}]
}
}
[EDITED]
To get this JSON format and traverse through HTML objects I am writing this code:
$('#btn_createservice').on('click', function() {
var solid = '{';
var input = $('input').is(':checked');
if(input){
input = $('input');
}
$('.node:checked').each(function(index) {
var parentEls = $(this).closest(input)
.map(function() {
solid += this.value;
return this.value;
})
.get()
.join( ", " );
console.log(parentEls);
});
solid += '}';
$( ".submit_json" ).html(solid);
});
You need to use .parents(), not .closest() so you get all the containing elements.
Then create containing properties with those names when necessary.
$("#btn_createservice").on("click", function() {
var svc_obj = {};
$(".node:checked").each(function() {
var cur_obj = svc_obj;
$(this).parents(".node").map(function () {
return this.value;
}).get().reverse().forEach(function(name) {
if (!cur_obj[name]) { // create property if it doesn't already exist
cur_obj[name] = {};
}
cur_obj = cur_obj[name]; // use this for next iteration;
});
var thisname = this.name.match(/\[([^[])+\]$/)[1]; // Get property name from name="sub_root[...]"
cur_obj[thisname] = this.value;
});
$(".submit_json").html(JSON.stringify(svc_obj));
})
You need to fix the HTML you're creating so that the checkboxes have value='" + info[k] "'.
I'm new to web development and I'm trying to learn how to turn JSON content into HTML structures. In this project I am trying to create a menu for a restaurant that can be edited by a JSON file. The project is code-named "pike" to answer any questions about my variable naming.
What I am trying to do right now is have one JSON Array that holds an unknown amount of legend symbols (controlled by a user) and to turn that into html. The final product should look something like this:
GF - GlutenFree, GFO - GlutenFree option, Veg - Vegitarian, V - Vegan
Where there could be any amount of legend symbols the user wants.
To start I have created a JSON array which assigns some html syntax to variables:
var syntax = {
"spanOpen": "<span>",
"spanClose": "</span>",
"hr": "<hr>",
"pike": {
"menu": {
"legendOpen": "<p class='legend'>",
"legendClose": "</p>",
"legendIndicatorOpen": "<span class='legend-indicator'>",
"legendIndicatorClose": "</span>"
}
}
};
I have also created an array for user input that will be displayed in the menu:
var menuUserInput = {
"legend": [
{
"symbol": "GF",
"description": "GlutenFree"
}, {
"symbol": "GFO",
"description": "GlutenFree option"
}, {
"symbol": "Veg",
"description": "Vegitarian"
}, {
"symbol": "V",
"description": "Vegan"
}
]
};
Then I created a variable to put the previous two together:
var menuResponsive = {
"legend": syntax.pike.menu.legendOpen + new Array(menuUserInput.legend.length + 1).join(syntax.spanOpen + menuUserInput.legend[0].symbol + syntax.spanClose + " - " + menuUserInput.legend[0].description + ", ") + syntax.pike.menu.legendClose,
};
The problem is that this produces the following:
GF - GlutenFree, GF - GlutenFree, GF - GlutenFree, GF - GlutenFree,
And I have no clue how to get it to display correctly since I do not know how many legend items the user will want.
I have searched around a lot but unfortunately my knowledge in this realm is still very new. Thank you so much for anyone who takes the time to read this and help a noob out.
You need to loop over your menuUserInput.legend array items this way:
var syntax = {
"spanOpen": "<span>",
"spanClose": "</span>",
"hr": "<hr>",
"pike": {
"menu": {
"legendOpen": "<p class='legend'>",
"legendClose": "</p>",
"legendIndicatorOpen": "<span class='legend-indicator'>",
"legendIndicatorClose": "</span>",
"legendIndicatorSpacer": " - "
}
}
};
var menuUserInput = {
"legend": [{
"symbol": "GF",
"description": "GlutenFree",
}, {
"symbol": "GFO",
"description": "GlutenFree option"
}, {
"symbol": "Veg",
"description": "Vegitarian"
}, {
"symbol": "V",
"description": "Vegan"
}]
};
function createMenu(name) {
var toReturn = '';
if( typeof menuUserInput[name]!='undefined' ) {
for(ind in menuUserInput[name]) {
toReturn += syntax.pike.menu.legendOpen + syntax.pike.menu.legendIndicatorOpen + menuUserInput[name][ind].symbol + syntax.pike.menu.legendIndicatorClose + syntax.pike.menu.legendIndicatorSpacer + menuUserInput[name][ind].description + syntax.pike.menu.legendClose + '\n';
};
};
return toReturn;
};
var menuResponsive = createMenu('legend');
console.log( menuResponsive );
document.getElementById('result').innerHTML = menuResponsive;
<div id="result"></div>
Also on Fiddle.
Maybe you should read more about the JSON structure.
I would rather "abstract" a little more the syntax object to avoid specifying opening and closing tags. Instead I would indicate what the type should be.
/*
var syntax = {
"spanOpen": "<span>",
"spanClose": "</span>",
"hr": "<hr>",
"pike": {
"menu": {
"legendOpen": "<p class='legend'>",
"legendClose": "</p>",
"legendIndicatorOpen": "<span class='legend-indicator'>",
"legendIndicatorClose": "</span>"
}
}
};
*/
var syntax2 = {
groupItem:{
type:'span',
class:'pikeMenu'
},
divider:{
type:'hr'
},
pike: {
menu: {
legendItem:{
type:'p',
class:'legend'
},
"legendIndicator":{
type:'span',
class:'legend-indicator'
}
}
}
};
var menuUserInput = {
"legend": [
{
"symbol": "GF",
"description": "GlutenFree"
}, {
"symbol": "GFO",
"description": "GlutenFree option"
}, {
"symbol": "Veg",
"description": "Vegitarian"
}, {
"symbol": "V",
"description": "Vegan"
}
]
};
window.onload = function () {
var body = document.getElementsByTagName('body')[0];
/*
var menuResponsive = {
"legend": syntax.pike.menu.legendOpen +
new Array(menuUserInput.legend.length + 1).join(syntax.spanOpen + menuUserInput.legend[0].symbol + syntax.spanClose + " - " + menuUserInput.legend[0].description + ", ") + syntax.pike.menu.legendClose
};
*/
//crete the container
var groupContainer = document.createElement(syntax2.groupItem.type);
groupContainer.textContent = "menu container";
groupContainer.className = syntax2.groupItem.class;
body.appendChild(groupContainer);
var dividerItem = document.createElement(syntax2.divider.type);
groupContainer.appendChild(dividerItem);
for(var key in menuUserInput.legend){
if(menuUserInput.legend.hasOwnProperty(key)){
var legendItem = menuUserInput.legend[key];
console.log(legendItem);
var legendElement = document.createElement(syntax2.pike.menu.legendItem.type);
legendElement.className = syntax2.pike.menu.legendItem.class;
legendElement.textContent = legendItem.description;
var legendIndicatorElement = document.createElement(syntax2.pike.menu.legendIndicator.type);
legendIndicatorElement.className = syntax2.pike.menu.legendIndicator.class;
legendIndicatorElement.textContent = legendItem.symbol;
legendElement.appendChild(legendIndicatorElement);
groupContainer.appendChild(legendElement);
}
}
}
.pikeMenu{
font-family: sans-serif;
display: inline-block;
border: 1px solid lightgrey;
border-radius: 10px;
padding: 10px;
}
.pikeMenu .legend{
border-bottom: 1px solid gray;
cursor: pointer;
}
.pikeMenu .legend:hover{
background-color: azure;
}
.pikeMenu .legend .legend-indicator{
float: left;
color: lightblue;
}
.legend-indicator::after{
display: inline-block;
content: "-";
margin-left: 4px;
margin-right: 4px;
}
I am newbie to JSON, I am parsing a JSON Object and i was struck at a point where i have to read the array Elements inside a Object, that is again in another array..
Here is MY JSON
{
"DefinitionSource": "test",
"RelatedTopics": [
{
"Result": "",
"Icon": {
"URL": "https://duckduckgo.com/i/a5e4a93a.jpg"
},
"FirstURL": "xyz",
"Text": "sample."
},
{
"Result": "",
"Icon": {
"URL": "xyz"
},
"FirstURL": "xyz",
"Text": "sample."
},
{
"Topics": [
{
"Result": "",
"Icon": {
"URL": "https://duckduckgo.com/i/10d02dbf.jpg"
},
"FirstURL": "https://duckduckgo.com/Snake_Indians",
"Text": "sample"
},
{
"Result": "sample",
"Icon": {
"URL": "https://duckduckgo.com/i/1b0e4eb5.jpg"
},
"FirstURL": "www.google.com",
"Text": "xyz."
}
]
}
]
}
Here I need to read URL ,FIRSTURL and Text from RelatedTopics array and Topics array..
Can anyone help me. Thanks in advance.
Something like this
function (json) {
json.RelatedTopics.forEach(function (element) {
var url = element.Icon ? element.Icon.URL : 'no defined';
var firstURL = element.FirstURL ? element.FirstURL : 'no defined';
var text = element.Text ? element.Text : 'no defined';
alert("URL: " + url + "\nFirstURL: " + firstURL + "\nText: " + text);
if (element.Topics)
{
element.Topics.forEach(function (topicElement) {
alert("Topics - \n" + "URL: " + topicElement.Icon.URL + "\nFirstURL: " + topicElement.FirstURL + "\nText: " + topicElement.Text);
});
}
});
};
Look fiddle example
Loop through json Array like,
for(var i=0; i< RelatedTopics.length;i++){
if($.isArray(RelatedTopics[i])){
for(var j=0; j< RelatedTopics[i].Topics.length;j++){
var topics=RelatedTopics[i].Topics[j];
var text = topics.Text;
var firsturl = topics.Firsturl;
var url = topics.Icon.url;
}
}
}
if you want push it an array variable
How can i loop the contacts inside my json object using javascript?
{
"success": 1,
"contacts": [
{
"cName": "testing",
"cmail": "testMail",
"ctlf": "testPhone"
},
{
"cName": "testing",
"cmail": "testMail",
"ctlf": "testPhone"
}
],
"fName": "Actura",
"fAdr": "langdyssen 5, 8200 Aarhus N",
"date": "14-9-2019"
}
I've tried using the code below, but it only displayed 0 and 1 at the console
$.getJSON("./ajax/get.php", {
type: "printer",
placement: "firm",
id: id
}).done(function (data) {
if (data.success == 1) {
//$('table#printerInfo').append("<tr><td>Printer ID</td><td>" + data.id + "</td></tr>").append("<tr><td>Mærke</td><td>" + data.brand + "</td></tr>").append("<tr><td>Model</td><td>" + data.model + "</td></tr>").append("<tr><td>Farve</td><td>" + data.color + "</td></tr>");
$('table td#firmName').append('<span class="glyphicon glyphicon-home"></span> ' + data.fName);
$('table td#firmAdr').append('<span class="glyphicon glyphicon-globe"></span> ' + data.fAdr);
$('table td#firmDate').append('<span class="glyphicon glyphicon-calendar"></span> ' + data.date);
for (var contact in data.contacts) {
console.log(contact);
}
console.log(data);
toolTip();
}
else {
alert("Der er sket en fejl: " + data.error);
}
});
Replaced data with test data, and due to 'too much code' ill be adding some ekstra text since i cant delete the question due to answers
Use code below instead:
for (var i in data.contacts) {
console.log(data.contacts[i]);
}
Here is a snippet of the JSON my PHP script is echoing out:
[
{
"title": "4th of July",
"start": "2014-07-04"
},
{
"title": "5th of May",
"start": "2014-05-05"
},
{
"title": "My Birthday",
"start": "2014-02-03"
}
]
Im trying to loop through all the events and list them out.
The problem Im having is getting into the deeper section of the data. Can someone help me?
Also what if I was to add an array deeper down? Like this:
[
{
"title": "4th of July",
"start": "2014-07-04",
"activities": [
"badmitten",
"tennis"
]
}
]
Here is what I've tried:
$.getJSON("json.json", function(data) {
var items = [];
$.each(data, function(key, val) {
//items.push("<li id='" + key + "'>" + val + "</li>");
});
$.each(data, function(obj) {
$.each(obj, function(key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
});
});
});
try:
var data = [
{
"title": "4th of July",
"start": "2014-07-04"
},
{
"title": "5th of May",
"start": "2014-05-05"
},
{
"title": "My Birthday",
"start": "2014-02-03"
}
]
data.forEach(function(d){
// do whatever to each of the item in the array
console.log(d.title);
console.log(d.start);
});
for deeper section of the data, just keep drilling down using the same way. Inside the loop above:
if(d.activities && d.activites.length > 0){
d.activities.forEach(function(a){
console.log(a);
})
}
Hope that helps
A little late, since you've already accepted an answer, but if you want it to be dynamic, you could set up a recursive function, like this:
Example
function printSection(obj) {
var items = ['<ul>'];
$.each(obj, function(key, value) {
var item = '<li'+ (isNaN(key) ? ' id="'+ key +'"' : '') +'>';
if (value instanceof Object) {
item += key +':';
item += printSection(value);
} else {
item += value;
}
item += '</li>';
items.push(item);
});
items.push('</ul>');
return items.join('');
}
This way, you can add further levels of nesting without having to change the output loop.
$.getJSON('json.json', function(data) {
var result = [];
$.each(data, function() {
result.push(printSection(this));
});
$('#result').html(result.join(''));
}