We Keep Coding

how to select attributes to show (name, height,weight ) swapi.co

shows all the attributes, I need only name weight growth, eye color, skin color and gender
url = "https://swapi.co/api/people";
function heroes () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
console.log(data); // see object
}
document.getElementById('demo').innerHTML = xhr.responseText; // write info
};
xhr.open("get", url, true);
xhr.send();
}

You're started by showing the request and parsing into a JSON object. That's a good start!
Now, you need to iterate each result (you can use a for loop) and render the property.
I've built an example, here's the code:
Html:
<div id="output">
</div>
Javascript:
var url = "https://swapi.co/api/people";
function heroes() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
var tableContent = '<table>'
tableContent += "<thead><tr>";
tableContent += "<td>Name</td>";
tableContent += "<td>Height</td>";
tableContent += "<td>Mass</td>";
tableContent += "<td>Eye Color</td>";
tableContent += "<td>Skin Color</td>";
tableContent += "<td>Gender</td>";
tableContent += "</tr></thead>";
for(var i=0;i<data.results.length;i++) {
var person = data.results[i];
tableContent += "<tr>";
tableContent += "<td>" + person.name + "</td>";
tableContent += "<td>" + person.height + "</td>";
tableContent += "<td>" + person.mass + "</td>";
tableContent += "<td>" + person.eye_color + "</td>";
tableContent += "<td>" + person.skin_color + "</td>";
tableContent += "<td>" + person.gender + "</td>";
tableContent += "</tr>";
}
tableContent += "</table>"
document.getElementById('output').innerHTML = tableContent; // write table
}
// document.getElementById('demo').innerHTML = xhr.responseText; // write info
};
xhr.open("get", url, true);
xhr.send();
}
heroes();
Here's a pen, if you want to see it live.

Display JSON data in tablular format of predefined format

I am working on a small project's interface. Basically, an API sends the following JSON data:
{
"wallet_transactions": [
{
"total_cost": "80.000",
"expense_type__name": "Gas",
"total_quantity": "5.000",
"trans_type": "Purchased"
},
{
"total_cost": "250.000",
"expense_type__name": "Gas",
"total_quantity": "35.000",
"trans_type": "Rent"
}
]}
The data basically shows how much of GAS was given, its cost and its means (on credit or it was bought).
I tried to build a table out of it directly, but it was dimmed unfriendly since GAS was written twice.
What I tried was:
$.each(response.wallet_transactions, function(index) {
var exp_name=response.wallet_transactions[index].expense_type__name;
var quantity=response.wallet_transactions[index].total_quantity;
var price=response.wallet_transactions[index].total_cost;
var trans_type=response.wallet_transactions[index].trans_type;
rows=rows+'<tr><td>' + exp_name + '</td>';
rows=rows + '<td>' + price + '</td>';
rows=rows + '<td>' + quantity + '</td>';
rows=rows + '</tr>';
});
The output that is needed now looks like the image below:

