We Keep Coding

JSON to HTML page for name and image as output

Can somebody help me to get the Name with his associated image from the following json.
Code should be in HTML or JS, as I am a backend developer and not able to figure out this.
The JSON:
{
"boardMembers": [
{
"id": "18706279",
"name": "Monique R Herena",
"thumbnail": null,
"title": "Chief Colleague Experience Officer",
"slug": "18706279-monique-r-herena",
"webVisibility": true
},
{
"id": "19676689",
"name": "Elizabeth Rutledge",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iABmk_sWUnY4/v3/80x80.png",
"alt": null
},
"title": "Chief Marketing Officer",
"slug": "19676689-elizabeth-rutledge",
"webVisibility": true
},
{
"id": "18784925",
"name": "Tangela Richter",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iKYkW0FlMRW4/v3/80x80.png",
"alt": null
},
"title": "Chief Governance Ofcr/Secy",
"slug": "18784925-tangela-richter",
"webVisibility": true
},
{
"id": "15024090",
"name": "Laureen E Seeger",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iiw0z.pdTRbE/v1/80x80.jpg",
"alt": "LAUREEN E SEEGER"
},
"title": "Chief Legal Officer",
"slug": "15024090-laureen-e-seeger",
"webVisibility": true
},
{
"id": "21336581",
"name": "Jennifer Skyler",
"thumbnail": null,
"title": "Chief Corporate Affairs Officer",
"slug": "21336581-jennifer-skyler",
"webVisibility": true
},
{
"id": "19676686",
"name": "Raymond Joabar",
"thumbnail": null,
"title": "Pres:Global Risk/CRO",
"slug": "19676686-raymond-joabar",
"webVisibility": true
},
{
"id": "15365626",
"name": "Douglas E Buckminster",
"thumbnail": null,
"title": "Group Pres:Global Consumer",
"slug": "15365626-douglas-e-buckminster",
"webVisibility": true
},
{
"id": "16654781",
"name": "Anna Marrs",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iNFzMiuYiRGY/v3/80x80.png",
"alt": null
},
"title": "Pres:Global Commercial Svcs",
"slug": "16654781-anna-marrs",
"webVisibility": true
},
{
"id": "16804630",
"name": "Denise Pickett",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iReOY_ZB0dOI/v2/80x80.png",
"alt": null
},
"title": "Pres:Global Services Group",
"slug": "16804630-denise-pickett",
"webVisibility": true
},
{
"id": "6832356",
"name": "Anre D Williams",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iJ5kSc7LL.3Y/v2/80x80.png",
"alt": null
},
"title": "Pres:Global Merchant & Network Svcs",
"slug": "6832356-anre-d-williams",
"webVisibility": true
},
{
"id": "3221610",
"name": "Jeffrey C Campbell \"Jeff\"",
"thumbnail": {
"url": " ",
"alt": "35000014"
},
"title": "Exec VP/CFO",
"slug": "3221610-jeffrey-c-campbell",
"webVisibility": true
},
{
"id": "16733751",
"name": "Marc D Gordon",
"thumbnail": {
"url": " ",
"alt": null
},
"title": "Exec VP/CIO",
"slug": "16733751-marc-d-gordon",
"webVisibility": true
},
{
"id": "21531045",
"name": "Jessica Lieberman Quinn",
"thumbnail": null,
"title": "Exec VP/Controller",
"slug": "21531045-jessica-lieberman-quinn",
"webVisibility": true
},
{
"id": "19863566",
"name": "Alan P Gallo",
"thumbnail": {
"url": " ",
"alt": null
},
"title": "Exec VP:Internal Audit/Chief Audit Exec",
"slug": "19863566-alan-p-gallo",
"webVisibility": true
},
{
"id": "16310906",
"name": "Vivian Zhou",
"thumbnail": null,
"title": "Senior VP/Head:Investor Relations",
"slug": "16310906-vivian-zhou",
"webVisibility": false
}
],
"totalExecutives": 17
}

