Develop Reference

Looping through nested JSON returns NULL

I'm trying to better understand how to work with nested JSON objects in JavaScript/React.
I am getting data through the GitLab API in the following form:
const merge_requests = [
{
"id": 39329289,
"iid": 156,
"project_id": 231,
"title": "Repaired some Links",
"description": "",
"state": "merged",
"created_at": "2022-12-03T12:22:14.690Z",
"updated_at": "2022-12-03T12:22:20.060Z",
"merged_by": {
"id": 1000,
"username": "test.user",
"name": "test.user#gmail.de",
"state": "active",
"avatar_url": "",
"web_url": ""
},
"merge_user": {
"id": 2802,
"username": "tes.user",
"name": "test.user#gmail.de",
"state": "active",
"avatar_url": "",
"web_url": ""
},
"merged_at": "2022-12-03T12:22:20.072Z",
"closed_by": null,
"closed_at": null,
"assignees": [],
"assignee": null,
"reviewers": [],
"source_project_id": 231,
"target_project_id": 231,
"labels": [],
"squash_commit_sha": null,
"discussion_locked": null,
"should_remove_source_branch": null,
"force_remove_source_branch": null,
"reference": "!156",
"references": {
"short": "!156",
"relative": "!156",
"full": ""
},
"web_url": "",
"time_stats": {
"time_estimate": 0,
"total_time_spent": 0,
"human_time_estimate": null,
"human_total_time_spent": null
},
"squash": false,
"task_completion_status": {
"count": 0,
"completed_count": 0
},
"has_conflicts": false,
"blocking_discussions_resolved": true,
"approvals_before_merge": null
},
{
"id": 39329289,
"iid": 156,
"project_id": 231,
"title": "Repaired some Links",
"description": "",
"state": "merged",
"created_at": "2022-12-03T12:22:14.690Z",
"updated_at": "2022-12-03T12:22:20.060Z",
"merged_by": {
"id": 1000,
"username": "test.user",
"name": "test.user#gmail.de",
"state": "active",
"avatar_url": "",
"web_url": ""
},
"merge_user": {
"id": 2802,
"username": "test.user",
"name": "test.user#gmail.de",
"state": "active",
"avatar_url": "",
"web_url": ""
},
"merged_at": "2022-12-03T12:22:20.072Z",
"closed_by": null,
"closed_at": null,
"assignees": [],
"assignee": null,
"reviewers": [],
"source_project_id": 231,
"target_project_id": 231,
"labels": [],
"squash_commit_sha": null,
"discussion_locked": null,
"should_remove_source_branch": null,
"force_remove_source_branch": null,
"reference": "!156",
"references": {
"short": "!156",
"relative": "!156",
"full": ""
},
"web_url": "",
"time_stats": {
"time_estimate": 0,
"total_time_spent": 0,
"human_time_estimate": null,
"human_total_time_spent": null
},
"squash": false,
"task_completion_status": {
"count": 0,
"completed_count": 0
},
"has_conflicts": false,
"blocking_discussions_resolved": true,
"approvals_before_merge": null
},]
I want to loop through all objects(merge requests) in this JSON and create a new array with the merge_user.name.
console.log(merge_requests[0].merge_user.name);
console.log(merge_requests[1].merge_user.name);
The logs above return both the correct values. However, I cannot loop through the JSON to create a new array from the data like this:
const arrTest = [];
for(var i = 0; i < Object.keys(merge_requests).length; i++)
{
var mergeUserName = merge_requests[i].merge_user.name;
arrTest.push(mergeUserName);
}
console.log(arrTest);
}
The code above leads to the following error: Uncaught (in promise) TypeError: resultData[i].merge_user is null
Here is a picture:
I am currently learning JS coming from R. I have huge problems working with JSON instead of dataframes and I cannot find any documentation to learn from. I would appreciated any advice/ sources.

const arrTest = [];
for(var i = 0; i < merge_requests.length; i++){
let mergeUserName = merge_requests[i].merge_user?.name;
arrTest.push(mergeUserName);
}
console.log(arrTest);
merge_requests[i].merge_user?.name will return undefined if object is not present in the json.

