I have no idea about JSON, please don't assume i know everything about java or json or ajax and I have a spreadsheet from Google sheets and I was able to convert the sheet data into a JSON URL (https://script.googleusercontent.com/macros/echo?user_content_key=RFP2beVz0BOAadC8lOHQi_-dajE5DI1oGW6ItREi66KTWjeP4twxaElm3krjtYa3QGuvmf_8gtYA-iMqW17UV8_5kB6YeGDjOJmA1Yb3SEsKFZqtv3DaNYcMrmhZHmUMWojr9NvTBuBLhyHCd5hHa1ZsYSbt7G4nMhEEDL32U4DxjO7V7yvmJPXJTBuCiTGh3rUPjpYM_V0PJJG7TIaKp5Mo6IQPCUHsaGMF-VMB9PySb3cSNzXDiUtZyp4RMiB6CFaNdOtIlSkpnu9Yad3Py8KiW3k6MDkf31SIMZH6H4k&lib=MbpKbbfePtAVndrs259dhPT7ROjQYJ8yx) and this is the result
and I what I need to is to display that data like this:
I know I may have to use some CSS somewhere for some styling, I just need to be told where. The important thing is how to use my JSON data which is NOT stored on my pc and use it as a base for my HTML element.
My plan is to later on integrate my google calendar to my spreadsheet and only use the spreadsheet to change the data on my website without having to log into my web and do things there at all after achieving this.
Your question is quite broad but might only require you to learn a bit of jQuery and JavaScript (for handling JSON). In the interest of time, I can only provide a high level answer for now...
You can create your html file with an ul (unordered list) element to hold your list. In the html file, you can use jQuery to make the GET request to the JSON link you gave. The jQuery function you use to make the request will include a callback that will return a JavaScript object representing your data. For parsing this data into an object in JavaScript, I'd recommend the following link to the jQuery documentation for a JSON request.
Next, you'll want to update your HTML list. I'd recommend reading the following answer for how to push to your list via jQuery. The basic idea is that you give id's to your html elements and then jQuery allows you to modify these html elements from your JavaScript. In your case you can create li (list item) elements and append them to your ul element, accessing this ul element through the id we mentioned earlier.
You can include your CSS for each list item using the HTML link element, ie:
<link rel="stylesheet" href="li-style.css">
Related
I'm working on a website where I want to add the settings of my Slick Slider trough the data-attribute. This is possible with the 'data-slick' attribute. The format for this looks like this: data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'.
In my WordPress CMS I'm using the plugin 'Data Attributes' to add data attributes to a Gutenberg Block. Trough this plugin all double and single quotes are converted to and therefor changes on the frontend to data-slick="{"slidesToShow": 4, "slidesToScroll": 4}"
This is not working. The Slick Slider doesn't use these settings.
Is there another way to add a JSON object into a data-attribute so it will work with the Slick Slider?
Thanks already for your help!
Kind Regards,
Nick
I think storing a JSON value in HTML is a bad idea. There are too many conditions which you have to take into consideration - backend returning page, WEB server encoding (it can add a custom encoding header), and browser compatibility. For this task, I'd prefer 2 ways: bitwise mask or simple function-for example, define a few data attributes -data-s1, data-s2, data-sn. In the JS code, add an array [ data-s1, data-s2, data-sn]. And finally, add a loop with an in-condition (if data.contains(element of array) - read and then parse the data inside of the attribute). I never worked with wordpress but for JS it is a easy task. If you need example write comment below. I can update my answer
I know that openrefine is not a perfect tool for web scraping but looking for some helps from the first step.
I cannot collect the full html codes from openrefine when I add column by fetching url (https://profiles.health.ny.gov/hospital/view/103094). They do not incorporate any codes under accordion such as services, bed types, and etc.
Any idea to get the full codes by fetching in openrefine?
I am trying to collect information under administrative, whose Xpath is "//div[4]/div/ul/li" ("div#AdministrativeBox.in.collapse")
This website loads its content dynamically using Javascript. The information that interests you is not stored in the source code of the page, so Open Refine cannot extract it.
However, there is a workaround. If you transform your URLs with the GREL formula value.replace('view', 'tab_overview'), you will get scrapable pages like this one.
Note that OpenRefine does not use Xpath, but JSOUP selectors. To get the elements of the "Administrative" block, you can use this GREL formula.
forEach(value.parseHtml().select('#AdministrativeBox li'), e, e.htmlText()).join(',')
Result:
So I am fairly new to working with iOS applications and I am currently working on an application which pulls data from a website using NSURLSessionDataTask, parses the JSON response (HTML), and then populates a view with data from the response.
Currently, I am stuck trying to find a solution to correctly parsing my current HTML string (of type __NSCFString/NSString) from the JSON response, and putting the text into one or more UITextViews and images into one or more UIImageViews within the main ViewController.
It has previously been suggested to simply use a UIWebView to display everything or to use an outside library to do some of the converting, however I am curious if there are any methods by which I could parse the HTML and extract all relevant text or images and throw them into an array for later use. I would very much prefer to keep all of this native and not use outside libraries unless absolutely necessary.
I have also seen some use of the NSAttributedString class for parsing HTML from a JSON response, but am unsure if this is even relevant to what I am trying to do here. Any help/suggestions/thoughts are appreciated!
You can use the native NSXMLParser class. Checkout the documentation here.
Within your custom parsing class. You can generate NSAttributedString and store into array based on custom logic. This should help.
I get some data on html/php page from database. And I edit it. But I want that data to change automatically without refreshing when I edit and click submit button. I have read that I must use json. But I can't add json values into html tags.
How can I do it ?
If you could not understand me, see this video.
You can use javascript to fetch the json file and manipulate the DOM accordingly. The example you provided uses jquery. Jquery provides a couple of ways to retrieve json data with ajax calls. This is all documented very well. See https://api.jquery.com/jquery.get/
I'm looking to build a system that styles the search results from DocumentCloud (and allows me to link to a given document).
I know I can query DocumentCloud and return JSON results using a search string like this:
https://www.documentcloud.org/api/search.json?q=obama
I don't know how to:
Grab the output of the search and put it on my own page
Style the data once I have it on my page
I'd just like to know how to get started with this, I'm experienced with HTML and CSS but I've never worked with JSON before.
There's more info here but I just don't know where to get started: https://www.documentcloud.org/help/api
It sounds like you're not so familiar with JavaScript, correct? JSON stands for JavaScript Ojbect Notation, so to work with it, you'll have to dive in a bit. I strongly recommend looking into using a JavaScript framework/library, namely jQuery to handle the heavy lifting. (There are other worthy libraries, but jQuery is by far the most popular, and is very friendly, using CSS-like selectors to manipulate the document object model).
check this jQuery tutorial: How jQuery Works
Here's a primer on using jQuery's jsonp to fetch remote rsults and using them in a page: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
You might end up with code in a javascript file, or a script tag (following a link to the jQuery library) that looks like this:
$(document).ready(function () {
$.getJSON('https://www.documentcloud.org/api/search.json?q=obama&callback=?', null, function (results) {
// this would append whatever the json returns for 'total'
// inside an element on your page with an id of 'resultsCount':
$('#restulsCount').append(data.total);
});
});
As a result, extra text & markup can be added to elements you already have on your page in whatever form/position you need it, and regular CSS rules from any style block or CSS file linked on your page will apply to them.
Good luck.