get JSON object javascript - javascript

I have the Student.groovy class that hasMany Note.groovy
Student Class extend to User.groovy
I have a JavaScript function that takes as a parameter a list of notes in JSON.
The code below works.
$.each(data,function(key, value) {
alert(value.note);
alert(value.semester)
});
But if I do alert(value.student); me is returned [object, object]
and when I put alert(value.student.toSource()); It's shown ({class: "project.Student", id: 1})
If I do alert(value.student.name); It's shown undefined

You're most likely not sending back the correct JSON format to access the student's name.
As of now with the examples you have given you can only access the class and id of a given student.
value.student.class //<-- project.student
value.student.id //<-- 1
To be able to access the student's name you would have to have an object like so:
{
class: "project.Student",
id: 1,
name: "Example name"
}
If you think you are actually sending everything you need from the server just do a little $(document.body).append(data); or console.log(data); on your getJSON success callback so you can see clearly what you have.
I wouldn't be surpized if value.name works by the way. Depends on your json structure.

Related

How to get value out of Observable Array nested object

I have searched here for an answer to this question with no luck.
I have an observable array which contains only one entry:
I have it stored in self.user()
POSData.Users.getByEmail(sEmail)
.then(data => {
//console.log(data)
self.user.push(data);
})
Now I simply want to extract a few values and assign them to their own observables, BUT... I can't.
I have tried the following to get the firstName...
console.dir(self.user());
//console.log(self.user()[0].data.firstName());
//console.log(self.user().firstName());
//console.log(self.user().data.firstName());
//console.log(self.user()[0].data.firstName());
//console.log(self.user().data[1].firstName());
Does anyone know how to drill down and get to the information I want?
Thanks for looking.
John
You're storing the raw data you got back from your service into your array. You should access members of that data in that form. The firstName property is not an observable, it's just a string in the data property so you shouldn't be calling it as if it was an observable. The only observable in your example is apparently self.user.
Based on your screenshot your new data looks something like this:
{
data: {
firstName: 'John',
lastName: 'Smith'
},
message: 'User retrieved successfully',
status: null
}
If you want to get the first name of this object in your user array, you'd access it like this:
self.user()[0].data.firstName

Parse an Object in Angular Component Template file

I have an object in my address.component.ts as follows:
address : any;
This is the data that gets populated in address from back-end
{street1: "abc"
city: "some state"
country: "some country"
}
I am getting this data after calling a service.
My Template file is as follows:
<h1>{{address}}</h1>
On the browser, it is displayed as follows:
[Object object]
Instead of this I want to display entire address Object. I know I can do
<h1>{{address.street1}}</h1>
<h1>{{address.state}}</h1>
<h1>{{address.country}}</h1>
But I don't want to do it because there is a possibility that back-end might change the fields in address (like adding one more field). Is there any way I can display all the data in address object instead of just [Object object] on the browser.
Use
<h1 ng-repeat="(key, value) in address">{{value}}</h1>
ng-repeat repeats your element based on the condition in it.
For more information please see ng-repeat documentation.
You can use this function for getting all information. After it, print it in HTML:
var newAddress = Object.values(address);

Console log JSON result

I'm just starting to learn about APIs, JSON, and Jquery and I am stuck. How would I console log the following from my Jquery call -
name: "The Old Mill Cafe"
Here's my current code:
$(document).ready(function(){
$("#mainbutton").on("click", function() {
$.ajax({
url: "https://developers.zomato.com/api/v2.1/search?entity_id=Chicago%2C%20IL%20&entity_type=city",
headers: {
"X-Zomato-API-Key": "…"
},
method: "GET"
}).done(function(data) {
console.log(data);
});
});
});
Your console.log is telling you that data is an object with a property called restaurants which is an array with a single entry. That entry is an object with a property called restaurant which is an object with a property called name. So:
console.log(data.restaurants[0].restaurant.name);
In this case you are getting list of restaurants which has attributes like name and so on.
To get one restaurant you have to get first element of data
data[0] this will give you first restaurant of the list.
Now you need to get the name of the first restaurant to do that
data[0].name
So to get the name of the first restaurant you have to use following
console.log(data[0].name);

x-editable submit additional "array" to the total AJax POST data

