Tumblr API displaying post text from JSON - javascript

I have created a tumblr blog with two basic text posts to prove a concept...failing at the minute.
Using this example: http://jsfiddle.net/keckclip/9LNDX/5/ and by replacing the api_key and url only I can return the title etc but nothing within the post section of the json. I understand it's anarray but this is the code I have but it doesn't display anything from the posts.
$(document).ready(function () {
var API_KEY = "api key goes here";
var tumblrAPI = "http://api.tumblr.com/v2/blog/blogurlgoesintohere/posts/text?api_key=" + API_KEY + "&callback=?";
$.getJSON(tumblrAPI).done(function (data) {
$('#blog_title').append(data.response.blog.name);
$.each(data.response.posts, function (i, item) {
$("<div>").addClass("post").html(item.text).appendTo("#posts");
});
});
});
Seen quite a few examples but none explicitly explaining the best way to display post data.
My html includes:
<div id="blog_title" class="col-md-12"></div>
<div id="blog_post" class="col-md-12"></div>
I know, as always, it is likely something obvious but I would appreciate some assistance.
I know there are similar questions out there but I think mine is a different problem, perhaps nobody is as naive as me.
Edit -> the json is correct...

Related

Rendering HTML elements from a JSON object get. How to render HTML?

Feels good to finally submit some of my own questions here in the pursuit of knowledge. I was wondering if anyone could help me with the following problem. I have a jQuery GET where a JSON object gets pulled via an API.
My code:
var div = document.getElementById('myData');
jQuery(document).ready(function() {
const Url = 'https://boards-api.greenhouse.io/v1/boards/sunrock/jobs/5104060003';
jQuery('.btn').click(function() {
jQuery.ajax({
url: Url,
type: 'GET',
success: function(result) {
console.log(result);
x = result.title
var jobTitle = x;
document.getElementById('jobTitle').innerHTML = jobTitle;
y = result.content
var jobDescription = y;
document.getElementById('jobDescription').innerHTML = jobDescription;
},
error: function(error) {
console.log(`Error ${error}`)
},
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class='btn'>
Clicke here for the GET request
</button>
<div id='jobTitle'>Job Title here</div>
<div id='jobDescription'>Job Description here</div>
I want some of this information to display in HTML. But whenever i apply a variable with the information to a div using innerHTML, i get the following:
<p><strong>Your role</strong></p> <p>
As you can see the HTML elements are typed out fully, which is weird. Does anyone know how to remedy this?
I have a jsFiddle with my code here: https://jsfiddle.net/whimsicalcodingman/38a45udt/159/
As #GrafiCode pointed out, the issue isn't in your code, when you access the content property. The issue is in the information you are receiving for the content property.
The property content returns this:
"content": "<p><strong>Your role</strong></p>\n<p>The Project Finance...
Which is:
"content": "<p><strong>Your role</strong></p>\n<p>The Project Finance...
Therefore, I see two options for you, you can either fix this in the backend or fix this in the frontend.
If you want to fix this in the frontend, then you might be interested to use an HTML Sanitizer.
For example, you could Mozilla's HTML Sanitizer API
If you want to fix this in the backend, you can either fix the text manually or you can try to find a library.
For example, if your backend is NodeJS, then you can use this package library sanitize-html

Post JSON data in a page, from an URL (dynamic data)

I'm trying to post some mailing campaign statistics in a webpage on a website I'm building with Wordpress. I need the statistics to update on their own as data changes, so instead of parsing a JSON string directly I want to use an URL so the data is continually being fetched from the Mailify (mailing service I'm using) server.
I have some Pascal programming experience but I'm new to javascript and I've been struggling a lot with this particular problem. Because I'm getting desperate, I figured I'd try asking for help.
I've figured out how to request the data from the URL (although I forgot how I did it last time and rn I'm not able to get past the pop-up that requests the credentials), and also how to post on the page using JS, which would be something basic. But I can't figure out how to fetch the data from JSON in real time. I've seen so many different examples but they're all a little different and not really similar to this situation.
Some useful data:
API Key: 8RdZ1SkxTeWGlk2T049KOw
Account ID: 5c7650c911ce626a6371c1b5
Mailing campaign ID: TZi4oEiSRDCqciu-vGV98A
JSON URL: https://mailifyapis.com/v1/reports/TZi4oEiSRDCqciu-vGV98A
JSON URL I'm using to try and include the key and ID: https://mailifyapis.com/v1/reports/TZi4oEiSRDCqciu-vGV98A&accountId=5c7650c911ce626a6371c1b5&apiKey=8RdZ1SkxTeWGlk2T049KOw (It's still giving me a pop-up)
This is the Mailify documentation page: http://developers.sarbacane.com/#statistiques (have to translate with Google, they have no translation of their own)
I've tried understanding how curl works but I have to install some stuff and I thought I could get around the problem without it.
Here's what I have tried (I've just been probing the syntax, mostly):
<script>
<p id="demo"></p>
var text = 'https://mailifyapis.com/v1/reports/TZi4oEiSRDCqciu-vGV98A&accountId=%225c7650c911ce626a6371c1b5%22&apiKey=%22w_S31uj2RIGHVENnRbD4xw%22';
var obj = JSON.parse(text);
obj.opens = eval("(" + obj.clicks + ")");
document.getElementById("demo").innerHTML = obj.opens + ", " + obj.clicks();
</script>
I realize it doesn't work like this but that was my last attempt. I can't figure out what I should be doing.

Searching data using Youtube API

Extremely new at this, but wanted to try to build something. Decided on a simple landing page that would assist in pulling Youtube videos. Got my API key and got to building. Ran into a few issues. Found out that it can't call from a local HTML file, so worked out another way to test, but now I have another issue.
I have the following code set to run when a button is pressed, submitting the text in form as the variable topic.
function search() {
var hdi = "how do i ";
var request = gapi.client.youtube.search.list({
part: 'id',
q: hdi + topic,
});
request.execute(onSearchResponse);
};
function onSearchResponse(response){
var responseString = JSON.stringify(response, " ", 2);
console.log(responseString);
}
But I cannot seem to get the response I'm looking for. The JSON data I get seems to correspond to medley of search engines (Yahoo, duck duck go, ect) instead, not the JSON data for the YouTube search.
Here is a CodePen, if that assists more. I have some code commented out that I'm waiting to work on until I get this part implemented. Thanks for any help you can give me!
https://codepen.io/billsobill/pen/OvxNON

How to get JSON from PHP to JS?

I have really been searching for almost 2 hours and have yet to find a good example on how to pass JSON data from PHP to JS. I have a JSON encoding script in PHP that echoes out a JSON script that looks more or less like this (pseudocode).
{
"1": [
{"id":"2","type":"1","description":"Foo","options:[
{"opt_id":"1","opt_desc":"Bar"},
{"opt_id":"2","opt_desc":"Lorem"}],
{"id":"3","type":"3","description":"Ipsum","options:[
...
"6":
{"id":"14","type":"1","description":"Test","options:[
...
etc
Problem is, how can I get this data with JavaScript? My goal is to make a .js script that generates a poll based on these JSON datas, but I honest to god can't find any examples on how to do this. Guessing it is some something like:
Obj jsonData = new Object();
jsonData = $.getJson('url',data,function()){
enter code here
}
Any links to any good examples or similar would be highly appreciated. And I thought that encoding the data in PHP was the tricky part...
EDIT:
I got this code snippet to work, so I can review my whole JSON data in JS. But now I can't seem to figure out how to get to the inner data. It does print out the stage number (1-6) but I can't figure out how to get the question data, and then again the options data within each question. Do I have to experiment with nested each loops?
$(document).ready(function()
{
$('#show-results').click(function()
{
$.post('JSAAN.php', function(data)
{
var pushedData = jQuery.parseJSON(data);
$.each(pushedData, function(i, serverData)
{
alert(i);
})
})
})
});
The idea here is to get into the question information in the middle level and print out the qusetion description, then based on the question type - loop through the options (if any) to create checkbox/radiobutton-groups before going on to the next question. The first number represents which stage of the multi stage poll I am currently working on. My plan is to divide it into 6 stages by hiding/showing various divs until the last page where the form is submitted through Ajax.
Not sure but I think, you can use
$.getJSON('url', data, function(jsonData) {
// operate on return data (jsonData)
});
now you can access and operate on the PHP json data,
if you're going to use it outside the getJson call you can assign it to a variable
var neededData;
$.getJSON('url', data, function(jsonData) {
neededData = jsonData;
});
Try the jQuery documentation: http://api.jquery.com/jQuery.getJSON/
This example should get you started:
$.getJSON('ajax/test.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('body');
});
This example is based on the JSON structure being;
{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
Do not use echo in PHP. It will print string not JSON.
Use json_encode to pass JSON to javascript.
Use can use each to get the values in JSON at javascript end.
Example
http://www.darian-brown.com/pass-a-php-array-to-javascript-as-json-using-ajax-and-json_encode/
If you are using JQuery there is a really simple solution to your approach as you can see here: http://api.jquery.com/jQuery.getJSON/.
Otherwise I just want you to explain that there is no way to access your JSON directly in JavaScript as you tried in your code above. The main point is, that JavaScript runs on your browser while your PHP script runs on your server. So there must definitely be a communication between them. So you have to request the data from the server over http I would suggest.
HTH

How do I use DownloadUrl with AJAX and Google App Engine?

The snippet of JavaScript that I am having trouble with looks like this:
var content_value = encodeURI(document.getElementById("chattext").value)
downloadUrl("/getchats", "POST", "content=" + content_value, onChatsReturned);
This code works, but it only posts the content. How would I have to change this in order to post another item, such as a description? I have all the other code ready and working, I just don't know how the parameters work for downloadUrl.
It's quite hard to say anything for certain since I can't know what downloadUrl() function actually does, but here is a solution that at might solve your problem (if it just passes the 3rd argument to the backend).
downloadUrl("/getchats", "POST", "content=" + content_value + "&description=" + desciption_value, onChatsReturned);
As the comments mention more information on the downloadUrl-function is needed to say for sure.

Categories