There is no need to use Object.keys(),you can use merge_requests.length directly
const arrTest = [];
for(var i = 0; i < merge_requests.length; i++){
let mergeUserName = merge_requests[i].merge_user.name;
arrTest.push(mergeUserName);
}
console.log(arrTest);
const merge_requests = [
{
"id": 39329289,
"iid": 156,
"project_id": 231,
"title": "Repaired some Links",
"description": "",
"state": "merged",
"created_at": "2022-12-03T12:22:14.690Z",
"updated_at": "2022-12-03T12:22:20.060Z",
"merged_by": {
"id": 1000,
"username": "test.user",
"name": "test.user#gmail.de",
"state": "active",
"avatar_url": "",
"web_url": ""
},
"merge_user": {
"id": 2802,
"username": "tes.user",
"name": "test.user#gmail.de",
"state": "active",
"avatar_url": "",
"web_url": ""
},
"merged_at": "2022-12-03T12:22:20.072Z",
"closed_by": null,
"closed_at": null,
"assignees": [],
"assignee": null,
"reviewers": [],
"source_project_id": 231,
"target_project_id": 231,
"labels": [],
"squash_commit_sha": null,
"discussion_locked": null,
"should_remove_source_branch": null,
"force_remove_source_branch": null,
"reference": "!156",
"references": {
"short": "!156",
"relative": "!156",
"full": ""
},
"web_url": "",
"time_stats": {
"time_estimate": 0,
"total_time_spent": 0,
"human_time_estimate": null,
"human_total_time_spent": null
},
"squash": false,
"task_completion_status": {
"count": 0,
"completed_count": 0
},
"has_conflicts": false,
"blocking_discussions_resolved": true,
"approvals_before_merge": null
},
{
"id": 39329289,
"iid": 156,
"project_id": 231,
"title": "Repaired some Links",
"description": "",
"state": "merged",
"created_at": "2022-12-03T12:22:14.690Z",
"updated_at": "2022-12-03T12:22:20.060Z",
"merged_by": {
"id": 1000,
"username": "test.user",
"name": "test.user#gmail.de",
"state": "active",
"avatar_url": "",
"web_url": ""
},
"merge_user": {
"id": 2802,
"username": "test.user",
"name": "test.user#gmail.de",
"state": "active",
"avatar_url": "",
"web_url": ""
},
"merged_at": "2022-12-03T12:22:20.072Z",
"closed_by": null,
"closed_at": null,
"assignees": [],
"assignee": null,
"reviewers": [],
"source_project_id": 231,
"target_project_id": 231,
"labels": [],
"squash_commit_sha": null,
"discussion_locked": null,
"should_remove_source_branch": null,
"force_remove_source_branch": null,
"reference": "!156",
"references": {
"short": "!156",
"relative": "!156",
"full": ""
},
"web_url": "",
"time_stats": {
"time_estimate": 0,
"total_time_spent": 0,
"human_time_estimate": null,
"human_total_time_spent": null
},
"squash": false,
"task_completion_status": {
"count": 0,
"completed_count": 0
},
"has_conflicts": false,
"blocking_discussions_resolved": true,
"approvals_before_merge": null
}]
const arrTest = [];
for(var i = 0; i < merge_requests.length; i++){
let mergeUserName = merge_requests[i].merge_user.name;
arrTest.push(mergeUserName);
}
console.log(arrTest);

I copy & pasted your code & JSON and it works fine.
Make sure your JSON is parsed after getting it from ate API typeof merge_requests should return object, if it returns string then do the following:
const parsedData = JSON.parse(merge_requests) and loop through parsedData

i checked your code it's working fine.
Check your api request, are you sure you waiting for it till it get fulfilled?

How can i convert a JSON array payload into one object with specific fields and an array with dates?