I'm trying to add an array of object to the post data of a group of bootstrap x-editable in my jsp page.
I recover the data from a table, and build an array of object. After do that, I need to append this array to the list of the other value posted by the editables in the page.
I've an html table with id="user" and this code recover data from it and build the array of object. This is my code, that works and produces the correct object:
function recover_data() {
console.log("Starting recover");
var beneficiary_list = [];
$('.lav').each(function() {
var obj = {'company': $(this).attr('id'), 'num':$(this).text() };
beneficiary_list.push(obj)
});
console.log(beneficiary_list); //output to check array produced
return beneficiary_list;
};
this function is what I call from a save button, that launch my global submit retrieving data from all editable in the page and adding in the "params" the array returned from recover_data(), in this way:
jQuery('#data a').editable('submit',{
url:'test/prove/data_received',
params: function(params) {
params.beneficiary = recover_data();
return params;
},
success:function(resp){ ... }
})
but testing with Postman (Chrome) the produced output to POST, is without the array. Are submitted only the "editables" data, but no "beneficiary" field with array of that values adding. The missing field must be like
"beneficiary": [0: company: "1", num: "22" ..etc..]
How can I "append" to the produced POST data from a group of editables an array of objects, like that I've show?
Looking to this page is possible
Question on github x-editable page
I don't understand why don't works...I follow the example written on second post from vitalets, he wrote:
editable({
...
params: function(params) {
params.checked = ... //get array of checked values
return params;
}
});
To Explain better what I need: I've a Java Controller (servlet) that receive a modelView object (POJO) with several fields (that came from other editables in the page) and a field "ArrayList beneficiary" where Beneficiary is a small object of two fields "company" and "num"
public Class Beneficiary{
private String company;
private String num;
//then get e set methods..
}
instead, my POJO is like:
import java.util.ArrayList;
import Beneficiary;
public class Module {
private Integer id;
private String titolo;
private String companyRating;
private ArrayList<Beneficiary> beneficiary;
//get e set methods
In the console I obtain the correct object for that voice
but not in the post object that is like
instead I need that the produced output "beneficiaries" field to POST url is something similar to this example (found on internet)
How can I obtain a list of that object from my JSP page when submit?
Someone can help me?
params is an option for editable object, while you are using it as options for ajax call.
Your code should look like:
$('#data a').editable({
url: "/post"
});
and then the submit() (note selector for all of your editable objects):
$('.editable').editable('submit', {
data: {beneficiary: recover_data()},
success:function(resp){ ... }
});
Working fiddle. Check your console to see logs

JavaScript JSON Parse Issue ($.getJSON)

I can't seem to get the following code to output anything to the screen. JavaScript is not my strong suit!
This is the JavaScript code calling a local file that outputs a list of rooms
$.getJSON('roomupdate.php?level=1&div=1&callback=json',function(res){
console.log(res.rooms.name[0]);
});
In the above I'm merely trying to see the name of the first room in the console. And this is the JSON output (Which I can confirm the script can see and load)
json(
{
"rooms":
[
{ "name" : "Bedroom" },
{ "name" : "Living Room" },
{ "name" : "Lounge" },
{ "name" : "Kitchen" }
]
})
Could anyone suggest what I am doing wrong? Even to view in the console?
Lastly, can you loop through the array?
Your JSON data contains an object rooms and this object actually contains an array [], So to access the data inside your array you need to put the index on rooms :
console.log(res.rooms[0].name);
Use callback=? rather than callback=json so that jQuery knows you are using JSONp and can choose it's own name for the callback function.
$.getJSON('roomupdate.php?level=1&div=1&callback=?',function(res){
//alert('Your name is '+res.rooms);
console.log(res.rooms.name[0]);
});
See http://api.jquery.com/jQuery.getJSON/#jsonp for details.
Edit:
Looking again, you will need to change the way you are accessing the data around. res.rooms.name[0] should be res.rooms[0].name because rooms is a list, and each room has a name property.
This will loop through the array of rooms and log the name of each one:
$.each( res.rooms, function( i, room ) {
console.log( room.name );
});
If that doesn't work, then add this statement at the beginning of your callback (where you have the console.log() call now):
debugger;
Load/run your page with the developer tools open, and it will stop in the debugger where you have that statement. Now you can look at all your variables in detail, try out expressions to see what they do, single step through your code, etc.

Categories

Resources