Problem accessing the json data - javascript

I am using jquery 1.5. I am using getJSON method to get the json output..
$.getJSON('/products/list/', function(data) { ..... });
The json is structured like..
{"books":["title_of_books1","title_of_books2","title_of_books3"],
"discs":["title_of_discs1","title_of_discs2"],
etc....,
}
Is there a way to convert this into an array using jquery. So I can access it like books[0]
I appreciate any help.
Thanks.

Assuming your JSON syntax is correct, the data would be automatically converted to a native object by jQuery, so inside function (data) { ..... }, you would refer to data.books[0]:
$.getJSON('/products/list/', function(data) {
alert(data.books[0]);
});

use the parseJSON api of jquery.. http://api.jquery.com/jQuery.parseJSON/

Related

Using $.get("url",data) again in jQuery?

I'm attempting to use the $.get() function to get data from a page, and then parse the data through jQuery, such as getting all the images, and then putting it into the body of the user's page.
$.get("/character/hats").done(function(data) {
//$("body").prepend(data);
/*data?*/$(".card > .card-body .col-md-4").each(function(){
let hatdata=$(data).find('pull-left').html;
let hatid=0;
$("body").prepend('<p>found!</p><div>'+hatdata+'</div>');
let assetcode=0;
console.log("I see hat id" + "");
});*/
});
Is there a way to use jQuery data response from $.get, and parse it using jQuery again?
To access the data sent back from $.get you merely need to reference it. You shouldn't convert it back to a jQuery object with $().
Here's an example which gets a JSON response.
$.get('https://httpbin.org/get').done(function(data) {
console.log(data); // data is a variable which contains a parsed JSON response to a javascript object.
console.log(data.url);
});
You can view what the response looks like here: https://httpbin.org/get
If the response of your server isnt JSON you will need to do something else.
If the response is HTML you can do it like this:
$.get('https://httpbin.org').done(function(data) {
console.log(data); // data is now a string of html, which you can insert other places
$('.some-div').html(data);
});
$(...) can be used when you want to 'query' the page's DOM with jQuery. You can query a DOM element with regular Javascript, but it won't include lots of helpful methods like .find() or .html(). So basically you convert an element into a jquery element, which is like javascript on steroids, and adds more methods.
The response from $.get however will either be an object (if its JSON) or a string of html (if HTML). You can convert the string of HTML to jQuery, and parse that as well if that's what you want.
$(data).find('.some-element-in-response')
html() is function not a property name
Change:
let hatdata=$(data).find('pull-left').html;
To:
let hatdata=$(data).find('pull-left').html();
Yes you can I did it but in different way. You need change some way and change few ajax setting like following:
$.ajax({
url: "/character/hats",
type: "GET",
dataType: "html",
success: function (data) {
$(".card > .card-body .col-md-4").each(function(){
let hatdata=$(data).find('pull-left').html;
let hatid=0;
$("body").prepend('<p>found!</p><div>'+hatdata+'</div>');
let assetcode=0;
console.log("I see hat id" + "");
}
});

Parse json from php in js

I have array in my php file:
$invoices_arr = [];
foreach ($invoices as $key=>$invoice){
$invoices_arr[$key]['id']=$invoice->get_id();
$invoices_arr[$key]['code_text']=$invoice->get_code_text();
$invoices_arr[$key]['invoice_name']=$invoice->get_invoice_name();
$invoices_arr[$key]['status_invoice']=$invoice->get_status_invoice();
$invoices_arr[$key]['attachments']=$invoice->get_attachments();
}
echo json_encode(['invoices'=>$invoices_arr]);
My ajax call:
$.ajax({
data:{lead_id:$("#lead_id").val()},
url: sJSUrlGetAllLeadInvoices,
success: function (data) {
var obj = jQuery.parseJSON(data);
$("#all_invoice_table tbody").empty();
$(obj.invoices).each(function(key,value){
$('#all_invoice_table').append('<tr><td>'+value.invoice_name+'</td><td class="invoice_status">'+value.status_invoice+'<td>attt</td><td><button id="'+value.id+'" class="edit_invoice_'+value.id+'">Edit invoice</button</td><td><button class="send_invoice_btn_'+value.id+'">Send invoice</button></td><td><img class="delete_invoice_'+value.id+'" src="/images/icons/delete.gif"></td><td class="invoice_hidden_column_'+value.id+'">'+value.code_text+'</td></tr>');
});
}
});
In field value.attachments there is php serialize array, for example, string "a:1:{i:0;s:36:"../../pdf_invoices/2017-10-10015.pdf";}" .
How can I convert this string to array in js?
I try do it:
var mas=JSON.parse(value.attachments);
But I get error SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
How can I solve it? Thanks for any help.
Maybe you should unserialize inside PHP code before encode in json
You don't need to parse the result with jQuery.parseJSON because jQuery do it for. If you inspect data using console.log() you will see that is a Javascript object ready for to use.
You need to pass datatype as json.
you can use jQuery parse method for parsing json response.
datatype:json

In Javascript or Jquery How to pass external json file as argument to a function?

Am new to jquery.I need to know how to pass external json file as a argument to a function.
I know how to pass as a object in client side like below.
var json = { "key": "value" }
Basically i need to call this below function by passing the json data.
function draw(json) {
// Code here
console.log(json);
}
In client side json means i know to how to pass.
draw(json);
But my json file is come from server(External Json File)
I tried jquery.getJson() method also.But not getting exact solution.I don't know what i did mistake also.
My $.getJson code
draw("$.getJSON("http://localhost/cb/json/Json_30647.json",function(data) {
return data;
}));
Please help me to solve this issue.Thanks in advance.
You can not return from an asynchronous method. You are trying to eat the pizza before it it delivered to your house.
Call the function when the call is complete:
$.getJSON("http://localhost/cb/json/Json_30647.json",function(data) {
draw(data);
});

