Hi Guys, I need to create a JSON Feed listing my previous jobs in a list. Does anyone know how to do that?
I don’t really know where to start as I’m quite new to Jquery or Javascript.
Hey,
You can do this on the server, for example using PHP.
What are you wanting to use this feed for?
Hi Pullo, good to hear from you.
I need to build a CV as a one page html. I can handle the html but I was requested to make a
That won’t be hard to sort out.
How do you need the JSON (i.e. how should it be structured)?
It should be in chronological order from most recent to oldest and be like
JOB 1 NAME
TITLE
KEY RESPONSIBILITIES (bullet points)
KEY ACHIEVEMENTS (bullet points)
CONTACTS a few lines for name and number
JOB 2 NAME
etc…
Hi,
It seems you have a very limited amount of data (relatively speaking) that you want to return as json. Therefore, the easiest way would be to hardcode it into a PHP script, then us json_encode to serve it up (saying that, I am not really a PHP guy, so if anyone knows a better way, please speak up).
feed.php
<?php
$arr = array(
"job1" => array(
name => "Refuse collector",
title => "Bin man",
responsibilities => array("Emptying bins", "Sweeping up", "Skiving"),
contact => array("name" => "Ken", "number" => "12345")
),
"job2" => array(
name => "Flower seller",
title => "Florist",
responsibilities => array("Arranging flowers", "Chasing pigeons"),
contact => array("name" => "Barbara", "number" => "12345")
)
);
echo(json_encode($arr));
And on the client you could do the following:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Feed demo</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$.getJSON( "feed.php", function(jobs) {
console.log(jobs);
for (var job in jobs) {
if (jobs.hasOwnProperty(job)) {
// process JSON here
}
}
});
</script>
</body>
</html>
If you look at the result of the console.log statement you will see:
Does that help?
Where you write // process JSON here
do I need to put something there? Every bit helps 
can you check this page and see why the content is below the footer please?
Maybe because you have an unclosed (well, improperly closed) comment?
<!-- hiding for json
<section class="container">
<div class="col-sm-10 col-sm-offset-1">
<div class="short-text">
<h4>Other Skills and Hobbies</h4>
</div>
</div>
</section><!-- end container -->
Hey.
JSON is a simple format for data. It looks like javascript.
var data = {
jobs: [
{ role: 'apple-corer', company: 'cores r us' },
{ role: 'pastamancer', company: 'the eater\'s digest' }
]
};
It is the bread and butter of most APIs and One Page Applications.
You can generate it from the server using any language. I would recommend using node.js to do this. Front-end Developers often simply paste an object like the above example into the javascript code, and work from there. Later on they can replace it with the server call they need, (such as $.getJSON from pollo)
Here is what I would do.
- node.js - I would use express
- node.js - serve your web-files - for example https://github.com/h5bp/html5-boilerplate
- node.js - create your json api. In express server.get() would do the trick
- javascript - Set up your website to fetch data from the server upon loading (ajax)
- javascript - render it (you could try handlebars)
Notes:
- python, php, they can all be fine
- just grab the html files you want, not the whole repo
- return your jobs!
- onload - call to your json api and fetch the data
Those are just some rough thoughts, that possibly only make sense in my head.
Personally, I would do this, however.
Use Reactjs for my front-end
Play around with deployd for my back-end
You need to iterate over the JSON and do something with it.
A quick example of what I mean:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Feed demo</title>
</head>
<body>
<div id="result"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
isArray = function(a) {
return (!!a) && (a.constructor === Array);
};
isObject = function(a) {
return (!!a) && (a.constructor === Object);
};
function parseJob(job, $list){
$.each(job, function(key, val) {
if (isArray(val)){
$("<li><strong>" + key + "</strong>: " + val.join(", ") + "</li>").appendTo($list);
} else if (isObject(val)){
var $li = $("<li><strong>" + key + "</strong>:</li>" );
var $subList = $("<ul/>");
$.each(val, function(k, v) {
$("<li><strong>" + k + "</strong>: " + v + "</li>").appendTo($subList);
});
$subList.appendTo($li);
$li.appendTo($list);
} else {
$("<li><strong>" + key + "</strong>: " + val + "</li>").appendTo($list);
}
});
$list.appendTo("#result")
}
$.getJSON( "feed.php", function(data) {
$.each(data, function(title, job) {
var $list = $( "<ul/>", {html: "<li><h2>" + title +"</h2></li>"});
parseJob(job, $list)
});
});
</script>
</body>
</html>
Not very elegant code, admittedly, but given the JSON from my original example, this’ll produce:
job1
- name: Refuse collector
- title: Bin man
- responsibilities: Emptying bins, Sweeping up, Skiving
- contact:
- name: Ken
- number: 12345
job2
- name: Flower seller
- title: Florist
- responsibilities: Arranging flowers, Chasing pigeons
- contact:
- name: Barbara
- number: 12345
Same effect, slightly refactored code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Feed demo</title>
</head>
<body>
<div id="result"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function isArray(a) {
return (!!a) && (a.constructor === Array);
};
function isObject(a) {
return (!!a) && (a.constructor === Object);
};
function createHeading(text){
return $("<h1/>", {text: text});
}
function createListElement(pat1, part2){
return $("<li><strong>" + pat1 + "</strong>: " + part2 + "</li>");
}
function createList(obj){
var $ul = $("<ul/>");
$.each(obj, function(key, val){
if (isArray(val)){
createListElement(key, val.join(", ")).appendTo($ul);
} else if (isObject(val)){
$("<li/>", {
html: "<strong>" + key + "</strong>: "
}).append(createList(val)).appendTo($ul);
} else {
createListElement(key, val).appendTo($ul);
}
});
return $ul
}
$.getJSON( "feed.php", function(data) {
$.each(data, function(title, job) {
createHeading(title).appendTo("#result");
createList(job).appendTo("#result");
});
});
</script>
</body>
</html>
Thanks everyone, it will take time for me to study this but rest assured I will get it sooner or later 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.