I have a JSON payload fetched from the backend. The data contains an payload array with objects. By some how i want to convert these objects inside the array to one object, and the selectedDate dates to own array. The JSON payload seems like this:
{
"success": true,
"payload": [
{
"weekNumber": 40,
"sortOrder": 1,
"label": "autumn",
"numberOfPossibleDays": 3,
"editable": true,
"selectedDate": "2020-09-29",
"deliveryDays": [
{
"date": "2020-09-28",
"contactPerson": null,
"phoneNumber": null,
"contactPerson2": null,
"phoneNumber2": null,
"selected": false
},
{
"date": "2020-09-29",
"contactPerson": "John",
"phoneNumber": "99887744",
"contactPerson2": "Tom",
"phoneNumber2": "40040000,
"selected": true
},
{
"date": "2020-09-30",
"contactPerson": null,
"phoneNumber": null,
"contactPerson2": null,
"phoneNumber2": null,
"selected": false
}
]
},
{
"weekNumber": 53,
"sortOrder": 2,
"label": "christmas",
"numberOfPossibleDays": 2,
"editable": true,
"selectedDate": "2020-12-29",
"deliveryDays": [
{
"date": "2020-12-28",
"contactPerson": null,
"phoneNumber": null,
"contactPerson2": null,
"phoneNumber2": null,
"selected": false
},
{
"date": "2020-12-29",
"contactPerson": "Doe,
"phoneNumber": "99999999",
"contactPerson2": "Foo",
"phoneNumber2": "44552200",
"selected": true
}
]
}
]
}
What i want to do is to get output objects like this:
{
autumn=firstContactPersonName: "John",
autumn=firstContactPersonPhone: "46442644",
autumn=secondContactPersonName: "Tom",
autumn=secondContactPersonPhone: "40040000"
christmas=firstContactPersonName: "Doe",
christmas=firstContactPersonPhone: "99999999",
christmas=secondContactPersonName: "Foo",
christmas=secondContactPersonPhone: "44552200"
}
And the dates output should be an array like this:
const dateArray = ["autumn=2020-09-29", "christmas=2020-12-29"]
I want it to be dynamically, because sometimes i might be have a object for easter and so on. Why i want to do this is because I am using the object to populate content in the input fields and the dateArray to enable which dates is choosen. I know this is not the best solution, but i have to try to make it out this way.
I am all new to JavaScript and i have some problems making it out. I would appreciate if anyone can help me out, please? I hope the question and the example is good. Thank you for the help.

let obj = {
"success": true,
"payload": [
{
"weekNumber": 40,
"sortOrder": 1,
"label": "autumn",
"numberOfPossibleDays": 3,
"editable": true,
"selectedDate": "2020-09-29",
"deliveryDays": [
{
"date": "2020-09-28",
"contactPerson": null,
"phoneNumber": null,
"contactPerson2": null,
"phoneNumber2": null,
"selected": false
},
{
"date": "2020-09-29",
"contactPerson": "John",
"phoneNumber": "99887744",
"contactPerson2": "Tom",
"phoneNumber2": "40040000",
"selected": true
},
{
"date": "2020-09-30",
"contactPerson": null,
"phoneNumber": null,
"contactPerson2": null,
"phoneNumber2": null,
"selected": false
}
]
},
{
"weekNumber": 53,
"sortOrder": 2,
"label": "christmas",
"numberOfPossibleDays": 2,
"editable": true,
"selectedDate": "2020-12-29",
"deliveryDays": [
{
"date": "2020-12-28",
"contactPerson": null,
"phoneNumber": null,
"contactPerson2": null,
"phoneNumber2": null,
"selected": false
},
{
"date": "2020-12-29",
"contactPerson": "Doe",
"phoneNumber": "99999999",
"contactPerson2": "Foo",
"phoneNumber2": "44552200",
"selected": true
}
]
}
]
}
let results={};
let datesArray=[];
obj.payload.map((x)=>{
datesArray.push(x.label+"="+x.selectedDate);
x["deliveryDays"].map((y)=>{
if(y.contactPerson){
let personKey = x.label + "=firstContactPersonName";
results[personKey] = y.contactPerson;
let contactKey = x.label+"=firstContactPersonPhone";
results[contactKey] = y.phoneNumber;
}
if(y.contactPerson2){
let secondPersonKey = x.label + "=secondContactPersonName";
results[secondPersonKey] = y.contactPerson2;
let secondContactKey = x.label+"=secondContactPersonPhone";
results[secondContactKey] = y.phoneNumber2;
}
});
});
console.log(datesArray)
console.log(results)
We iterate throught payload and make use of dates array to store the dates and results array to obtain the first and second contact person names during a season. Hope this helps!

Find all occurrences of JSON element using jQuery

