Develop Reference

Getting undefined "results" when using .map()

I'm trying to access my Title value with map but I'm getting an error stating that "results" is undefined. Based on the JS object's structure, I'm not sure why the error's coming up. I can't tell which results it's referring to, but I believe it's the first one.
]).then(axios.spread((cat) => {
_categories = cat.data.d.results;
// irrelevant code here
loadCategories(){
let categs = _categories,
trainingCrs = _categories.d.results.Courses.results.map(x => x.Title);
console.log(trainingCrs);
}
JSON snippet:
{
"d": {
"results": [
{
"__metadata": {
"id": "N/A",
"type": "N/A"
},
"Courses": {
"results": [
{
"__metadata": {
"id": "N/A",
"type": "N/A"
},
"Title": "Capuchin Monkey"
},
{
"__metadata": {
"id": "N/A",
"type": "N/A"
},
"Title": "Capybara"
},

Dynamically build display for JSON-Data and JSONschema

I have a JSON Schema which describes the data I want to display.
{
"title": "BeautifulDataRequest",
"type": "object",
"properties": {
"DateOfRequest": {
"type": "string"
},
"PeopleRequested": {
"type": "string"
},
"JourneyType": {
"type": "string"
},
"AccommodationDate": {
"type": "string"
},
"Request": {
"type": "string"
}
}
}
And I have JSON-Data I want to display. The JSON can contain additional fields which are not described in the JSON schema, but I only want to display the values described in this schema.
The schema and the data can vary depending on the data type.
Since there are a lot of different schemata I am looking for something that can "create a display dynamically depending on the schema".
I already worked with JSONEditor, but this editor is for changing the schema, more than displaying the data. I can simply display the data by setting all fields to read only, but I think that is kind of awkward.
Sample data:
{
"Id": "9be37e98-bc35-4aa5-8c74-39ea76415db5",
"UserId": "c7c76272-e6f3-e811-93fc-005056b22eda",
"TempId": null,
"UserTypeName": null,
"StoreCode": "fdsdf",
"CurrentStepCode": "Done",
"StoreAssignedName": "",
"CreateDate": "2018-11-30T10:05:25.867",
"isDeleted": false,
"AdditionalData": {},
"Type": {
"Id": "c7c76272-e6f3-e811-93fc-005056b22eda",
"Name": "Request"
},
"DateOfRequest": "17.11.2018",
"PeopleRequested": "2",
"JourneyType": "Doppelzimmer",
"Request": "Nachfrage zur Reise",
"AccommodationDate": "Insel Rügen – Perle der Ostsee"
}
To put it in a nutshell:
I have JSON-data which is described by a JSON-schema.
I want to display this data based on the JSON-schema.
The front end is HTML with bootstrap2 and JavaScript available.
Question:
Does anybody know a way/(JavaScript)library to dynamically display JSON-Data described by JSON-Schema?

var schema = {
"title": "BeautifulDataRequest",
"type": "object",
"properties": {
"DateOfRequest": {
"type": "string"
},
"PeopleRequested": {
"type": "string"
},
"JourneyType": {
"type": "string"
},
"AccommodationDate": {
"type": "string"
},
"Request": {
"type": "string"
}
}
};
var sampleData = [{
"Id": "9be37e98-bc35-4aa5-8c74-39ea76415db5",
"UserId": "c7c76272-e6f3-e811-93fc-005056b22eda",
"TempId": null,
"UserTypeName": null,
"StoreCode": "fdsdf",
"CurrentStepCode": "Done",
"StoreAssignedName": "",
"CreateDate": "2018-11-30T10:05:25.867",
"isDeleted": false,
"AdditionalData": {},
"Type": {
"Id": "c7c76272-e6f3-e811-93fc-005056b22eda",
"Name": "Request"
},
"DateOfRequest": "17.11.2018",
"PeopleRequested": "2",
"JourneyType": "Doppelzimmer",
"Request": "Nachfrage zur Reise",
"AccommodationDate": "Insel Rügen – Perle der Ostsee"
}, {
"Id": "1",
"UserId": "2",
"TempId": null,
"UserTypeName": null,
"StoreCode": "fdsdf",
"CurrentStepCode": "Done",
"StoreAssignedName": "",
"CreateDate": "2018-11-30T10:05:25.867",
"isDeleted": false,
"AdditionalData": {},
"Type": {
"Id": "c7c76272-e6f3-e811-93fc-005056b22eda",
"Name": "Request"
},
"DateOfRequest": "test",
"PeopleRequested": "test",
"JourneyType": "test",
"Request": "test",
"AccommodationDate": "test"
}];
function matchSchema (samples, schema) {
var dataset = [];
samples.forEach( sample => {
// Deep clone schema (may use lodash or underscore)
var clone = jQuery.extend(true, {}, schema);
_.findKey(schema.properties, (value, key) => {
if (_.has(sample, key)) {
// You may validate type here
clone.properties[key] = sample[key];
}
});
// Add clone to dataset
dataset.push(clone);
});
return dataset;
}
var result = matchSchema(sampleData, schema);
var $table = $('#result-table tbody');
console.log(result);
// Draw table
result.forEach(item => {
var row = $('<tr/>');
_.each(item.properties, (value, key) => {
var column = $('<td/>').text(value);
row.append(column);
});
$table.append(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fastcdn.org/Underscore.js/1.8.3/underscore-min.js"></script>
<table id="result-table" border="1">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

How to manipulate this JSON using Javascript

I am getting this response from an API:
{
"statuses": {
"status": [
{
"name": "Member",
"id": "1"
},
{
"name": "Attender",
"id": "3"
},
{
"name": "Child",
"id": "4"
}
]
}
}
But I need to somehow flatten the response to be this:
{
"name": "Member",
"id": "1"
},
{
"name": "Attender",
"id": "3"
},
{
"name": "Child",
"id": "4"
}
How can I do that using Javascript?

var response = {
"statuses": {
"status": [
{
"name": "Member",
"id": "1"
},
{
"name": "Attender",
"id": "3"
},
{
"name": "Child",
"id": "4"
}
]
}
}
var statusObj = response.statuses.status;
$('#result').text('First name is: ' + statusObj[0].name)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="result"/>

You can do JSON.parse(str) and then you you just take the data from status[x]
If you really want to keep it as a string you can do
var content = str.match(/\[(.*?)\]/);

In fact, you just need to retrieve by response.statuses.status from your Javascript object.
But , If you needed to convert json to javascript object,
please use JSON.parse(your json response) method using JSON.js.
Download the JSON.js from https://github.com/douglascrockford/JSON-js

How to recreate json object

I have json object like this
[
{
"name": "first_name",
"value": "sssssssssssssssssss"
},{
"name": "email",
"value": "ss.ss#gmail.com"
}, {
"name": "address",
"value": "ssssssssssssssssssss"
}, {
"name": "PhoneNumber",
"value": "12342123321"
}
]
This data is coming on form subbmission
But i want json data as
{
"formProperties": {
"table": "users",
"mode": "insert",
"method":"post",
"action":"urlhere",
"user":"admin"
},
"formValues": [
{
"name": "first_name",
"value": "sssssssssssssssssss"
},{
"name": "email",
"value": "ss.ss#gmail.com"
}, {
"name": "address",
"value": "ssssssssssssssssssss"
}, {
"name": "PhoneNumber",
"value": "12342123321"
}
]
}
How to reconstruct JSON object. please help me friends I was strucked with this problem.
Thanks in advance

Assume the JSON as string is saved in the variable called json you can use the following code:
var newObject = {
"formProperties": {
"table": "users",
"mode": "insert",
"method":"post",
"action":"urlhere",
"user":"admin"
},
"formValues": JSON.parse(json)
};
var newJson = JSON.stringify(newObject);

How to print object data in javascript

I have the following object data:
var response = {
"response": {
"numFound": 7945,
"docs": [{
"description": "target",
"url": "target",
"id": "269653",
"score": 6.9186745
},
{
"description": "Target Kent",
"url": "Target_Kent",
"id": "37275",
"score": 4.3241715
}]
},
"highlighting": {
"269653": {
"description": ["<em>target</em>"]
},
"37275": {
"description": ["<em>Target</em> Kent"]
}
}
};
I can use response.response.docs[0].description to print out "target". But I don't know how to print out "<em>target</em>". Thanks.

response.highlighting[269653].description[0]
Try it: http://jsfiddle.net/9QFAM/

Assuming you need to keep the reference to docs[0] or whichever other object reference:
response.highlighting[response.response.docs[0].id].description[0]