I am new to JSON. I ran the code below and got an error
import urllib2
import json
urllib2.urlopen('https://ciapipreprod.cityindextest9.co.uk/TradingApi')
print json.load(urllib2.open(`https://ciapipreprod.cityindextest9.co.uk/TradingApi'))
ValueError: No JSON object could be decoded
But when I ran it without json as below, I could see what was inside.
import urllib2
data=urllib2.urlopen('https://ciapipreprod.cityindextest9.co.uk/TradingApi')
html = data.read()
print html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Ajax Test Harness</title>
<link href="/TradingAPI/Content/css?v=oI5uNwN5NWmYrn8EXEybCIbINNBbTM_DnIdXDUL5RwE1" rel="stylesheet" type="text/css" />
<link href="/TradingAPI/Content/themes/base/css?v=M29VGAPKJl__Ya5hV5ngguUfY8uNXwB076bG-JmFavY1" rel="stylesheet" type="text/css" />
<script src="/TradingAPI/Scripts/js?v=lYEohN8Pq3__VMPgz6C4ZXSyFUc0d6gVJQ28Wflqo3E1"></script>
</head>
<body>
<div style="width: 100%; margin: 0px;">
<img alt="CityIndex Logo" src="/TradingAPI/Images/ci_white_logo.jpg"/>
</div>
<h2>Ajax Test Harness</h2>
<script src="/TradingAPI/Scripts/tradingApi.js" language="javascript" type="text/javascript"></script>
<script src="/TradingAPI/Scripts/corsTest.js" language="javascript" type="text/javascript"></script>
<script src="/TradingAPI/Scripts/json2.js" language="javascript" type="text/javascript"></script>
<div id="apitest">
<form id="form1" runat="server"></form>
<hr />
<h2>Test Harness</h2>
<button onclick=" eval($('#code').val()); ">Execute</button><br />
<textarea id="code" cols="120" rows="15">
var userName = "DM631479";
doPost('/session',{ "UserName": userName, "Password": "password"}, function (data, textCode) {
// Smoke Test
doGet('/smoketest');
setRequestHeader("UserName", userName);
setRequestHeader("Session", data.Session);
// Authentication Test
doGet('/smoketest/authenticated');
// Account Information Tests
doGet('/useraccount/DM631479/ChartingEnabled');
doGet('/useraccount/ClientAndTradingAccount');
// Need Valid Test Data doPost('/useraccount/Save', {"PersonalEmailAddress":"not#realaddress.com","PersonalEmailAddressIsDirty":true})
// Cfd Markets Test
doGet('/cfd/markets?marketname=uk&maxresults=10&usemobileshortname=true');
//Logoff
doPost('/session/deleteSession?userName='+userName+'&session='+data.Session);
});
/* var userName = "DM631479";
cityindex.corsTesting.doPost('/session',{ "UserName": userName, "Password": "password"}, function (data, textCode) {
});*/
</textarea>
<br />
<select id="result" style="background-color: #e4e4e4; min-height: 300px;" multiple="multiple"></select>
<hr />
</div>
</body>
</html>
My understanding was that if there were '{}' within my var 'Data' they were "dictionaries" and I could then call them using the JSON module.
Perhaps I have misread the contents of my variable and maybe there actually isn't anything for JSON to 'load'
Sorry if any of the tagging here is wrong or ineligible.
Looks to me like that url returns html, and not json at all. Also, from the print statement, results it doesn't look like there is any json embedded in the page at all.
json.load will only work with input that looks exactly like json, something that looks like a dictionary. It won't pull this out of the surrounding html.
If there were json somewhere on that page, say, in a script tag, the you'd first have to parse the html to extract it. You could use beautiful soup or scrapy for that.
JSON has a particular specified shape which that response does not conform to. What you have there is JavaScript (and some JavaScript is valid JSON) embedded in HTML. It's similar to this example:
<pre><code>print("Hello World")</code></pre>
which contains Python code, but is not, in total, valid Python code. In order to extract the data you will need to find a different endpoint to hit that produces valid JSON (or else you will have to extract the JSON-like parts of the JavaScript on the page that you are interested in by using the html.parser built into the standard library, a library like bs4, or regular expressions). Then you can feed the valid JSON text to json.loads and work with it.
Related
I need help on the following: I cannot get the JQuery to load the JSON data even though the JSON file is firing in the console.
Here is the HTML code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.3.1.js"></script><!-- places Javascript reference file in html-->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <!--places css in sub folder-->
<title>H</title>
</head>
<body>
<div id="vanilla_ajax">
</div>
<button type="button" id="button1" onclick="loadAJAX()">Change to AJAX</button>
<div id="jq_ajax">
</div>
<button type="button" id="button2" onclick="loadJQUERY()">Change to JQUERY</button>
<script src="js/ajax.js"></script>
</body>
</html>
The first button loads and is fine so I have excluded that portion. It is the second one "loadJQuery()" that does not render on the screen. Here is the Javascript for it:
function loadJQUERY(){
/*place holder for ajax loading using JQuery*/
$('#jq_ajax').append('<p id = "test">'); //jq test
$.ajax({
url: "data/Holder.json",
type: 'GET',
dataType: "json",
success: function (result) {
$("#jq_ajax").html("<p>" + result.data + "</p>");
}
});
}
The pathway for the folder is correct as it works with the XML/Ajax version.
the JSON file was using single quotes instead of double quotes. That was the issue
I am trying to create custom form element which I am trying to reuse in other applications developed in angular and jsp page of Java
my-element.js:
class MyElement extends HTMLElement {
// This gets called when the HTML parser sees your tag
constructor() {
super(); // always call super() first in the ctor.
this.msg = 'Hello, World!';
}
// Called when your element is inserted in the DOM or
// immediately after the constructor if it’s already in the DOM
connectedCallback() {
this.innerHTML = `<form action="/action_page.php">
<div class="container">
<label><b>Name</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Age</b></label>
<input type="text" placeholder="Enter Age" name="age" required>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Add</button>
</div>
</div>
</form>`;
}
}
// This registers your new tag and associates it with your class
window.customElements.define('my-element', MyElement);
my-element.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/iron-ajax/iron-ajax.html">
<script src="my-element.js"></script>
<!-- <link rel="import" href="add-form.html"> -->
</head>
<body>
<my-element></my-element>
</body>
</html>
Two issues I am struggling with now are below
1.Can i incude both the files as below to my angular and java jsp page and use custom tag to work?
<link rel="import" href="my-element.html">
<script src="my-element.js"></script>
<my-element></my-element>
I am trying to pass below json object as an attribute to custom form element and trying to render custom form elements
[
{
"name":"Name",
"type":"text",
"size":"20",
"readyOnly": false,
"validateFunction":"onlyText"
},
{
"name":"Age",
"type":"number",
"size":"3",
"readyOnly": false,
"validateFunction":"onlyNumber"
}
]
I tried using below way to inject json data to custom element to render form elements based on json but no luck and there are no console errors
<my-element form-data="{{data}}"></my-element>
ad 1) yes you can use your element with every server system you would like. It's "just html" that the beauty in it :)
ad 2)
HTMLElement won't do anything automatically. So if you wish to access your json you will have to do something like this
<my-element form-data="{'name': 'Name', 'type': 'text'}""></my-element>
connectedCallback() {
let rawData = this.getAttribute('form-data');
let jsonData = JSON.parse(rawData.replace(/'/g, '"'));
}
Notice that in the form-data json there are ' instead of ". So we have to replace them before using JSON.parse.
it looks like this is using a web component as opposed to a polymer component. The native web component API does not include data binding, although angular and polymer both do (but implemented in different ways).
Native web components and polymer components can be used with Angular as well as other frameworks.
Depending on whether you are using Angular.js(1) or Angular(2+), setting up the data object to be passed into the DOM will vary, but in general the data should be "set up" so to speak in the JS and passed into the DOM. Otherwise as #daKmoR said, the data would need to be declared as he did in his example.
There are packages that assist in implementing data 2-way binding between polymer's data bindings and angulars bindings if that is needed.
Trey
I have been looking into designing my UI with bootstrap table. My simple HTML utilizes bootstrap table features to render a response from REST service.Everything looks good as long as my REST service responds with list of objects as a JSON array.
My question: How do I use bootstrap table if the response JSON does contain only a single element.
Sample response JSON that works:
{
"parent":
[{
"id":1,
"name":"some_name",
"city":"some_city"
}]
}
Sample JSON response that I am struggling to display:
{
"parent":
{
"id":1,
"name":"some_name",
"city":"some_city"
}
}
I tried one workaround to fix this by appending array brackets in the JSON response using following:
function responseHandler(res) { //this function is called from table element
return JSON.parse("["+JSON.stringify(res.parent)+"]");
}
However, I don't really like this solution as it looks like making things work without a systematic approach.
Based on my research, I am pretty convinced that bootstrap table requires the JSON data in JSON array format. I have run some tests and it confirms this finding.
I would like to know how do I achieve showing single element JSON response using bootstrap-table features like "data-url" annd "data-response-handler".
My HTML looks like:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<script src="bootstrap-table-master/docs/assets/js/jquery.min.js"></script>
<script src="bootstrap-table-master/docs/assets/bootstrap/bootstrap.min.js">
</script>
<script src="bootstrap-table-master/dist/bootstrap-table.js"></script>
<link rel="stylesheet" href="bootstrap-table-master/docs/assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-table-master/docs/assetsbootstrap/css/bootstrap-min.css">
<link rel="stylesheet" href="bootstrap-table-master/dist/bootstrap-table.css">
<script>
function responseHandler(res) {
return JSON.parse("["+JSON.stringify(res.parent)+"]");
}
</script>
</head>
<body>
<h1>Bootstrap Table</h1>
<table id="table" data-toggle="table" data-url="mydata.json" data-height="699" data-response-handler="responseHandler">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="city">City</th>
</tr>
</thead>
</table>
</body>
</html>
I use Spring for running my rest API service, i cant get the list of json object that my service send from a sample html file and plz tell me how can i access to the first object.
this is the sample output of my rest API service:
[{"src_ip":"1.1.1.1","src_id":"98","date":1470527874000},
{"src_ip":"1.1.2.1","src_id":"25","date":1470527934000},
{"src_ip":"1.1.2.1","src_id":"25","date":1470527934000}]
and this the code that i used in my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing Results</title>
<!--TODO badan version e CDN e jquery use shavad-->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "http://127.0.0.1:8080/restapi2",
dataType: "jsonp"
}).then(function(data) {
$('.List').append(data);
$('.data').append(data[0]);
});
});
</script>
</head>
<body>
<div>
<br><br>
<p class="List"></p>
<br><br>
<p class="data"></p>
</div>
</body>
</html>
I should say that when i run the sample of this link on my html file, it worked Properly.
Updated part:
after fixing last error,still I didn't get any correct data to show in my browser, but this time, the console get something but i don't know how to use them. this is a snapshot of it and the left side show that two object were sent.
and this content of that object:
Based on the discussion on the comment the reason is you were trying to access the different domain than your page which is prohibited by browsers as a security precaution.
$(document).ready(function() {
$.ajax({
url: "http://localhost:8080/restapi2"
}).then(function(data) {
$('.List').append(data);
$('.data').append(data[0].);
});
});
"No 'Access-Control-Allow-Origin' header is present on the requested resource"
I would like to Create a Mechanical Turk Hit by using the MTurK Package in R.
The R code I am using is the following:
filecontent <- GenerateHTMLQuestion(file="file.html")
print(filecontent)
#filestring <- filecontent [["string"]]
#filestring <- filecontent [["xml.parsed"]]
#filestring <- filecontent [["url.encoded"]]
filecontentForQuestion <- filecontent$string
filecontentForQuestion <- filecontent$xml
filecontentForQuestion <- filecontent$url
print(filecontentForQuestion)
testhit<-CreateHIT(question=filecontentForQuestion,
title="Title",
description="Description",
keywords="Keyword",
reward="0.05",
assignments="3",
duration="3600",
expiration="20000",
auto.approval.delay="2590000",
qual.req=GenerateQualificationRequirement("Approved",">","5"),
browser = F,
sandbox=T)
I have tried every different filecontent, but I always get an error when I use this command. Unfortunately, I always get the following error:
Error (AWS.MechanicalTurk.HTML5ParseError): There was an error parsing the
HTML5 data in your request. Please make sure the data is
well-formed and validates as HTML5
However, the html file I am using is the one from the MTurk API Manual and is the following:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='https://s3.amazonaws.com/mturk-public/ex
ternalHIT_v1.js'></script>
</head>
<body>
<form name='mturk_form' method='post' id='mturk_form' action='ht
tps://www.mturk.com/mturk/externalSubmit'>
<input type='hidden' value='' name='assignmentId' id='assignmentId'/>
<h1>What's up?</h1>
<p><textarea name='comment' cols='80' rows='3'></textarea></p>
<p><input type='submit' id='submitButton' value='Submit' /></p></form>
<script language='Javascript'>turkSetAssignmentID();</script>
</body>
</html>
I get the same error if I use a complete empty html5 doc with only the necessary placeholders. Has anyone an idea, why this does not work?
Using the hitlayoutid parameters or ExternalQuestion commands work, so I would like to explicitly use the GenerateHTMLQuestion command.