Display Json file inside an html file - json

I am very new to Json but im trying to display a json file inside an html body.
my json file looks something like this
{ items: [
{
"thumb":"http://link/link.jpg",
"title":"title of the link",
"link":"http://link.html",
"popup":"false"
},
{
"thumb":"http://link/link2.jpg",
"title":"title of the link2",
"link":"http://link2.html",
"popup":"false"
},
{
"thumb":"http://link/link3.jpg",
"title":"title of the link3",
"link":"http://link3.html",
"popup":"false"
}
]}
and i want have this to be displayed inside my html body document...any suggestions?ideas?
Thank you

To answer your question literally:
<iframe width="800" height="400" src="your-file.json"></iframe>
I'm not sure you really want that, though.
Does the JSON really exist in a file, or are you returning it as an HTTP response?
Are you really just using plain HTML, or is a server or client-side scripting language playing a role?
Do you want that plain text in your document, or are you looking to use the data in some way?

Related

How to save a JSON-object and use it in another request?

i'm currently trying to set up some JMeter testplans. I am pretty new to this (started a week ago) and don't have much programming experience either, so i hope you could help me in this case.
I already set up some http requests and have some simple JSON Extractor post processors to save some of the variables and use them with the "${variable}" notation.
But now i need to save and modify an object from a response to use that in the next http request.
My respose is a extremely big JSON object and the part im interested in looks something like this:
{
"payload": {
"workspace": {
"resultInstance": [
[{"part": "1"...}],
[{"part": "2"...}],
...
[{"part": "20"...}]
]
}
}
}
Note that for whatever reason these objects {"part":"1"...} are inside a nested array. And they are also pretty big.
I would like to safe those objects in a variable to use them in my next http request which should looks like this:
{
"instanceChange": {
"functionChecks": [
{"part": "1"...},
{"part": "2"...},
...
{"part": "20"...}
]
}
}
So what im really trying to find is a way to save all of the possible objects inside the nested array "resultInstance" and put them inside the non nested array "functionChecks".
I already looked inside the JMeter documentation but because of my poor programming background i cant find a way to realize this.
I think i need something like the JSR223 PostProcessor and "simply go through the resultInstance-array and use smth. like an getObject() on these", but i cant figure out the code i need and if its even possible to safe objects in variables in Jmeter.
Im pretty thankful for every bit of help or advice :).
Thanks in advance,
aiksn
Add JSR223 PostProcessor as a child of the request which returns the JSON response
Put the following code into "Script" area:
def response = new groovy.json.JsonSlurper().parse(prev.getResponseData())
def request = ['instanceChange': ['functionChecks': response.payload.workspace.resultInstance]]
vars.put('request', new groovy.json.JsonBuilder(request).toPrettyString())
That's it, you should be able to refer the generated request body as ${request} where required
More information:
Apache Groovy - Parsing and producing JSON
Apache Groovy - Why and How You Should Use It
let response ={
"payload": {
"workspace": {
"resultInstance": [
[{"part": "1"...}],
[{"part": "2"...}],
...
[{"part": "20"...}]
]
}
}
};
let requestObj={
"instanceChange": {
"functionChecks": [
]
}
};
response.payload.workspace.resultInstance.forEach(myFunction);
myFunction(item, index) {
requestObj.instance.functionsCheck.push(item[0]);
}

Map file in the Integration for the LogicApp in Azure

Have the following XML as a result of the HTTP GET function from the B2B supplier.
<Invoices xmlns="http://gateway.com/schemas/Invoices" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://gateway..com/schemas/Invoices Invoices.xsd">
<DocumentInfo>
<DocType>INVOICES</DocType>
<DocVersion>2.0</DocVersion>
</DocumentInfo>
<Header>
<StartDate>2018-12-01T00:00:00+01:00</StartDate>
<EndDate>2019-01-03T00:00:00+01:00</EndDate>
</Header>
<Documents>
<Invoice InvoiceId="RP82807" InvoiceDate="2019-01-02T00:00:00+01:00" DocumentType="IN" RefDocId="FT34532" RefDocType="ORDER" SystemId="10" HasPDFImage="0" />
<Invoice InvoiceId="T609881" InvoiceDate="2018-12-31T00:00:00+01:00" DocumentType="IN" RefDocId="FT39339" RefDocType="ORDER" SystemId="0" HasPDFImage="0" />
</Documents>
</Invoices>
Based on this article I've created the liquid map file to get the list of InvoiceIds:
{
"Invoice": "{{content.Documents.Invoice}}"
}
When using it in the LogicApp in the XML->Json converter, got the following result:
{
"Invoice": ""
}
I have also tried this as a liquid file:
{
"Invoice": "{{content.Invoices.Documents}}"
}
and this:
{
"Invoice": "{{content.Invoices.Documents.Invoice}}"
}
with the same result.
Can you give me a tip what I do wrong?
I tried to transfer part of your xml file to json with this map:
{
"DocType":"{{content.DocumentInfo.DocType}}",
"Invoice":"{{content.Documents.Invoice}}"
}
And get the output:
{
"DocType": "INVOICES",
"Invoice": ""
}
So this means I can get the DocType but can't get Invoice properties, so I think maybe the Liquid map doesn't support the XML format. Maybe you could change it to like this:
<Invoice>
<InvoiceId>T609881</InvoiceId>
<InvoiceDate>2018-12-31T00:00:00+01:00</InvoiceDate>
<DocumentType>IN</DocumentType>
<RefDocId>FT39339</RefDocId>
</Invoice>
This will work, or you could go to Liquid reference to check is there any methods to match the properties.
Note:what you want for now,binding to Xml Attributes is not currently supported.You could refer to this answer.
If you still have other questions, please let me know.
UPDATE:You still could do it with logic app. For example I used a FTP connector to get xml file content then create a json with "json(xml(body('Get_file_content')))" expression.
And this is the result.