How can you parse out all the values for a particular data point within a complex json response form a rest service call?
Here is my JQUERY code to get the rest service json response. I am looking to get all occurrences of "Id" for all "Approver" elements found in the json data and add them to delimited list - preferably using a
;
to separate each "Id"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'GET',
url: 'MySite/Change/Request/12345/Approvals/GetApprovalGroupUsers?changeNumber=98765',
data: { get_param: 'value' },
dataType: 'json',
success: function (data) {
$.each(data, function(index, element) {
$('body').append($('<div>', {
text: element.Id
}));
});
}
});
});
});
</script>
</head>
<body>
<button>Click me to get listing of Id's</button>
</body>
</html>
The json data from the service in such:
{
"ApprovalSession": "3ebd4e73-7fc5-4113-9ccd-18833318ee09",
"LoadStatus": 0,
"Index": 0,
"ApprovalId": 0,
"Type": null,
"Approver": null,
"ApproverDisplay": null,
"Status": null,
"CreatedBy": null,
"CanBeRemoved": false,
"ConfigurationItems": [
"cigs01e4a002( OPERATING SYSTEM )",
"cigs01e4a002( OPERATING SYSTEM )",
"cigs01e4a004( OPERATING SYSTEM )",
"cigs01e4a004( OPERATING SYSTEM )"
],
"ApprovalReasons": [
{
"AssociatedCI": "abc4a002( OPERATING SYSTEM )",
"AssociatedRuleName": "Default Impact",
"AssociatedRuleApprovalType": null,
"AssociatedRulePartyType": "Targeted Group",
"AssociatedRulePartyName": "Operational Owner",
"AssociatedAdditionalComment": ""
},
{
"AssociatedCI": "xyza004( OPERATING SYSTEM )",
"AssociatedRuleName": "Default Impact ",
"AssociatedRuleApprovalType": null,
"AssociatedRulePartyType": "Targeted Group",
"AssociatedRulePartyName": "Technical Owner",
"AssociatedAdditionalComment": "Substitute Role"
}
],
"PossibleApprovers": [
{
"Approver": {
"Id": "Vzz436",
"Display": "some name",
"LineOfBusinessCode": "25",
"LineOfBusinessName": "Unix",
"LineOfBusinessHierarchy": null,
"PhoneNumber": "+123456789",
"RoleName": null,
"FullName": null,
"LineOfBusiness": null,
"ErrorMessage": null
},
"IsEscalation": false,
"IsDelegate": false
},
{
"Approver": {
"Id": "ppp71",
"Display": "more names",
"LineOfBusinessCode": "5",
"LineOfBusinessName": "Tech",
"LineOfBusinessHierarchy": null,
"PhoneNumber": "+987654321",
"RoleName": null,
"FullName": null,
"LineOfBusiness": null,
"ErrorMessage": null
},
"IsEscalation": false,
"IsDelegate": false
},
{
"Approver": {
"Id": "aaa5",
"Display": "mickey mouse",
"LineOfBusinessCode": "8",
"LineOfBusinessName": "Digital",
"LineOfBusinessHierarchy": null,
"PhoneNumber": "+87877676665",
"RoleName": null,
"FullName": null,
"LineOfBusiness": null,
"ErrorMessage": null
},
"IsEscalation": false,
"IsDelegate": false
}
],
"OriginalApprovals": [ ],
"AggregatedApproval": null,
"IsAggregated": false,
"AggregationId": 0,
"UpdatedBy": null,
"UpdatedDt": null,
"IsGroupActive": false
}

This is how you can get all ID's of the approvers, delimited by a semi-colon.
var data = {
"ApprovalSession": "3ebd4e73-7fc5-4113-9ccd-18833318ee09",
"LoadStatus": 0,
"Index": 0,
"ApprovalId": 0,
"Type": null,
"Approver": null,
"ApproverDisplay": null,
"Status": null,
"CreatedBy": null,
"CanBeRemoved": false,
"ConfigurationItems": [
"cigs01e4a002( OPERATING SYSTEM )",
"cigs01e4a002( OPERATING SYSTEM )",
"cigs01e4a004( OPERATING SYSTEM )",
"cigs01e4a004( OPERATING SYSTEM )"
],
"ApprovalReasons": [
{
"AssociatedCI": "abc4a002( OPERATING SYSTEM )",
"AssociatedRuleName": "Default Impact",
"AssociatedRuleApprovalType": null,
"AssociatedRulePartyType": "Targeted Group",
"AssociatedRulePartyName": "Operational Owner",
"AssociatedAdditionalComment": ""
},
{
"AssociatedCI": "xyza004( OPERATING SYSTEM )",
"AssociatedRuleName": "Default Impact ",
"AssociatedRuleApprovalType": null,
"AssociatedRulePartyType": "Targeted Group",
"AssociatedRulePartyName": "Technical Owner",
"AssociatedAdditionalComment": "Substitute Role"
}
],
"PossibleApprovers": [
{
"Approver": {
"Id": "Vzz436",
"Display": "some name",
"LineOfBusinessCode": "25",
"LineOfBusinessName": "Unix",
"LineOfBusinessHierarchy": null,
"PhoneNumber": "+123456789",
"RoleName": null,
"FullName": null,
"LineOfBusiness": null,
"ErrorMessage": null
},
"IsEscalation": false,
"IsDelegate": false
},
{
"Approver": {
"Id": "ppp71",
"Display": "more names",
"LineOfBusinessCode": "5",
"LineOfBusinessName": "Tech",
"LineOfBusinessHierarchy": null,
"PhoneNumber": "+987654321",
"RoleName": null,
"FullName": null,
"LineOfBusiness": null,
"ErrorMessage": null
},
"IsEscalation": false,
"IsDelegate": false
},
{
"Approver": {
"Id": "aaa5",
"Display": "mickey mouse",
"LineOfBusinessCode": "8",
"LineOfBusinessName": "Digital",
"LineOfBusinessHierarchy": null,
"PhoneNumber": "+87877676665",
"RoleName": null,
"FullName": null,
"LineOfBusiness": null,
"ErrorMessage": null
},
"IsEscalation": false,
"IsDelegate": false
}
],
"OriginalApprovals": [ ],
"AggregatedApproval": null,
"IsAggregated": false,
"AggregationId": 0,
"UpdatedBy": null,
"UpdatedDt": null,
"IsGroupActive": false
}
data.PossibleApprovers.forEach(function (approver) { document.write(approver.Approver.Id + ';')})