Welcome to the front-end world! First, HTML IS NOT a programming language, it is a Markup Language. You need to use JavaScript to do that, not HTML.
You need to parse the string into an object and iterate each "member" on the object list to get this Name and Photo. I wrote a JavaScript version and a PHP version for comparison.
If you're using JavaScript:
Parse the string into JavaScript object ("JSON.parse" function)
Iterate items in "boardMembers" list
Get those values
CODE:
//Your string
let stringToParse = '<your string here>'
//Converting your string to object
let convertedToObject = JSON.parse(stringToParse);
//Getting the boardMembers list from your parsed object
let listBoardMembers = convertedToObject.boardMembers;
//Creating Elements on HTML (creating a Paragraph with the received data and a container for the list of members). *Notice: I've created a "DIV" (container) with a unique ID ("listMembers"). This is important because when I start to iterate the members I will add them inside the container, and for that, I need to reference it using an ID.*
document.body.innerHTML = `<p> Received String: ${stringToParse}</p>`;
document.body.innerHTML += `<div id="listMembers"></div>`;
//Iterating the list of boardMembers using this length;
for (let i = 0; i < listBoardMembers.length; i++) {
let member = listOfMembers[i];
let memberName = member.name;
let memberImageURL = '';
// Verify if the user has thumbnail
if (member.thumbnail !== null){
memberImageURL = member.thumbnail.url;
}
//Adding this member to the member's container, using the container ID, that we created previously.
document.getElementById('listMembers').innerHTML += `
<div style="display: flex;">
<img src="${memberImageURL}">
<h1>${memberName}</h1>
</div>
`;
}
Best regards,

FullCalendar doesn't display events fetched via JSON with Dynamic 'extraParams' parameter

I'm having problems dislaying events fetched via JSON with Dynamic 'extraParams' parameter as explained here in the Docs:
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
...,
events: {
url: '/getEvents',
method: 'POST',
extraParams: function() {
var combobox = document.getElementById('combobox');
var value = combobox.options[combobox.selectedIndex].value;
return {client: value};
},
failure: function(error) {
console.log(error);
alert("Error", "Unable to fetch events", "red");
},
},
...
});
calendar.render();
On the debug panel, I can see the request made by FullCalendar:
XHR POST https://127.0.0.1:8443/getEvents
With this params:
client: All
start: 2019-09-30T00:00:00Z
end: 2019-11-11T00:00:00Z
timeZone: UTC
And the response:
{
"error": "",
"events": [
{
"allDay": 1,
"color": "blue",
"end": "2019-10-24T00:00:00.000Z",
"extendedProps": {
"company": "Company 1",
"state": "Active",
"type": "task"
},
"groupId": "48",
"id": 27,
"start": "2019-10-23T00:00:00.000Z",
"title": "Title 1",
"url": ""
},
{
"allDay": 1,
"color": "blue",
"end": "2019-11-07T00:00:00.000Z",
"endpoints": 0,
"extendedProps": {
"company": "All",
"description": "Description",
"creationDate": "2019-11-04",
"state": "Active",
"tecnology": "test",
"element": "test 1",
"type": "type 2",
"user": "user 1",
"version": "1.2"
},
"id": 76,
"start": "2019-11-04T00:00:00.000Z",
"title": "Title 2",
"url": ""
}
]
}
But FullCalendar doesn't display this two received events. I don't know what I'm doing wrong.
Regards.

This is happening because your server must return a simple array containing only the events, and nothing else. You're returning a complex object. FullCalendar does not know how to unpack your object and find the "events" property containing the relevant data.
You need to return simply:
[
{
"allDay": 1,
"color": "blue",
"end": "2019-10-24T00:00:00.000Z",
"extendedProps": {
"company": "Company 1",
"state": "Active",
"type": "task"
},
"groupId": "48",
"id": 27,
"start": "2019-10-23T00:00:00.000Z",
"title": "Title 1",
"url": ""
},
{
"allDay": 1,
"color": "blue",
"end": "2019-11-07T00:00:00.000Z",
"endpoints": 0,
"extendedProps": {
"company": "All",
"description": "Description",
"creationDate": "2019-11-04",
"state": "Active",
"tecnology": "test",
"element": "test 1",
"type": "type 2",
"user": "user 1",
"version": "1.2"
},
"id": 76,
"start": "2019-11-04T00:00:00.000Z",
"title": "Title 2",
"url": ""
}
]
from your server, without the rest of it.
I must say that the fullCalendar documentation doesn't make this fact particularly clear.
N.B. I'd argue the "errors" property is superfluous anyway, in any JSON response. If there was an error, you should return a HTTP status code indicating the nature of the error, and a completely different response body indicating whatever you want to tell the user about the error. This would fire the "failure" callback in your JS and allow the browser code to respond appropriately.

accessing a json child object not in an array