Group the data for each name together in another object, then build the table from that.
var table_data = {};
$.each(response.wallet_transactions, function(i, trans) {
var exp_name = trans.expense_type__name;
var quantity = trans.total_quantity;
var price = trans.total_cost;
var trans_type = trans.trans_type;
if (!table_data[exp_name]) {
table_data[exp_name] = {}
}
table_data[exp_name][trans_type] = {
quantity: quantity,
cost: price
};
}
$.each(table_data, function(name, data) {
rows += "<tr><td>" + name + "</td>";
rows += "<td>" + data.Rent.cost + "</td>";
rows += "<td>" + data.Rent.quantity + "</td>";
rows += "<td>" + data.Purchased.cost + "</td>";
rows += "<td>" + data.Purchased.quantity + "</td>";
rows += "</tr>";
}
Notice that $.each passes the array element as the second argument to the callback function, so you don't have to repeat response.wallet_transactions[index] on every line.

Get key/values from JSON array of objects without knowing the key name

I'm trying to build a HTML table with data from a JSON structured array such as:
var myjson = [
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter","lastName": "Jones"}
];
I know I can use:
var tbl = "<table>"
$.each(myjson, function(x, y) {
tbl += "<tr>";
tbl += "<td>firstName</td>";
tbl += "<td>lastName</td>";
tbl += "</tr>";
tbl += "<tr>";
tbl += "<td>" + y.firstName + "</td>";
tbl += "<td>" + y.lastName + "</td>";
tbl += "</tr>";
});
tbl += "</table>";
but how can I get the same result if I don't know what the column names (firstName, lastName) are called? How can I iterate through the key/values of each object in the JSON structured array?
In each array, the number of elements in each object will be the same

Use Object.keys to get the keys of the object.
Object.keys() method returns an array of strings that represent all the enumerable properties of the given object.
Use index of array to decide header of table
var myjson = [{
"firstName": "John",
"lastName": "Doe"
}, {
"firstName": "Anna",
"lastName": "Smith"
}, {
"firstName": "Peter",
"lastName": "Jones"
}];
var tbl = "<table>";
$.each(myjson, function(x, y) {
var keys = Object.keys(y);
if (!x) {
tbl += "<tr>";
keys.forEach(function(key) {
tbl += "<th>" + key + "</th>";
});
tbl += "</tr>";
}
tbl += "<tr>";
keys.forEach(function(key) {
tbl += "<td>" + y[key] + "</td>";
});
tbl += "</tr>";
});
tbl += "</table>";
$('body').append(tbl);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Use for...in loop.
for(let key in myjson[0]) console.log(key + ' == ' + myjson[0][key]);
Here is how you code should looks like (see also JSFiddle):
var myjson = [{
"firstName": "John",
"lastName": "Doe"
}, {
"firstName": "Anna",
"lastName": "Smith"
}, {
"firstName": "Peter",
"lastName": "Jones"
}];
var keys = [];
for(let key in myjson[0]) keys.push(key);
var tbl = "<table>"
$.each(myjson, function() {
tbl += "<tr>";
for(let index in keys) tbl += '<td>' + keys[index] + '</td>';
tbl += "</tr>";
tbl += "<tr>";
for(let index in keys) tbl += '<td>' + arguments[1][keys[index]] + '</td>';
tbl += "</tr>";
});
tbl += "</table>";
document.body.innerHTML = tbl;

You can simply do this
var tbl = "<table>"
$.each(myjson, function(x, y) {
keys = Object.keys(y);
tbl += "<tr>";
$.each(keys, function(i,key){
tbl += "<td>" + key + "</td>";
})
tbl += "</tr><tr>";
$.each(keys, function(i,key){
tbl += "<td>" + y[key] + "</td>";
})
tbl += "</tr>";
});
tbl += "</table>";
You can further bring down to one loop if you want.

You can try this..
JSFiddle
tbl += "<tr>";
for(var i=0;i<Object.keys(myjson[0]).length; i++)
{
tbl += "<td>"+Object.keys(myjson[0])[i]+"</td>";
}
tbl += "</tr>";

JSON objects and HTML tables

First time poster here and new to JavaScript...
Below is my JSON object...
[
{
"Name":"Ted",
"EmailAddress":"ted#ted.edu",
"Title":"Director",
"Expertise":"Statistics",
"PhoneNumber":"444-444-4444"
},
{
"Name":"Ann",
"EmailAddress":"ann#ann.edu",
"Title":"Director",
"Expertise":"Physics",
"PhoneNumber":"444-444-5555"
}
]
What I need is to be able to loop through this to add each table row for each employee. There are five values: Name, EmailAddress, Title, Expertise, PhoneNumber
This is what I have so far...
$(function () {
var Employees= [{"Name":"Ted","EmailAddress":"ted#ted.edu","Title":"Director","Expertise":"Statistics","PhoneNumber":"444-444-4444"}, {"Name":"Ann","EmailAddress":"ann#ann.edu","Title":"Director","Expertise":"Physics","PhoneNumber":"444-444-5555"}];
$("#pager").append("<table id='employeelist' class='table'><table>");
//for loop goes here//
Any help would be appreciated!
EDIT: Also, how would I make the e-mail addresses 'clickable'/'mail to' the address?

A simple loop will do, you should also build the entire HTML string, then append:
var table = "<table id='employeelist' class='table'>";
for (var i = 0; i < Employees.length; i++) {
//Create the table row
table += "<tr>";
//Create table cells
table += "<td>" + Employees[i].Name + "</td>";
table += "<td>" + Employees[i].EmailAddress + "</td>";
table += "<td>" + Employees[i].Title + "</td>";
table += "<td>" + Employees[i].Expertise + "</td>";
table += "<td>" + Employees[i].PhoneNumber + "</td>";
//Close table row
table += "</tr>";
}
table += "</table>";
$("#pager").append(table);

Since JSON objects are just normal Javascript objects, you can treat them as such.
For example, in order to loop over them you could just do normal Javascript loop:
for(var i = 0; i < Employees.length; i++) {
var employee = Employees[i];
}
and then, in order to access information from an employee, you can just do employee.Name to access it's name, employee.Title for the title etc.
Using the information in employee.Name and the others, you can simply build your strings using that information:
str += '<td>' + employee.Name + ...
and then finally append it with $("#pager").append(str);.

'Welcome to Stackoverflow and javascript :)'
It is actually a javascript object ( not JSON object ).
$(function() {
var Employees = [{
"Name": "Ted",
"EmailAddress": "ted#ted.edu",
"Title": "Director",
"Expertise": "Statistics",
"PhoneNumber": "444-444-4444"
}, {
"Name": "Ann",
"EmailAddress": "ann#ann.edu",
"Title": "Director",
"Expertise": "Physics",
"PhoneNumber": "444-444-5555"
}];
var table = '<table id="employeelist" class="table">';
for (var i = 0, j = Employees.length; i < j; i++) {
table += '<tr>';
table += '<td>' + Employees[i].Name + '</td>';
table += '<td>' + Employees[i].EmailAddress + '</td>';
table += '<td>' + Employees[i].Title + '</td>';
table += '<td>' + Employees[i].Expertise + '</td>';
table += '<td>' + Employees[i].PhoneNumber + '</td>';
table += '</tr>';
}
table += '</table>';
$("#pager").append(table);
});

You are using jQuery. Then it should be something like this:
var table=$("<table>",{
id:"employeelist"
}).addClass("table");
table.appendTo($("#pager"));
$("#pager").append(table);
$.each(Employees, function(index, employee){
var row=$("<tr>",{});
$("<td>",{
html:employee.name
}).appendTo(row);
$("<td>",{
html:employee.EmailAddress
}).appendTo(row);
$("<td>",{
html:employee.Title
}).appendTo(row);
$("<td>",{
html:employee.Expertise
}).appendTo(row);
$("<td>",{
html:employee.PhoneNumber
}).appendTo(row);
row.appendTo(table);
});

Working with JSON input

I'm trying to get a JSON input with AJAX and load it in a select control.
but when I run it :\ It stuck on "Downloading the recipes....".
anyone see the problem maybe? (I tried couple of changes but nothing work so far)
1 more issue can anyone think on a shorter way to do the
ConvertToTable(targetNode)
cuse it's way to long and complex, I think :\
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp;
document.getElementById("span").style.visibility = "visible";
document.getElementById("span1").style.visibility = "hidden";
document.getElementById("button").style.visibility = "hidden";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
result = xmlhttp.responseText;
result = eval('(' + result + ')');
txt = "<select onchange='ShowRecipeDetails(this)'>";
for (i = 0; i < result.length; i++) {
txt = txt + "<option VALUE=" + result[i].recipe + ">" + result[i].recipe + "</option>";
}
txt = txt + "</select >";
document.getElementById("span").style.visibility = "hidden";
document.getElementById("span1").style.visibility = "visible";
document.getElementById("myDiv").innerHTML = txt;
}
}
xmlhttp.open("POST", "http://food.cs50.net/api/1.3/menus?meal=BREAKFAST&sdt=2011-03-21&output=json", true);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xmlhttp.send();
}
function ShowRecipeDetails(event) {
// get the index of the selected option
var idx = event.selectedIndex;
// get the value of the selected option
var field = event.options[idx].value;
$.ajax({
type: "GET",
url: "http://food.cs50.net/api/1.3/recipes?&output=json&id=" + field,
success: function (data) {
$("#TableDiv").html(ConvertToTable(data[0]));
}
});
}
function ConvertToTable(targetNode) {
var table = "<table border = 1 borderColor =green>";
table += "<tr>";
table += "<td>" + "ID" + "</td>";
table += "<td>" + targetNode.id + "</td>";
table += "</tr>";
table += "<td>" + "Ingredients:" + "</td>";
table += "<td>" + targetNode.ingredients + "</td>";
table += "</tr>";
table += "<td>" + "Name:" + "</td>";
table += "<td>" + targetNode.name + "</td>";
table += "</tr>";
table += "<td>" + "Size:" + "</td>";
table += "<td>" + targetNode.size + "</td>";
table += "</tr>";
table += "<td>" + "Unit" + "</td>";
table += "<td>" + targetNode.unit + "</td>";
table += "</tr>";
table += "<td>" + "VEGETARIAN:" + "</td>";
table += "<td>" + targetNode.VEGETARIAN + "</td>";
table += "</tr>";
table += "</tr>";
table += "</table>"
return table;
}
</script>
and the HTML:
<button id="button" type="button" onclick="loadXMLDoc()" >Get all recipes</button>
<br />
<span id="span" style="visibility:hidden">Downloading the recipes....</span>
<span id="span1" style="visibility:hidden">Please choose a recipe ID to view</span>
<div id="jsonDiv"></div>
<div id="myDiv"></div>
<div id="TableDiv"></div>

The HarvardFood API also supplies a JSONP version. So if you change your URL to this:
http://food.cs50.net/api/1.3/menus?meal=BREAKFAST&sdt=2011-03-21&output=jsonp&callback=parseResponse
you can create a parseResponse function to handle the data that comes back, and you can do the AJAX by inserting a script tag.
The problem is that you're running afoul the Same Origin Policy.
I see that you've updated the question to use jQuery AJAX. That offers a jsonp data type, which might be easier than adding a script tag.