jQuery autocomplate parse specific array of data from json object

I have some problem with here jquery here. So I want to make an autocomplete text field using json object from database, here I provide my code
jQuery :
$('#school_name').autocomplete({
minLength: 3,
autoFocus: true,
source: function(request, response) {
$.getJSON('https://host/path', { q: $('#school_name').val() },
response);
}
Return Json
{
"status": "success",
"result": {
"data": [
{
"school_id": xxx,
"school_name": "xxx",
"status": "Swasta",
"address": "xxx",
"city": "BANYUWANGI",
"province": "JAWA TIMUR",
"phone": "1234",
"email": "xx#a.co",
"picture": null,
"is_published": "Y"
},
{
"school_id": xxx,
"school_name": "xxx",
"status": "Swasta",
"address": " ",
"city": "",
"province": "",
"phone": "-",
"email": null,
"picture": null,
"is_published": "Y"
}
]
}
}
I dont want return value json object like i've got, I only need school_name in array form, please help me to solve my problem

Use response callback to push data you want.
$('#school_name').autocomplete({
minLength: 3,
autoFocus: true,
source: function(request, response) {
$.get('https://host/path').always(function(res) {
var json = JSON.parse(res), result_arr = [];
$.each(json.result.data, function(k,v) {
result_arr.push(v.school_name);
});
response(result_arr);
});
}
});

You can use Array.prototype.map to transform an array. map will run a function over each item in the array and create a new array with the returned values.
const json = {
"status": "success",
"result": {
"data": [
{
"school_id": '1234',
"school_name": "First School Name",
"status": "Swasta",
"address": "xxx",
"city": "BANYUWANGI",
"province": "JAWA TIMUR",
"phone": "1234",
"email": "xx#a.co",
"picture": null,
"is_published": "Y"
},
{
"school_id": '5678',
"school_name": "Second School Name",
"status": "Swasta",
"address": " ",
"city": "",
"province": "",
"phone": "-",
"email": null,
"picture": null,
"is_published": "Y"
}
]
}
}
console.log(
json.result.data.map(school => school.school_name)
)

Are there any values for gravatar_id in GitHub GET users/username responses?

Browsing through api.github, every user I look at, the gravatar_id value is empty.
The response data:
URL
https://api.github.com/users/angular
RES
{
"login": "angular",
"id": 139426,
"avatar_url": "https://avatars.githubusercontent.com/u/139426?v=3",
"gravatar_id": "",
"url": "https://api.github.com/users/angular",
"html_url": "https://github.com/angular",
"followers_url": "https://api.github.com/users/angular/followers",
"following_url": "https://api.github.com/users/angular/following{/other_user}",
"gists_url": "https://api.github.com/users/angular/gists{/gist_id}",
"starred_url": "https://api.github.com/users/angular/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/angular/subscriptions",
"organizations_url": "https://api.github.com/users/angular/orgs",
"repos_url": "https://api.github.com/users/angular/repos",
"events_url": "https://api.github.com/users/angular/events{/privacy}",
"received_events_url": "https://api.github.com/users/angular/received_events",
"type": "Organization",
"site_admin": false,
"name": "Angular",
"company": null,
"blog": "angularjs.org",
"location": "",
"email": null,
"hireable": null,
"bio": null,
"public_repos": 95,
"public_gists": 0,
"followers": 0,
"following": 0,
"created_at": "2009-10-13T22:16:19Z",
"updated_at": "2015-04-12T01:40:18Z"
}
The value is empty.

This field was removed last year. Most likely, Github chose to keep the key value in the response to prevent existing code from breaking