Displaying my JSON in HTML - javascript

These are my Json arrays:
{"0":"1","id":"1","1":"2015-01-11 12:30:45","DateTimeCreated":"2015-01-11 12:30:45","2":"Pending Confirmation","status_desc":"Pending Confirmation","3":"benjiwjh","username":"benjiwjh"}
{"0":"4","id":"4","1":"2015-02-11 09:09:09","DateTimeCreated":"2015-02-11 09:09:09","2":"Pending Confirmation","status_desc":"Pending Confirmation","3":"LSH","username":"LSH"}
{"0":"7","id":"7","1":"2015-12-03 18:30:00","DateTimeCreated":"2015-12-03 18:30:00","2":"Unresolved","status_desc":"Unresolved","3":"SWJH","username":"SWJH"}
{"0":"12","id":"12","1":"2014-12-03 12:10:30","DateTimeCreated":"2014-12-03 12:10:30","2":"Resolved","status_desc":"Resolved","3":"benjiwjh","username":"benjiwjh"}
{"0":"14","id":"14","1":"2014-12-03 12:10:30","DateTimeCreated":"2014-12-03 12:10:30","2":"Resolved","status_desc":"Resolved","3":"CYJM","username":"CYJM"}
How am I supposed to use these to display my code in an HTML file?
I have a function to show the data but it does not work:
function showData(response) {
var data = JSON.parse(response);
var id = data.id;
var DateTimeCreated = data.DateTimeCreated;
var status_desc = data.status_desc;
var username = data.username;
myText.textContent= id + DateTimeCreated + status_desc + username;
}

I think you should have a div tag in your html template.
For example, in your HTML template, there should be a scope of codes:
<div id="sometext">
</div>
And in your JS script,
var textContent = id + DateTimeCreated + status_desc + username
sometext = document.getElementById("sometext");
sometext.innerHTML(textContent);
For more info, please visit http://www.w3schools.com/js/js_output.asp
Hope it would be helpful

Based on the question, I'm not entirely sure when you are using the showData function. However, here's a jsfiddle that shows that it works: https://jsfiddle.net/qyy2nvtz/1/
<p id='hello'></p>
var myText = document.getElementById('hello');
You need to get an element before you can display something in it. So, I've initialized 'myText' with a paragraph element with id 'hello'.
Additionally, make sure that the response that is being passed in to showData is a string before you parse it. If it's already an object, then it won't be parsed.

Here you have an example, you need a div element to refer like "js":
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="js">
</div>
</body>
<script type="text/javascript">
var myText= document.getElementById("js");
var data = JSON.parse(response);
var id = data.id;
var DateTimeCreated = data.DateTimeCreated;
var status_desc = data.status_desc;
var username = data.username;
myText.textContent = id + DateTimeCreated + status_desc +username;
</script>
</html>
Further reading: http://www.w3schools.com/dom/prop_element_textcontent.asp

Related

I am using TypeForm and need to autofill hidden fields from a .js script

I am using TypeForm and need to autofill utm fields from javascript, everything works except I cant get the html created from the script to show on the page. I am embedding the below code in a html/js module in a clickfunnels page. Any help is very much appreciated.
<div id="typeform"></div>
<script>
//<div id="typeform"></div> <div id="row--27712"></div>
window.onload = function(){
var source = "utm_source=1";
var medium = "utm_medium=2";
var campaign = "utm_campaign=3";
var content = "utm_content=4";
var keyword = "utm_term=5"
var HTMLA = '<div data-tf-widget="mYH43Dz4" data-tf-iframe-props="title=TFS - ANALYTICSDEV V1.1" data-tf-medium="snippet" data-tf-hidden=';
var HTMLquote = '"';
var HTMLcomma = ',';
var HTMLB = '" style="width:100%;height:600px;"></div><script src="//embed.typeform.com/next/embed.js">';
var HTMLC = '</'
var HTMLD = 'script>'
var form = HTMLA.concat(HTMLquote).concat(source).concat(HTMLcomma).concat(medium).concat(HTMLcomma).concat(campaign).concat(HTMLcomma).concat(content).concat(HTMLcomma).concat(keyword).concat(HTMLB);
var form2 = form.replaceAll("undefined","");
document.getEIementById('typeform').innerHTML = form2;
};
</script>
You can pass custom values to hidden fields like this:
<div id="typeform"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
var source = '1';
var medium = '2';
var campaign = '3';
var content = '4';
var keyword = '5';
window.tf.createWidget('mYH43Dz4', {
container: document.getElementById('typeform'),
hidden: {
utm_source: source,
utm_medium: medium,
utm_campaign: campaign,
utm_content: content,
utm_term: keyword
}
});
</script>
In case you already have those values in your host page URL, you could use transitive search params feature:
<div
data-tf-widget="mYH43Dz4"
data-tf-transitive-search-params="utm_source,utm_medium,utm_campaign,utm_content,utm_term"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>
Your code does not work because you are adding script tag via innerHTML. This script tag will not execute for security purposes:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0