getting json data from localhost to use in D3

I'm creating a D3 bubble chart, using json data. I'm using sinatra for my app, and my json data is available at localhost:4567/data.json
I tried using
var myData = [];
$.get('data.json', function(data) {
myData = data;
console.log(myData);
.......
and I get the correct values in the javascript console, but the bubble chart does not render. (The rest of the code works if I copy and paste the data from 'data.json' and set it to a var, but it does not work if I use the $get method).
Do you have any ideas on how I could access this json data from localhost:4567?
Much appreciated,
Tim
I think what is probably going on is that jquery isn't automatically parsing the data as a JSON object due to missing MIME headers in the response from your server. Try using getJSON instead.
you can simply use
d3.json('data.json', function(data) {
myData = data;
console.log(myData);
.......
to read the json file

Is there a standard way to serialize JSON using JavaScript and JQuery?

I've been looking through Stackoverflow for answers and there seems to be more than one way of serializing (converting the JSON response back into HTML and/or other code so we may do something useful with it).
The way I am using is this..
$.getJSON(
"https://www.googleapis.com/shopping/search/v1/public/products?callback=?",
{
key: "unique key code",
country: "US",
q: "iphone",
alt: "json"
},
function(data)
{
$.each(data.items, function(i, item)
{
//Do something with each object
}
}
So I'm using the $.getJSON method to retrieve the JSON response then looping through each object and doing something.
Is this way fine? Should I be using another function to retrieve the JSON response?
Regards,
LS
if you set dataType to json jquery parses json for you
$.ajax({
dataType:"json",
...
success:function(data){
$.each(data.items, function(i, item)
{
//Do something with each object
}
}
});
No, you are doing it perfectly fine. jQuery handles the conversion of "string" to json data and back.
There are native implementations of converting to and from JSON within browsers, however it is important to note that older browsers do not support this out of the box. You should include the json2.js library to ensure JSON support.
var dataJson={"something":"special"};
var jsonString=JSON.stringify(dataJson);
var dataJsonAgain=JSON.parse(jsonString);
jQuery has an additional hack in how it parses JSON if there is no native implementation, without using eval, since eval is evil! It looks somewhat like this;
(new Function("return "+dataJson))()
simplest way would be to stick to jQuery and its parseJSON function that does the polyfill for you.

Categories