I'm trying to accessing a json child object which is not in an array. i've tried accessing it with my below script but its not working. i want to be able to access the menuCategory Object
JSON
[
{
"id": 67,
"name": "Wednesday Menu",
"serveDate": "2019-06-12 00:00:00",
"expiryDate": "2019-06-12 16:11:00",
"status": "APPROVED",
"isEnabled": true,
"meals": [
{
"id": 45,
"name": "Waakye, Gari and Wele",
"description": "A very well designed food for all kids",
"image": "",
"mealType": "LUNCH",
"unitPrice": 30,
"status": "ENABLED"
},
{
"id": 46,
"name": "Gari and Beans",
"description": "A very well designed food for all kidsss",
"image": "",
"mealType": "LUNCH",
"unitPrice": 12,
"status": "ENABLED"
}
],
"menuCategory": {
"id": 2,
"name": "hello"
}
}
]
JAVASCRIPT
callEditMenu(parent, content) {
this.modalService.open(content);
this.editMenuCategoryId = parent.menuCategory.id;
}

May be like
const parent = [{"id":67,"name":"Wednesday Menu","serveDate":"2019-06-12 00:00:00","expiryDate":"2019-06-12 16:11:00","status":"APPROVED","isEnabled":true,"meals":[{"id":45,"name":"Waakye, Gari and Wele","description":"A very well designed food for all kids","image":"","mealType":"LUNCH","unitPrice":30,"status":"ENABLED"},{"id":46,"name":"Gari and Beans","description":"A very well designed food for all kidsss","image":"","mealType":"LUNCH","unitPrice":12,"status":"ENABLED"}],"menuCategory":{"id":2,"name":"hello"}}]
console.log(parent[0].menuCategory.id);

If the parent argument in the callEditMenu function is referring to the JSON you included then try parent[0].menuCategory.id

let arr = [{"id":67,"name":"Wednesday Menu","serveDate":"2019-06-12 00:00:00","expiryDate":"2019-06-12 16:11:00","status":"APPROVED","isEnabled":true,"meals":[{"id":45,"name":"Waakye, Gari and Wele","description":"A very well designed food for all kids","image":"","mealType":"LUNCH","unitPrice":30,"status":"ENABLED"},{"id":46,"name":"Gari and Beans","description":"A very well designed food for all kidsss","image":"","mealType":"LUNCH","unitPrice":12,"status":"ENABLED"}],"menuCategory":{"id":2,"name":"hello"}}]
for (let item of arr) {
if (item.hasOwnProperty("menuCategory")) {
console.log(item["menuCategory"]);
}
};
let res = arr.filter((item) => item && item.menuCategory);
console.log(res[0].menuCategory);
In case you need to find it dynamically. Above are two different ways

Considering there would be multiple items in your array of objects, you can iterate through each object to get the menuCategory name as
let obj = [
{
"id": 67,
"name": "Wednesday Menu",
"serveDate": "2019-06-12 00:00:00",
"expiryDate": "2019-06-12 16:11:00",
"status": "APPROVED",
"isEnabled": true,
"meals": [
{
"id": 45,
"name": "Waakye, Gari and Wele",
"description": "A very well designed food for all kids",
"image": "",
"mealType": "LUNCH",
"unitPrice": 30,
"status": "ENABLED"
},
{
"id": 46,
"name": "Gari and Beans",
"description": "A very well designed food for all kidsss",
"image": "",
"mealType": "LUNCH",
"unitPrice": 12,
"status": "ENABLED"
}
],
"menuCategory": {
"id": 2,
"name": "hello"
}
}
];
obj.forEach(elem => {
console.log(elem.menuCategory.name);
});

Need to group data in Object based on value