How to get the key from a JSON to display into a textarea

<!DOCTYPE html>
<html>
<head>
<title>JSON Parser</title>
</head>
<body>
<h2>This is a JSON parser example:</h2>
<!--data to be parsed: { "Device":"Computer", "Quantity":30, "Specification":"Class A"} -->
<p id="JSON:">{ "Device":"Computer", "Quantity":30, "Specification":"Class A"}</p>
<label>Converted to XML</label><br>
<textarea disabled rows="10" cols="60" id="display"></textarea><br>
<button onclick="jParse()">Click me to Parse</button>
<button onclick="toXML()">Click me to Convert</button>
<script>
var txt = '{ "Device":"Computer", "Quantity":30, "Specification":"Class A"}';
//var txt = { "Device":"Computer"};
var obj = JSON.parse(txt);
function jParse(){
alert("Device: " + obj.Device +
"\nQuantity: "+ obj.Quantity +
"\nSpecification: "+ obj.Specification);
}
function toXML(){
var txt2 = {"Device":"Computer", "Quantity":30, "Specification":"Class A"};
var keys = Object.keys(txt2);
alert("yes");
var xmlText = console.log(keys[0])
document.getElementById("display").value=xmlText
}
</script>
</body>
</html>
So basically what I'm trying to do here is to get device into the text area as an output. This sort of works but it outputs undefined instead. This code looks messy because I've been trying all sorts of ways to try and make it at least display something, I'm a complete noob in web programming (literally started like a few hours ago).
This is happening because you're outputting the result of a call to console.log(), which returns undefined (its job is to write something to the console, not return a value).
You simply need:
document.getElementById("display").value= keys[0];
Note also var is deprecated and you should use let or const these days. Also beaware non-indicative variable/function naming. Your jParse() function, for example, doesn't do any parsing. And your xmlText variable doesn't have anything to do with XML.
If you are trying to display "Computer" in the textArea (key[0] is "Device"), then to access the value in your Object you could do txt[keys[0]], so you can access the value "Device" of the txt Object.
Also, you have stored a console.log() inside a function, you don't get any value from that variable when you try to access it later just store it like this.
xmlText = txt[keys[0]]
then
console.log(xmlText)
if you want to console log it
if you then do
document.getElementById("display").value = xmlText
the value "Computer" will appear in the textbox
If you are trying to set the value of a key to an element then,
on the line that reads var xmlText = console.log(keys[0]) change it to,
var xmlText = text2[keys[0]]
here you go :
<!DOCTYPE html>
<html>
<head>
<title>JSON Parser</title>
</head>
<body>
<h2>This is a JSON parser example:</h2>
<!--data to be parsed: { "Device":"Computer", "Quantity":30, "Specification":"Class A"} -->
<p id="JSON:">{ "Device":"Computer", "Quantity":30, "Specification":"Class A"}</p>
<label>Converted to XML</label><br>
<textarea disabled rows="10" cols="60" id="display"></textarea><br>
<button onclick="jParse()">Click me to Parse</button>
<button onclick="toXML()">Click me to Convert</button>
<script>
var txt = '{ "Device":"Computer", "Quantity":30, "Specification":"Class A"}';
//var txt = { "Device":"Computer"};
var obj = JSON.parse(txt);
function jParse(){
alert("Device: " + obj.Device +
"\nQuantity: "+ obj.Quantity +
"\nSpecification: "+ obj.Specification);
}
function toXML(){
var txt2 = {"Device":"Computer", "Quantity":30, "Specification":"Class A"};
var keys = Object.keys(txt2);
alert(keys);
var xmlText = keys;
document.getElementById("display").value=xmlText
}
</script>
</body>
</html>
Issue is console.log(keys[0]) is for print into browser console. so you need to perform assignment operation here like
var xmlText = keys;

create the variable link as a hyperlink javascript

