Populating Nested JSON from remote data - javascript

i want to populate this json http://www.godsgypsychristianchurch.net/music.json using a get request, there are multiple level's data which i would like to have parsed using jquery and using some hidden div's (this json hold's music from multiple church's in different cities)
the idea of the parsing is this
Cities>Albums>Tracks>Div with Mp3 Link/Player
detailed explaination
Church
with the string church i'd like to list firstly a list of cites which you click on and then the string
Album is to populate & list each album for the selected city (while hiding the city list)
once a album is selected the string
tracks is to be populated and listed (again while hiding the album list)
once a track is selected id'd like to have a hidden dive which links to the mp3 (which will have to be combined with the baseurl string to complete the url, but once i can get to this div i am capable of creating the template for it, it just parsing the nested json in that type of manner thats the problem..
please help and if you would please include full code (i get very confused when just a snippet of code is shown, and JSfiddle is a big help too, i know it's asking a lot but i really need some help, thank you in advance
to get more of a idea of what i am trying to do, go to you can download the iOS app from the app store "GGCC MOBILE" I'm basically trying to duplicate that but for the website http://www.ggcc.tv
i've rewritten the JSON format and got it working in Sencha touch http://www.ggcc.tv/app/STNL the rewritten data is here http://www.ggcc.tv/app/data.json but the problem with that is scrolling with a mouse, ST would require you having to click and drag in order to scroll, i can't seem to find a way to disable is, so i'm asking for your help in parsing this data for our website without using sencha touch, thank you very much for all your help, time and effort.

"Populating Nested JSON from remote data" is worrying.
Think of it this way :
Web page issues a .getJSON() request (or its $.ajax() equivalent).
Remote server application receives the request.
Script on the remote server responds to the request by retrieving data from database and composing a data structure (deep-object or deep-array or a combination of the two).
Script on the remote server JSON-encodes the data and sends it back to the client in its response.
Client receives the response and jQuery automatically JSON-decodes it into a javascript data structure that mirrors the server's original data structure.
Exactly what you then do with the data is up to you and your application building skills, which, as a byproduct of the exercise, will be honed to perfection.

Related

dynamically generate content for a page when clicking on product

everyone. I am making a website with t-shirts. I dynamically generate preview cards for products using a JSON file but I also need to generate content for an HTML file when clicking on the card. So, when I click on it, a new HTML page opens like product.html?product_id=id. I do not understand how to check for id or this part ?prodcut_id=id, and based on id it generates content for the page. Can anyone please link some guides or good solutions, I don't understand anything :(.
It sounds like you want the user's browser to ask the server to load a particular page based on the value of a variable called product_id.
The way a browser talks to a server is an HTTP Request, about which you can learn all the basics on javascipt.info and/or MDN.
The ?product_id=id is called the 'query' part of the URL, about which you can learn more on MDN and Wikipedia.
A request that gets a page with this kind of URL from the server is usually a GET request, which is simpler and requires less security than the more common and versatile POST request type.
You may notice some of the resources talking about AJAX requests (which are used to update part of the current page without reloading the whole thing), but you won't need to worry about this since you're just trying to have the browser navigate to a new page.
Your server needs to have some code to handle any such requests, basically saying:
"If anybody sends an HTTP GET request here, look at the value of the product_id variable and compare it to my available HTML files. If there's a match, send a response with the matching file, and if there's no match, send a page that says 'Error 404'."
That's the quick overview anyway. The resources will tell you much more about the details.
There are some solutions, how you can get the parameters from the url:
Get ID from URL with jQuery
It would also makes sense to understand what is a REST Api and how to build a own one, because i think you dont have a backend at the moment.
Here some refs:
https://www.conceptatech.com/blog/difference-front-end-back-end-development
https://www.tutorialspoint.com/nodejs/nodejs_restful_api.htm

Use HTML template to create pages from API

I have been asked to design an "intelligent home" website based on an API provided. I have "Rooms" (actual rooms in a house) and "Devices" in each room.
I have a page (HTML file) "Rooms" which contains a list of all the availabe rooms in the API. I have another HTML file named "RoomX" which is the "template" for all the rooms. It has a list of all the devices in the specified room.
I don't know how to "create" and link new "Room" pages every time I add a Room to the Rooms list. Example: I added "Room 1" as a room in the API and as an element in the page "Rooms". I click on it, and right now, it takes me to my "RoomX" page. I want to create "copies" of that "RoomX" page; so that when I click on the new room I created, I can access a page that has the selected room title and its devices.
The creation and deletion of rooms is dinamic, so I would need to create these pages depending on the user's needs. I am only just starting to use HTML, CSS and JS (I am using JQuery on my page), so I would appreciate an extensive explanation.
Thanks!
What I understand is that you have an API ready and they asked you to design the front end? or are you supposed to design everything?
if the API is already made please go back to it and look for the specification, Usually the response is going to be a JSON.
example:
let's say that to get all available rooms > yourwebsite.com/rooms
to get one room, for example room 1 > yourwebsite.com/rooms/1
if that was made for you already, all you need to make is the UI + use jquery AJAX to get the json response and display it
if nothing was made then pretty much doing it dynamically with html is impossible. What you need to do then is:
pick any RESTful API framework and learn it if you don't know one already
make a restful api that generates json responses
make the UI using either front-end frameworks or by classic html, css and js

Screen-scrape paginated data

I'm trying to grab a list of all of the available stores returned from the search at this website.
https://www.metropcs.com/find-store.html.html
The issue is that it returns back only 4 or 5 at a time, and does not have the option for 'See All'. I attempted to use Post Man in Chrome and AutoPager in Firefox to see if I could somehow see all of the data in the background but I wasn't able to. I also was researching JSON interception tools, as I believe the site is using JSON in the return set, but I wasn't able to find any of the actual data that I needed.
In the past I was able to hit 'print preview' and grab the list that way (then I just copy-pasted to Excel and ran some custom macros to strip the data I need) but the printer-friendly version is gone now as well.
Any ideas on tools that would allow me to export all of the stores found, especially for larger return sets?
You want to manipulate this request:
https://www.metropcs.com/apps/mpcs/servlet/genericservlet
You'll notice the page sends this (among other things) as the request to that URL:
inputReqParam=
{"serviceProviderName":"Hbase","expectedParams":
{"Corporate Stores":...Truncated for clarity...},
"requestParams":
{"do":"json",
"minLatitude":"39.89234063913044",
"minLongitude":"-74.85258152641507",
"maxLongitude":"-74.96578907358492",
"maxLatitude":"39.979297160869564"
},
"serviceName":"metroPCSStoreLocator"}
You'll need to manipulate the lat and long bounding box to encompass the area you want. (The entire US is something like [-124.848974, 24.396308] to [-66.885444, 49.384358] )
In your favorite browser it should be easy enough to tweak the request to get a JSON response with what you require.

How to cache an image from URL before displaying it

Basically, this app should contain a collection of objects in a view showing a representative image of each object (i.e. a movie should show its poster).
Talking about movies, I am trying to use the IMDB APIs in order to retrieve the metadata for a certain movie title, including its poster. However, hotlinking won't let me display the images once their URLs are obtained from the APIs (I keep getting the "GET [...] 403 Forbidden" error...).
Since I am using the JSONStore feature in order to cache the data, I would like to know if there is a possibility to store those images in JSONStore and then display them like a normal browser would do. I am trying to do all this sort of things from the front-end side, not the back-end one, using AngularJS, HTML5 and JavaScript.
Do you have any suggestions for this kind of problems?
Thank you.
Suggested solution: What you'd need to do is to encode the images to base64 and this way you could store the binary image as a string inside your JSONStore collection.
When you then need to display it you will need to base64 decode the string back into an image and display it in your HTML

Javascript control page and user view page

Currently I'm working on a project where a user enters a lot of data constantly for a hour long window. I'm looking to have one user control all the data via some control panel and then have a link they can distribute to other users that will allow them to view that data without the ability to edit it.
Right now I'm doing some extremely weird methods. I have an XHR request on the control page that fires whenever a field is finished being edited. From there the data is sent to a php file that converts the data into a simple text file. Then the distributed link file will load that file one time and translate it into the necessary format.
Some potential problems I've run into are it seems odd that I'm sending starting as javascript data then going to a php file then to a text file then translating the data all the way back into javascript data again. Another problem I've come into is I'm not sure of a way to force users to reload the page when a field is edited in the control panel after the user has opened the view page.
Have I totally gone overboard here? What are some better concepts I could employ to accomplish this task?
If i understand what you want to do this is how i will do this:
First the data entry
if you have lot of fields you better use a form wizard, i don't have a particular one in mind right now but there is lot of them just search jQuery Form wizard
Here is an example:
http://i.stack.imgur.com/Luk2b.jpg
The concept of the form wizard is to guide user via multiple page and also validate the data. And click save when and the end.
Then save date in database.
Display content
All you need to do is to create a global separate page to display your content.
Let see something like: http://yourserver.com/view/{id}
where id is the identifier of the particular row in your database.
i'm not sure if i totally understand what u about to do. i'm trying to make your work description shorter here:
want to build a website that one person can edit a single page's content in 1 hour, and others can view the content change in that 1 hour.
if this is what u want to build, here's the module:
teacher: the one who can edit the page
student: the one who can only view the page
server: information center
teacher client edits page -> teacher client sends update data to server -> server saves data -> server sends update notice to student client -> student client receives update notice -> student fetches update data from server
to make this module work well, i suggest try socket instead of http reqeust, just like online games or IMs do.
well, try socket.io

Categories