Requesting embedded JSON data for D3

For reasons I won't bore you with, ALL elements of my webpage must be embedded into one file.
Between the HTML header tags, I have valid JSON data declared:
<script type="application/json" id="data">
"name": "flare", "children":[{"name": "thing1", ... }]
</script>
Previously this data was written to a JSON file which was referenced by my D3 bar chart scripts as follows:
d3.json("data/file.json", function(root) {
hierarchy.nodes(root);
x.domain([0, root.value]).nice();
down(root, 0);
});
I have been able to pass the embedded JSON to an object after following this thread:
Best practice for embedding arbitrary JSON in the DOM?
How can I now successfully pass this object to the D3 bar chart?
Parsing the embedded JSON object was the hard part, so you've basically got this one figured out. Once you have the embedded JSON parsed and passed to an Object, you can just start using that Object.
Building off of your example, say you had this JSON data embedded in your page:
<script type="application/json" id="data">
{"name": "flare", "children":[{"name": "thing1", ... }]}
</script>
Then instead of using
d3.json("data/file.json", function(root) {
...
}
just extract the body of the function you were using, and load the JSON object at the top:
var root = JSON.parse(document.getElementById('data').innerHTML);
hierarchy.nodes(root);
x.domain([0, root.value]).nice();
down(root, 0);
...
The method described in the question you've linked to will work. Just call the variable whatever you're using in your D3 code, e.g.
var root = JSON.parse(document.getElementById('data').innerHTML);

Loop through JSON to put result in HTML

I'm just starting with JSON and JavaScript and I am having some difficulties parsing JSON result. This is because there is a variable array with within episodes array the JSON that I want to have. So this is an array in an array if I'm right.
Example code:
{
"description":"This is a description",
"banner":"This is a banner",
"episodes":{
"15":[
{
"id":"28685",
"active":1,
"lang":"en",
"link":"http:\/\/link.com\video.php?hd=1"
}
],
"14":[
{
"id":"28577",
"active":1,
"lang":"ru",
"link":"http:\/\/link.com\video.php?hd=1"
}
]};
The "15 and 14" are episode numbers, and id, active, lang, and links are properties from that episode.
So in HTML I want to display that as a group together. Can anyone help me out on this, because I can't find any results on the JQuery page how to get those variable episode number array name.
Maybe to make it a bit more clear. This is my JSON source, and i want to create a video page from it. Where it lists all these episodes with the properties. I'm planning on putting this together with the twitter bootstrap library. The description is the "description from the tv serie" banner is for the banner image, and the list above here are episode 15 and 14. I want to be able to click on such an episodelink. The only think i have difficulties with getting it all apart in different objects: Full json: http://pastie.org/6635498
And it needs to be dynamic this way if the Json updates it also updates the html, that way i can't make static references to "15"
Some quick html i've made to be the target idea: http://pastie.org/6635571
using jquery you can convert your json string (assuming it's a valid json string) to a javascript object like this:
var jsonObj = $.parseJSON('{
"description":"This is a description",
"banner":"This is a banner",
"episodes":{
"15":[
{
"id":"28685",
"active":1,
"lang":"en",
"link":"http:\/\/link.com\video.php?hd=1"
}
],
"14":[
{
"id":"28577",
"active":1,
"lang":"ru",
"link":"http:\/\/link.com\video.php?hd=1"
}
]}');
from here you can access the json data in javascript like this (e.g. for episode 15's id):
var episode15id = jsonObj['episodes']['15']['id'];
then thru javascript magic you can put that into your html:
html:
<div id="jsondatahere" ></div>
js:
$("#jsondatahere").html(episode15id);

d3js forced directed cannot read from json

I have a simple json file which is :
{
"nodes":[
{"name":"Moe","group":1},
{"name":"Madih1","group":1},
{"name":"Madih2","group":1},
{"name":"Nora","group":1},
{"name":"Myna","group":1}
],
"links":[
{"source":35,"target":44,"value":1},
{"source":44,"target":35,"value":1},
{"source":45,"target":35,"value":1},
{"source":45,"target":44,"value":1},
{"source":35,"target":49,"value":1},
{"source":49,"target":35,"value":1}
]
}
when I save it use exactly the html code as shown in http://bl.ocks.org/4062045#index.html and address the above json, nothing appears on the cancas.
I appreciate it if you help me with this one as I am not very familiar with it. Moreover, it would be great if I know the minimum code required for drawing a graph like this using json.
Best,
The number of "source" and "target" refer to the index of the item in nodes array.
So you can change your json to following:
{
"nodes":[
{"name":"Moe","group":1},
{"name":"Madih1","group":1},
{"name":"Madih2","group":1},
{"name":"Nora","group":1},
{"name":"Myna","group":1}
],
"links":[
{"source":0,"target":1,"value":1},
{"source":1,"target":2,"value":1},
{"source":2,"target":3,"value":1},
{"source":3,"target":4,"value":1},
]
}
Then you can just copy the codes from http://bl.ocks.org/4062045#index.html example as the minimum code.
Remenber to change the json file to your own json file.
d3.json("path/to/your/json", function(error, graph) {
//codes
});