create a hyperlink with the variable link
<html>
<body>
<center><h1> retrive data</h1></center>
<h1 id="head1"> </h1>
<input type="text" placeholder="enter your unique id" id="pass"/>
<input type = "button" value = "submit" id="but" onclick="myfunction();"/>
<script>
var pass;
function myfunction()
{
pass = document.getElementById("pass").value;
document.writeln(pass);
document.writeln("<br>");
document.writeln("<br>");
document.writeln("<br>");
document.writeln("<br>");
var passwordToLookFor = pass;
var ref = firebase.database().ref("users");
var query = ref.orderByChild("password").equalTo(passwordToLookFor);
query.once("value").then(function(snapshot) {
snapshot.forEach(function(child) { // loop over the results
console.log(child.key);
console.log(child.val().user_name);
var link = child.val().user_name;
document.writeln(link);
});
});
}
</script>
</body></html>
i want to create the value of link as a hyperlink
i want the hyperlink to be created once when the function is called
Are you just looking for how to make it an anchor tag?
<script>
var pass;
function myfunction()
{
...
var link = child.val().user_name;
document.writeln("<a href='"+link+"' target='_blank'>"+link+"</a>");
});
});
}
</script>
</body></html>
You can create an a dom element like this:
let link_el = document.createElement('a')
link_el.href = link // assuming link holds the value of the href you want
Then insert it into the dom wherever you want.
If I understand correctly and the link variable contains the actual address you want to navigate to, then this will work. First simply set an ID on the div you want to populate with links:
<div id="target-div"></div>
Then populate it like so (I just created an array for demo purposes, but this would be your snapshot.forEach:
var links = ['link1', 'link2', 'link3']
var targetDiv = document.getElementById("target-div");
links.forEach(function(link) {
var anchor = document.createElement('a');
anchor.href = link;
anchor.innerText = link;
targetDiv.appendChild(anchor);
var br = document.createElement('br');
targetDiv.appendChild(br);
});
Demo: https://jsfiddle.net/csnuh7rd/2/

Having trouble appending javascript into my html

OK,so I am trying to pull some data from an api. The problem that I have run into is that I am able to find out the information that I am looking for, but am having trouble getting that information out of the console and onto my main index.html page.
Here is my JS code
var form = $('#search');
var input = $('#search-keyword');
var results = $('#results');
$(document).ready(function() {
$("#myBtn").on('click', function() {
var symbol = $("#search-keyword").val();
$.getJSON("http://dev.markitondemand.com/Api/v2/quote/jsonp?symbol=" + symbol + "&callback=?", function(info) {
console.log(info);
});
});
});
Here is my html code
<div id="search">
<h1>API Test</h1>
<input type="search" id="search-keyword">
<button id="myBtn">Try it</button>
</div>
<div id="results"></div>
By doing this, I am able to get pretty much what I am looking for. However I cannot get the data from the console to the actual page.
I have tried appendChild
var bob = document.getElementById(results);
var content = document.createTextNode(info);
bob.appendChild(info);
I have tried innerHTML
var theDiv = document.getElementById(results);
theDiv.innerHTML += info;
..and I have tried .append()
$('#myBtn').click(function() {
$(results).append(info)
})
I'm out of ideas. I realize that I probably have a small problem somewhere else that I am not seeing that is probably the root of this. Much thanks to anyone who can help me with this issue.
"results" needs to be in quotes with regular javascript and for jquery you have already decalred the results variable.
var theDiv = document.getElementById("results");
theDiv.innerHTML += info;
$('#myBtn').click(function(){
results.append(info)
})
Also since you are declaring results outside of your document ready call you have to make sure you html comes before the javascript.
<script>
var form = $('#search');
var input = $('#search-keyword');
var results = $('#results');
$(document).ready(function() {
$("#myBtn").on('click', function() {
var symbol = $("#search-keyword").val();
var resultedData = $.getJSON("http://dev.markitondemand.com/Api/v2/quote/jsonp?symbol=" + symbol + "&callback=?", function(info) {
return info;
});
var resultDiv = document.getElementById("results");
resultDiv.innerHTML += resultedData;
});
});
</script>

How to show a string on a page

This is a really stupid question.
I have a javascript string variable for a name, and i want to display it where it says user like this:
"Hello, user!" --> "Hello, Chris!
Surely you could have found this answer out easily yourself :p
Put the name in a span and give it an ID
Hello <span id="name"></span>
Then set the text using getElementByID
var name = "Chris";
document.getElementById('name').innerHTML = name;
var user_name = 'Chris';
document.writeln("Hello, " + user_name);
I think document.write plus some string concatenation are what you're looking for:
var user = "Chris";
document.write("Hello, " + user + "!");
Something like this will do the trick.
var user = 'Steve';
document.write('hello ' + user);
If you need to target an element, you can use the usual methods, such as:
var user = 'Steve';
var thisOne = document.getElementById('thisOne');
thisOne.innerHTML = ('hello ' + user);
May as well throw in a jsfiddle so you can play around an experiment.
This is example of dislay string into span tag.
'+' operator uses for string concatenation.
<html>
<head>
<script>
var name = 'Chris';
var field = document.getElementById('show_string');
field.innerHTML( '"Hello, '+ name + '!"' );
</script>
</head>
<body>
<span id='show_string'></span>
</body>
</html>
You can concatenate the user's name with the rest of the string you want to display like so:
<p id="hello"></p>
<script type='text/javascript'>
var user_name = "Chris";
var hello_string = "Hello, " + user_name;
document.getElementById("hello").innerHTML = hello_string;
</script>

Categories