Access nested JSON in json2html - javascript

I'm using json2html to create a report for a given JSON file. I was wondering what exactly the syntax is to access nested objects and their fields. For example,
var jsonData = {
"field1": "value1",
"field2": "value2",
"nestedObject": {
"nestedField1": "nestedValue1",
"nestedField2": "nestedValue2"
}
}
What's the syntax to access "nestedField1"? The transform that I'm using is,
var transform = [
{tag : "h1", html : "${field1}"},
{tag : "article", html : "${field2}"},
{tag : "article", html : "${nestedObject}" }
]
The last statement html : "${nestedObject}" returns [Object object] as expected. But, I can't seem to access its fields.

"${nestedObject.nestedField1}"
This should do the trick.
Just like how you'd access it in JS:
jsonData.nestedObject.nestedField1

I should have tried everything that seemed intuitive.
The simple way is,
{ tag : "article", html : "the first nested field is ${nestedObject.nestedField1}" }

Related

Socrata consumerfinance.gov complaintdatabase API JSON parsing

I want to retrieve consumerfinance.gov complaintdatabase data using the Socrata API.
This is straightforward to retrieve the data using the instructions on the site at http://www.consumerfinance.gov/complaintdatabase/technical-documentation/#api-documentation
I used the following query with '6yuf-367p' to get just 'prepaid card' product data and the '.json' tag to get it in JSON format:
http://data.consumerfinance.gov/api/views/6yuf-367p/rows.json
I used PHP to retrieve data with this query:
$url = "http://data.consumerfinance.gov/api/views/6yuf-367p/rows.json";
$json = file_get_contents($url);
$data = json_decode($json);
var_dump($data);
The results are paraphrased below. A couple of things about the results that are different than what I was expecting.
I wasn't expecting the 'Meta' section. The column names are in the Meta section not associated directly with the data in { key: value } format.
I was expecting the Data section to have { key: value } format instead of just 'values'. This is different than the format described on Socrata help page at
http://dev.socrata.com/docs/formats/json.html
I am not advanced javascript developer so I am wondering how best to proceed. Ideally I want only the 'Data' section with column names in the { key: value } format. I wanted it in that { key: value } format to use with things like Google Charts.
I am imaging I would have to save the column names in array and then loop through each data row and rewrite the data rows with column names included to get { key: value } format.
My other option would be to use the csv API format which is super clean with nice clean columns and no Meta section. But then I would have to convert the csv to JSON which seems unnecessary as the JSON is available.
CSV query is this:
http://data.consumerfinance.gov/api/views/6yuf-367p/rows.csv
So couple of questions:
Does socrata provide an API feed without the 'Meta' section? Is there a filter I can use to exclude the 'Meta' section?
If answer to #1 is no, does Socrata have ready javascript to parse the JSON to get the 'Data' section in { key: value } format similar format as described on Socrata help page?
Thanks!
{
"meta" : {
"view" : {
"id" : "6yuf-367p",
"name" : "Prepaid Card Complaints",
"averageRating" : 0,
"createdAt" : 1434039311,
etc etc
"columns" : [ {
"id" : -1,
"name" : "sid",
"dataTypeName" : "meta_data",
"fieldName" : ":sid",
"position" : 0,
"renderTypeName" : "meta_data",
"format" : {
}
}, {
etc etc
"data" : [ [ 208134, "A7A3941C-A764-44CA-ABC0-66DE814F1969", 208134, 1438091214, "924763", 1438091214, "924763", null, "2015-07-13T00:00:00", "Prepaid card", "General purpose card", "Managing, opening, or closing account", null, null, null, "Amex", "WA", "982XX", "Web", "2015-07-19T00:00:00", "Closed with monetary relief", "Yes", null, "1464043" ]
......
]
}
It looks like you grabbed the wrong JSON URL. The one you grabbed is for the JSON export, which will dump you the entire dataset in a JSON format along with all of the metadata, and it doesn't provide a queryable API endpoint.
Instead, you should use the endpoint https://data.consumerfinance.gov/resource/jhzv-w97w.json. That'll get you the {"key" : "value"} pairs you're looking for, like this:
[ {
"zip_code" : "982XX",
"complaint_id" : "1464043",
"issue" : "Managing, opening, or closing account",
"date_received" : "2015-07-13T00:00:00",
"state" : "WA",
"product" : "Prepaid card",
"company_response" : "Closed with monetary relief",
"company" : "Amex",
"submitted_via" : "Web",
"date_sent_to_company" : "2015-07-19T00:00:00",
"sub_product" : "General purpose card",
"timely" : "Yes"
}, ... ]
You can also view API docs for that dataset at: http://dev.socrata.com/foundry/#/data.consumerfinance.gov/jhzv-w97w
Good luck, and let me know if you have more questions.

How to get data from json in order to save them in database?

I am beginner in Javascript/jQuery and I am working on an interface made with KnockoutJS, so I have several models. I would like to save all the data in the database but I don't know how to do it.
I started with :
self.save = function() {
var data = ko.toJS(self);
var test = ko.toJSON(self);
console.log(test);
}
$.ajax({
url: "myURL",
data: {'carrier': data.carrier},
type: "POST",
});
and this is the result of the console.log :
{"id":1,"carrier":"1","Settings":[{"id":1,"price":{"id":1,"DeliveryStandard":"3.00","DeliveryExpress":"6.00","Details":{"id":1,"Standard":[{"id":1,"fromPrice":0,"maxPrice":"45.000"}],"Express"[{"id":1,"fromPrice":0,"maxPrice":"66.000"}]}}}}]}
I can get the value of carrier by using data.carrier but I don't know how to get the other data like DeiveryStandard, DeliveryExpress, fromPrice, maxPrice ...
Have you got an idea?
Thanks you in advance, and sorry if my question is silly!
If you format your JSON into a more readable format, with indenting, it makes it a lot easier to understand:
(though it should be noted that it is only technically JSON while in a string format, outside of that it is just a standard javascript object)
{
"id":1,
"carrier":"1",
"Settings":[
{
"id":1,
"price": { "id":1,
"DeliveryStandard":"3.00",
"DeliveryExpress":"6.00",
"Details": { "id":1,
"Standard": [{"id":1,
"fromPrice":0,
"maxPrice":"45.000"
}],
"Express" //Missing semi-colon
[{"id":1,
"fromPrice":0,
"maxPrice":"66.000"
}]
}
}
}}//One too many closing braces
]
}
First thing to note is you have 2 syntax errors, highlighted above with comments. So fix them first! (Though I wonder if they are typos as you seem to have it working at your end)
Then we can look at the structure tree to work out where the values you want are...
DeiveryStandard and DeliveryExpress are both properties of an object assigned to price, which it a property of the first item in the Settings array. So you can access them like so:
var DeliveryStandard = data.Settings[0].price.DeliveryStandard;
var DeliveryExpress= data.Settings[0].price.DeliveryExpress;
fromPrice and maxPrice are found multiple times, in both Standard and Express items. So you need to decide what version you need. If you want Standard then you can get the first item of the Standard array like so:
var standardObject = data.Settings[0].price.Details.Standard[0];
Which you can then access the properties of like:
var fromPrice = standardObject.fromPrice;
var maxPrice = standardObject.maxPrice;
I am sure you can work out how to get the Express version of the same data!
From what you seem to have been able to work out on your own, I think your problem is not knowing how to deal with the arrays. Note that arrays are defined with square brackets [], and elements within an array should be accessed with a zero-based index, for example: array[0] for the first element, and array[1] for the second element.
This should work.
console.log(data.Settings[0].price.DeliveryStandard);
Fixed some errors in your JSON.
var j = {
"id" : 1,
"carrier" : "1",
"Settings" : [{
"id" : 1,
"price" : {
"id" : 1,
"DeliveryStandard" : "3.00",
"DeliveryExpress" : "6.00",
"Details" : {
"id" : 1,
"Standard" : [
{
"id" : 1,
"fromPrice" : 0,
"maxPrice" : "45.000"
}
],
"Express": [
{
"id" : 1,
"fromPrice" : 0,
"maxPrice" : "66.000"
}
]
}
}
}
]
};
alert(j.Settings[0].price.DeliveryStandard);
alert(j.Settings[0].price.DeliveryExpress);
alert(j.Settings[0].price.Details.Standard[0].fromPrice);
alert(j.Settings[0].price.Details.Standard[0].maxPrice);

Get Data from JSON String

I'm unable to successfully get data from the JSON string below. Using JavaScript, I'm able to alert the full string [ alert(data); ] but I'm unable to get only the first name.
Can someone please help?
var data = {
"name": [
"Enid Norgard",
"Cassie Durrett",
"Josephine Ervin"
],
"email": [
"TheWoozyGamer#gmail.com",
"TheHabitualGamer#gmail.com",
"TheUptightGamer#gmail.com"
],
"role": [
"Gamer",
"Team Leader",
"Player"
],
"emp_id": [
"50",
"408",
"520"
],
"id": [
"234",
"444",
"235"
]
}
Looks like you have a string(because when you use alert the complete text is shown, if it was a object then [Object object] would have shown), first you need to parse it using JSON.parse()
var t = JSON.parse(data)
alert(t.name[0])
Note: Old browsers like IE8 which does not have native support for JSON you have to add a library like json2 to add JSON support
use the following code
alert(data.name[0]);
//sample code
var json = '{"result":true,"count":1}',
obj = JSON.parse(json);
alert(obj.count);
For the browsers that don't you can implement it using json2.js.
Most browsers support JSON.parse(), hope this will help you for detail see link.
With data.name[0] you will get the name Enid Norgard
Similar to that use
data.name[index]
while index is the position of the name in the innerarray.
If you want only the names array use:
alert(data.name)
try this to loop through all elements
for(x in data)
{
for(y in data[x])
{
alert(data[x][y]);
}
}

Construct JSON object from array on client-side?

I have a string array like this:
['QWJvdXQ=','SG93IGl0IFdvcmtz','SG9tZQ==','Q29udHJpYnV0ZQ==','Q29udGFjdA==']
What I want to do, is turn it into something like this:
[
{
"id" : "QWJvdXQ=",
"url": "about.html"
},
{
"id" : "SG93IGl0IFdvcmtz",
"url": "how_it_works.html"
},
{
"id" : "SG9tZQ==",
"url": "index.html"
},
{
"id" : "Q29udHJpYnV0ZQ==",
"url": "contribute.html"
},
{
"id" : "Q29udGFjdA=="
"url": "contact.html"
}
]
The attributes aren't the focus -- what I'm basically trying to do is make each item in the array an object with the value as an value of an attribute, and add another (or more) key-value pairs into those objects.
Right now, I'm trying to do this on the client-side, using jQuery and JS. I also am running node.js, so if this is easier to do on the server-side I'm open to any suggestions. Any help is appreciated!
What you need
JSON.stringify
Array.prototype.map
window.atob
all together;
JSON.stringify(
['QWJvdXQ=','SG93IGl0IFdvcmtz','SG9tZQ==','Q29udHJpYnV0ZQ==','Q29udGFjdA=='].map(
function (e) {
return {
'id': e,
'url': atob(e).toLowerCase().replace(/\s/g, '_') + '.html'
}; // I converted the string to URL as I expect you wanted
}
),
0, 4);

formatting a json object

Im trying to use json to store some values from a page and then access these values/variables
later in a php file. Now the thing is that I'm new to json and javascript in general and Im
struggling for hours to find a solution to a problem that might be stupidly simple for you
guys who have experience in this:
Now I have this:
var invoice_data = {
"client":[
{
"client-name" : "",
"client-address" : "",
"client-address-2" : "",
"client-city-state" : "",
"client-country" : ""
}
],
"shoppingcart":[
{
"1" : {"item-name":"", "qty":"", "price":"", "discount":"", "subtotal":""}
}
],
};
So is this inheritance thing im not really getting. So just as I've created "client" object
im creating "shoppingcart", now the thing is that when user orders more than an item there should be created another sub-object that would store it's details too.So im assuming like:
"shoppingcart":[
{
"1" : { "item-name":"", "price":"", "discount":"" }
"2" : { "item-name":"", "price":"", "discount":"" }
}
],
So when I console.log(invoice_data.shoppingcart); I get the "shoppingcart" object, but I
cant access invoice_data.shoppingcart.1 or invoice_data.shoppingcart.2, is there any way I can access 1 or 2 sub-object just as access invoice_data.shoppingcart or invoice_data.client?
Thank you.
Edit: I can access it as an array, im not interested in that option. Ideally i'd like to access the sub-object via it's name.
Remove the array syntax:
Change this:
"client":[
{
"client-name" : "",
"client-address" : "",
"client-address-2" : "",
"client-city-state" : "",
"client-country" : ""
}
]
to this:
"client": {
"client-name" : "",
"client-address" : "",
"client-address-2" : "",
"client-city-state" : "",
"client-country" : ""
}
The same goes for shopping cart.
You can't access invoice_data.shoppingcart.1 because 1 is not a valid Javascript variable name. If the key for an object isn't a valid variable name, you have to use array notation: invoice_data.shoppingcart[1].
EDIT: I didn't see it, but as Matt pointed out, you must remove the array syntax as well.
Your shopping_cart is an array.
You don't want:
shopping_cart : {
1 : { name : "...", price : "..." },
2 : { ... }
}
You want:
shopping_cart : [
{ name : "..." },
{ ... }
]
Then you would access that by saying:
shopping_cart[0].name;
shopping_cart[0].price;
Et cetera.
Arrays also start at 0 and not 1.
And this isn't inheritance: it's just a collection of things.

Categories

Resources