I am using React/Typescript in my application but need help with basic JavaScript. I am trying to group the data coming from an api call (in this example i'll use mock data) without modifying the actual JSON. I need to group the data based on the 'deviceType' value. So if there are 4 objects, if two are ipad and two are iphone, I need to group those in order. Right now, the mock data is showing Ipad air, then Iphone 6plus, then Ipad air, and then Iphone 6plus again. I need to group these so the new object has the two ipadAir objects first and then the iphone 6plus object coming after. I believe this can be done by making a copy of the old object using spread operator and then modifying it before returning. Here is the data object:
{
"data": {
"DirectvNowDeviceNotifications": [
{
"AccountNumber": "180802190357553",
"AlertDescription": [
{
"AlertType": "BUFFERINGERRORS",
"AlertCode": "CRITICAL_ISFATAL",
"AlertInfo": "ACCOUNT_ALERT",
"SkipDismissal": false,
"DISMISSAL_EXPIRY_DATE": "",
"Content": {
"issueTitle": "Buffering Error Detected",
"issueDescription": "Buffering Error Detected"
},
"AlertAdditionalInfo": [
{
"Name": "reasonCodes",
"Value": "CRITICAL_ISFATAL"
},
{
"Name": "make",
"Value": "APPLE"
},
{
"Name": "deviceType",
"Value": "IPAD AIR"
},
{
"Name": "deviceID",
"Value": "F920BE29-1321-498A-B5D7-7FA84396DE16"
},
{
"Name": "osName",
"Value": "IOS"
},
{
"Name": "ISP",
"Value": "TIME WARNER CABLE INTERNET LLC"
},
{
"Name": "Mobile Carrier",
"Value": "AT&T"
},
{
"Name":"workflowName",
"Value":"CCE_ATTTV_Wifi_Setup"
}
],
"AdditionalContent": {
"longDescription": "You received this error message because the system has captured buffering errors on your device while streaming."
}
},
{
"AlertType": "BUFFERINGERRORS",
"AlertCode": "CRITICAL_FATALV",
"AlertInfo": "ACCOUNT_ALERT",
"SkipDismissal": false,
"DISMISSAL_EXPIRY_DATE": "",
"Content": {
"issueTitle": "Buffering Error Detected",
"issueDescription": "Buffering Error Detected"
},
"AlertAdditionalInfo": [
{
"Name": "reasonCodes",
"Value": "CRITICAL_FATALVIDEOERROR_CT"
},
{
"Name": "make",
"Value": "APPLE"
},
{
"Name": "deviceType",
"Value": "IPHONE 6 PLUS"
},
{
"Name": "deviceID",
"Value": "F920BE29-1321-498A-B5D7-7FA84396DE16"
},
{
"Name": "osName",
"Value": "IOS"
},
{
"Name": "ISP",
"Value": "TIME WARNER CABLE INTERNET LLC"
},
{
"Name": "Mobile Carrier",
"Value": "AT&T"
},
{
"Name":"workflowName",
"Value":"CCE_DTVN_PLAYER_ERRORS"
},
{
"Name":"workflowName",
"Value":"CCE_DTVN_PLAYER_ERRORS"
}
],
"AdditionalContent": {
"longDescription": "You received this error message because the system has captured buffering errors on your device while streaming"
}
},
{
"AlertType": "OSUNSUPPORTED",
"AlertCode": "N_NOT_SUPPORTED",
"AlertInfo": "ACCOUNT_ALERT",
"SkipDismissal": false,
"DISMISSAL_EXPIRY_DATE": "",
"Content": {
"issueTitle": "The device you are trying to use with DIRECTV NOW is not supported.",
"issueDescription": "The device you are trying to use with DIRECTV NOW is not supported."
},
"AlertAdditionalInfo": [
{
"Name": "reasonCodes",
"Value": "VSTB_UNSUPPORTED_DEVICE"
},
{
"Name": "make",
"Value": "APPLE"
},
{
"Name": "deviceType",
"Value": "IPAD AIR"
},
{
"Name": "deviceID",
"Value": "F920BE29-1321-498A-B5D7-7FA84396DE16"
},
{
"Name": "osName",
"Value": "IOS"
},
{
"Name": "ISP",
"Value": "TIME WARNER CABLE INTERNET LLC"
},
{
"Name": "Mobile Carrier",
"Value": "AT&T"
},
{
"Name":"workflowName",
"Value":"CCE_DTVN_PLAYER_ERRORS"
}
],
"AdditionalContent": {
"longDescription": "<a target='_blank' href='https://www.att.com/esupport/article.html#!/directv-now/KM1200941'>Here</a> is a list of supported devices."
}
},
{
"AlertType": "NA",
"AlertCode": "NA",
"AlertInfo": "NA",
"SkipDismissal": false,
"DISMISSAL_EXPIRY_DATE": "",
"Content": {
"issueTitle": "tell me more title",
"issueDescription": "tell me more description"
},
"AlertAdditionalInfo": [
{
"Name": "reasonCodes",
"Value": "NA"
},
{
"Name": "make",
"Value": "APPLE"
},
{
"Name": "deviceType",
"Value": "IPHONE 6 PLUS"
},
{
"Name": "deviceID",
"Value": "FB2468CF-BF73-4DBC-9600-C61553BB759F"
},
{
"Name": "osName",
"Value": "IOS"
},
{
"Name": "ISP",
"Value": "TIME WARNER CABLE INTERNET LLC"
},
{
"Name": "Mobile Carrier",
"Value": "AT&T"
}
],
"AdditionalContent": {
"longDescription": "tell me more long long long description"
}
}
]
}
]
},
"content": {
"code": 200,
"message": "OK"
}
}
Need objects to be grouped based on device type and return a new object with the proper grouping. Please if anyone can help I would greatly appreciate it, I have been struggling with this. Thank you

You could go through the keys of your object, in the following example I assume that you define this as a javascript object, the result will be two objects each with a key corresponding to the type of device
const newGroup = [];
const data = object["data"]["DirectvNowDeviceNotifications"];
(data).forEach((map, index) => {
Object(map['AlertDescription']).forEach((devices) => {
if(typeof devices['AlertAdditionalInfo'] !== 'undefined'){
const deviceType = devices['AlertAdditionalInfo'].find((type) => type.Name ==='deviceType');
if(typeof deviceType.Value !== 'undefined'){
if(typeof newGroup[deviceType.Value] === 'undefined'){
newGroup[deviceType.Value] = [];
}
newGroup[deviceType.Value].push(devices);
}
}
})
});
example working
this code is just an example you should optimize, the idea is to give you an idea of ​​solution

Checking a value in a nested JSON using Postman

I have a nested JSON returned from an API that I am hitting using a GET request, in POSTMAN chrome app. My JSON looks like this
"result": [
{
"_id": "some_id",
"name": "India",
"code": "IN",
"link": "http://www.india.info/",
"closingTime": "2017-02-25T01:12:17.860Z",
"openingTime": "2017-02-25T06:12:17.205Z",
"image": "image_link",
"status": "online",
"serverStatus": "online",
"games": [
{
"_id": "some_game_id1",
"name": "Cricket"
},
{
"_id": "some_another_id1",
"name": "Baseball"
},
{
"_id": "some_another_id_2",
"name": "Basketball"
}
]
},
{
"_id": "some_id",
"name": "Australia",
"code": "AUS",
"link": "https://www.lonelyplanet.com/aus/adelaide",
"closingTime": "2017-02-28T05:13:38.022Z",
"openingTime": "2017-02-28T05:13:38.682Z",
"image": "some_image_url",
"status": "offline",
"serverStatus": "online",
"games": [
{
"_id": "some_game_id_2",
"name": "Cricket"
},
{
"_id": "some_another_id_3",
"name": "Kho-Kho"
},
{
"_id": "some_another_id_4",
"name": "Badminton"
},
{
"_id": "some_another_id_5",
"name": "Tennis"
}
]
},
I am trying to test whether my response body has "name":"India" and the "game" with "some_game_id1" contains the "name":"cricket".
I went through this link where the answer is to have an array for "name"created and then check within the array whether the array contains the value. I tried this but my code fails.
Also, I tried searching the element by the index within the JSON body using this -
var searchJSON = JSON.parse(responseBody);
tests["name contains India"] = searchJSON.result.name[0]==="India";
But this also fails. I tried using the .value appended with the second line of above code, but it also fails. How can I check this thing?

You need to put [0] after result (which is an array) rather than name (which is a string).
Also, use a regular expression to check whether the name contains 'India', because using === only checks if the name is exactly India.
var searchJSON = JSON.parse(responseBody)
tests["name contains India"] = /India/.test(searchJSON.result[0].name)
Demo Snippet:
var responseBody = `{
"result": [{
"_id": "some_id",
"name": "India",
"code": "IN",
"link": "http://www.india.info/",
"closingTime": "2017-02-25T01:12:17.860Z",
"openingTime": "2017-02-25T06:12:17.205Z",
"image": "image_link",
"status": "online",
"serverStatus": "online",
"games": [{
"_id": "some_game_id1",
"name": "Cricket"
},
{
"_id": "some_another_id1",
"name": "Baseball"
},
{
"_id": "some_another_id_2",
"name": "Basketball"
}
]
},
{
"_id": "some_id",
"name": "Australia",
"code": "AUS",
"link": "https://www.lonelyplanet.com/aus/adelaide",
"closingTime": "2017-02-28T05:13:38.022Z",
"openingTime": "2017-02-28T05:13:38.682Z",
"image": "some_image_url",
"status": "offline",
"serverStatus": "online",
"games": [{
"_id": "some_game_id_2",
"name": "Cricket"
},
{
"_id": "some_another_id_3",
"name": "Kho-Kho"
},
{
"_id": "some_another_id_4",
"name": "Badminton"
},
{
"_id": "some_another_id_5",
"name": "Tennis"
}
]
}
]
}`
var tests = {}
var searchJSON = JSON.parse(responseBody)
tests["name contains India"] = /India/.test(searchJSON.result[0].name)
console.log(tests) //=> { "name contains India": true }