Display multi level nested JSON data with JavaScript and jQuery - javascript

My original project had only one level of JSON data but it has grown and I need a second nested layer.
From what I researched it seemed that I could simply take the original object.name and append it with the new member level I needed to create like object.members.name. However this spits back an error undefined.
Clearly something is wrong or missing and I've been scratching my head for a while now.
I checked my JSON formatting a bunch of times and ran it through a validator (which checked out OK), no errors show up in the console and any search I make seems to bring up a much more complicated scenario then mine. I can't seem to narrow down what the problem is.
Any help or direction is much appreciated!
Here are the code blocks:
Non working multi level
Working single level
Non working multi level JSON data version
var obj =
{
"results": [
{
"members": [
{
"name": "John Smith",
"state": "NY",
"phone": "555-555-1111"
},
{
"name": "Mary Jones",
"state": "PA",
"phone": "555-555-2222"
},
{
"name": "Edward Edwards",
"state": "NY",
"phone": "555-555-3333"
},
{
"name": "Abby Abberson",
"state": "RI",
"phone": "555-555-4444"
}
]
}
]
};
$(obj.results).each(function(k,object){
var output = $("div.output");
output.append(object.members.name + " ");
output.append(object.members.phone + "<br />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>
Working single level JSON data version
var obj = {
"results": [
{
"name": "John Smith",
"state": "NY",
"phone": "555-555-1111"
},
{
"name": "Mary Jones",
"state": "PA",
"phone": "555-555-2222"
},
{
"name": "Edward Edwards",
"state": "NY",
"phone": "555-555-3333"
},
{
"name": "Abby Abberson",
"state": "RI",
"phone": "555-555-4444"
}
]
};
$(obj.results).each(function(k,object){
var output = $("div.output");
output.append(object.name + " ");
output.append(object.phone + "<br />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>

Nest your each statements?
var obj = {
"results": [{
"members": [{
"name": "John Smith",
"state": "NY",
"phone": "555-555-1111"
},
{
"name": "Mary Jones",
"state": "PA",
"phone": "555-555-2222"
},
{
"name": "Edward Edwards",
"state": "NY",
"phone": "555-555-3333"
},
{
"name": "Abby Abberson",
"state": "RI",
"phone": "555-555-4444"
}
]
}]
};
$(obj.results).each(function(k, result) {
var output = $("div.output");
$(result.members).each(function(index, member) {
output.append(member.name + " ");
output.append(member.phone + "<br />");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output">
</div>
Of course, I'd avoid using names like 'object' or 'obj' -- use result and member instead. Far more mnemonic. You'll know exactly what it refers to.

Related

Verify String is displaying within Nested JSON using Postman

I am working on Postman to verify some API calls, upon which I have gone through one of the end point, whose response is give below, and I need to make sure that within that JSON response:
[
{
"contact": {
"id": "k72yk2iwrf",
"firstName": "Francis",
"lastName": "Abell",
"title": "Translational Science Project Manager",
"company": "Sensei",
"email": "aa#aa.cpom",
"fax": {},
"businessAddress": {
"line1": "road",
"line2": "Street",
"line3": "Suite 710",
"city": "Boston",
"country": "US",
"postalCode": "02210",
"state": "MA"
},
"businessPhone": {
"number": "123-123-1234",
"ext": ""
},
"homeAddress": {},
"homePhone": {},
"mobilePhone": {}
},
"registration": {
"id": "104656",
"badgeId": "9208113975",
"eventId": "TESTLIBRA-10"
}
},
{
"contact": {
"id": "w4c4f2i7l4",
"firstName": "Francis",
"lastName": "Abell",
"title": "Translational Science Project Manager",
"company": "Sensei",
"email": "aa#aa.cpom",
"fax": {},
"businessAddress": {
"line1": "road",
"line2": "Street",
"line3": "Suite 710",
"city": "Boston",
"country": "US",
"postalCode": "02210",
"state": "MA"
},
"businessPhone": {
"number": "123-123-1234",
"ext": ""
},
"homeAddress": {},
"homePhone": {},
"mobilePhone": {}
},
"registration": {
"id": "104656",
"badgeId": "6803424516",
"eventId": "TESTLIBRA-10"
}
}
]
I can make sure that "eventId" is displaying and it is displaying "TESTLIBRA-10" value.
No matter, how long JSON response is, It can verify that this property , along with that value of that property are displaying.
I got my answer by myself, what I did was:
var jsonArrayData = pm.response.json();
pm.test('EventID property is displaying throughout JSON', function(){
jsonArrayData.each(function(eventID){
pm.expect(eventID.registration).to.have.property("eventId")
})
})
pm.test('Entered Libra EventID is entered', function(){
jsonArrayData.each(function(eventID){
pm.expect(eventID.registration.eventId).to.eql("TESTLIBRA-10")
})
})

filter nest array of object using java script

This the data i need this value only email": "gm#gmail.com"
{
"params": {
"user": {
"address1": "790 7th Ave",
"address2": "hhhdkhdskhsdkh",
"city": "Chennai",
"name": "gm4",
"phone": "",
"state": "TN",
"zipcode": "600008"
},
"query": {
"FILTERS": [
[
{
"EQ": {
"email": "gm#gmail.com"
}
}
]
],
"PAGENUM": 1,
"PAGESIZE": 100,
"SELECTCOLUMNS": [],
"SORT": []
},
"trigger": "User::UserUpdated"
},
"context": {}
}
actually, I tried const out = req.params.query.FILTERS[0].EQ.email
but i field unable to get expect result plz help.
It is a nested array.
req.params.query.FILTERS[0][0].EQ.email

How to parse multi dimensional JSON data through Javascript

How could i parse this type of json data, getting in "results" to fetch single values like zipcode, state etc
{
"row": [
{
"id": "5",
"name": "test",
"email": "test#test.com",
"street": "mystreet",
"city": "mycity",
"state": "mystate",
"zipcode": "123456",
"myimage": "image.gif"}
]
}​
first, you need to parse that string with JSON.parse
var myJson = JSON.parse(the_raw_data_string);
it ends up into an object like this:
var myJson = {
"row": [
{
"id": "5",
"name": "test",
"email": "test#test.com",
"street": "mystreet",
"city": "mycity",
"state": "mystate",
"zipcode": "123456",
"myimage": "image.gif"}
]
}​
accessing the items:
myJson.row[0].id
myJson.row[0].name
myJson.row[0].street
//and so on...
you can take the json result to a var like follows
var json = {
"row": [
{
"id": "5",
"name": "test",
"email": "test#test.com",
"street": "mystreet",
"city": "mycity",
"state": "mystate",
"zipcode": "123456",
"myimage": "image.gif"}
]
}​
then get the result to another
var result = json.row;
then you can iterate through the result
for (var i = 0; i < result.length; i++) {
var object = result[i];
for (property in object) {
var value = object[property];
alert(property + "=" + value); // This alerts "id=5", etc..
}
}
hope this will help you
Again here jQuery is your good friend
I have posted a sample using jsfiddle with multiple records in your data row
$(document).ready(function () {
var result = {
"row": [
{
"id": "5",
"name": "test",
"email": "test#test.com",
"street": "mystreet",
"city": "mycity",
"state": "mystate",
"zipcode": "123456",
"myimage": "image.gif"
},
{
"id": "10",
"name": "test2",
"email": "test2#test.com",
"street": "mystreet2",
"city": "mycity2",
"state": "mystate2",
"zipcode": "7891011",
"myimage": "image.gif"
}
]
};
var oE = $("#output");
$.each(result.row, function(index, value) {
//- extract target value like zipCode
oE.append($("<li></li>").text(value.zipcode));
});
});
​
Hope this helps.
If the json data is raw then use json.parse.
After that to loop the multi dimensional json data.
data = {"employees":[
{ "firstName":"Anushka", "lastName":"shetty" },
{ "firstName":"Shreya", "lastName":"Saran" },
{ "firstName":"Kajal", "lastName":"Agarwal" }
]};
for (var key in data.employees) {
alert(data.employees[key].firstName) //alert Anushka, Shreya, Kajal
}
You can use JQuery each function:
$.each(myData.row, function(index,item) {
// here you can extract the data
alert (item.zipcode);
});
Use JSON.parse(jsonstring). Then iterate over the objects/arrays.

JSON evel() error: missing] after element list

Hi i'm relatively new to JS and keep getting the error missing] after element list when I try and run the following:
Have a JSON file called test.JSON:
{
"156644": {
name: "name1",
"street": "street1",
"city": "city1"
},
"68656": {
"name": "name2 ",
"street": "street2",
"city": "city1"
},
"388655": {
"name": "name3",
"street": "street3",
"city": "city1"
},
"4564": {
"name": "name4",
"street": "street4",
"city": "city1"
},
"6333": {
"name": "name5",
"street": "street5",
"city": "city1"
}
}
And some Javascript:
var myObject = eval("(" + $.getJSON("test.json") + ")");
How can I fix this error?
The getJSON function:
Will parse JSON into a JavaScript object for you. Don't touch eval.
Is asynchronous and handles the data via a callback not a return value
So:
$.getJSON("test.json", handleData);
function handleData(data) {
console.log(data);
}
You also have a syntax error in your JSON data. Use http://jsonlint.com/ to pinpoint it.

Convert json to a string using jquery

I have a nested json. I want to post it as a form input value.
But, seems like jquery puts "Object object" string into the value.
It seems easier to pass around the string and convert into the native form I need, than dealing with json as I don't need to change anything once it is generated.
What is the simplest way to convert a json
var json = {
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021"
},
"phoneNumber": [
{ "type": "home", "number": "212 555-1234" },
{ "type": "fax", "number": "646 555-4567" }
],
"newSubscription": false,
"companyName": null
};
into its string form?
var json = '{
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021"
},
"phoneNumber": [
{ "type": "home", "number": "212 555-1234" },
{ "type": "fax", "number": "646 555-4567" }
],
"newSubscription": false,
"companyName": null
}'
Following doesn't do what I need:
Json.stringify()
jQuery doesn't have a method for JSON stringifying native objects. You will need json2.js which will provide the JSON.stringify() method to browsers that don't already support it.

Categories

Resources