Related
I have data that include the result of student each in an array but also with different subject basing on subject that they undertake. I want to map through them to be able to insert it into a table with respect to the subject and they mark which has to be matching.
This is my API result
{
"status": 200,
"message": "Successfully retrieve",
"data": [
{
"studentNumber": "22001",
"gender": "M",
"result": [
{
"moduleCode": "CHE1163",
"continousAssesment": 42,
"Exam": 6,
"workMaxContinousAssement": 55,
"actualContinousAssesment": 38.18181818181819,
"actualMaxContinousAssesment": 50,
"maxExam": 50,
"total": 44.18181818181819,
"studentNumber": "22001",
"moduleCredit": 10
},
{
"moduleCode": "MEE1162",
"continousAssesment": 10,
"Exam": 40,
"workMaxContinousAssement": 45,
"actualContinousAssesment": 11.11111111111111,
"actualMaxContinousAssesment": 50,
"maxExam": 50,
"total": 51.111111111111114,
"studentNumber": "22001",
"moduleCredit": 15
}
]
},
{
"studentNumber": "1111",
"gender": "M",
"result": [
{
"moduleCode": "CHE1163",
"continousAssesment": 0,
"Exam": 23,
"workMaxContinousAssement": 0,
"actualContinousAssesment": 0,
"actualMaxContinousAssesment": 50,
"maxExam": 50,
"total": 23,
"studentNumber": "1111",
"moduleCredit": 10
},
{
"moduleCode": "MEE1162",
"continousAssesment": 12,
"Exam": 20,
"workMaxContinousAssement": 45,
"actualContinousAssesment": 13.333333333333334,
"actualMaxContinousAssesment": 50,
"maxExam": 50,
"total": 33.333333333333336,
"studentNumber": "1111",
"moduleCredit": 15
}
]
},
{
"studentNumber": "667",
"gender": "F",
"result": [
{
"moduleCode": "CHE1163",
"continousAssesment": 0,
"Exam": 3,
"workMaxContinousAssement": 0,
"actualContinousAssesment": 0,
"actualMaxContinousAssesment": 50,
"maxExam": 50,
"total": 3,
"studentNumber": "667",
"moduleCredit": 10
},
{
"moduleCode": "MEE1162",
"continousAssesment": 17,
"Exam": 40,
"workMaxContinousAssement": 45,
"actualContinousAssesment": 18.88888888888889,
"actualMaxContinousAssesment": 50,
"maxExam": 50,
"total": 58.888888888888886,
"studentNumber": "667",
"moduleCredit": 15
}
]
}
]
}
the result I should be expecting is something like this
I have tried to map from to but it showing nothing when I replace the value as variable
this is the part of the table code
overallResult.map((item) => {
return (
<>
<tr>
<td></td>
<td>{item.studentNumber}</td>
<td className="font-medium">{item.gender}</td>
<td>44.18181818181819</td>
<td>51.111111111111114</td>
<td>45</td>
</tr>
</>
)
}
This should be mapping and then insert the actual value into the for the map which is corresponding to the student as seen in table picture
I updated your sandbox link.
Instead of hard coded data, now your table is populated with the data from overallResult object.
It is not perfect, but at least you can see how to loop through a data and display on the screen.
https://codesandbox.io/s/angry-bardeen-brkzf5?file=/src/App.js
I have a field "properties" in my table(data type: text). In this field there is a JSON object. Now I want to output it in Angular in a reasonable way as I have shown below. Currently only the JSON format is displayed.
There must be a way to display the attributes of a JSON format row by row, right?
"properties": "{'width': 4, 'height': 14, 'count': 10, 'qm': 63, 'loc_x': 0, 'loc_y': 0, 'loc_x': 1}",
width: 4
height: 14
count: 10
qm: 63
loc_x: 0
loc_y: 0
loc_x: 1
UDATE 1:
<div *ngFor="let property of properties | keyvalue">
{{property.key}}: {{property.value}}
</div>
UPDATE 2:
This is my JSON from the Backend
{
"id": 1,
"formId": 1,
"properties": "{'width': 4, 'height': 14, 'count': 10, 'qm': 63, 'loc_x': 0, 'loc_y': 0, 'loc_x': 1}",
"components": [
{
"id": 1,
"shapeId": 1,
"properties": "{'width': 4, 'height': 14, 'count': 10, 'qm': 63, 'loc_x': 0, 'loc_y': 0, 'loc_x': 1}",
"shapeComponentMaterials": [
{
"id": 1,
"componentId": 1,
},
{
"id": 15,
"componentId": 1,
}
]
},
{
"id": 11,
"shapeId": 1,
"properties": "{'width': 4, 'height': 14, 'count': 10, 'qm': 63, 'loc_x': 0, 'loc_y': 0, 'loc_x': 1}",
"shapeComponentMaterials": [
{
"id": 11,
"componentId": 11,
}
]
}
]
}
This is my shape.ts
export interface Shape {
id?: number;
formId: number;
properties?: string;
components?: Array<Component>;
}
You can make use of Angular's KeyValuePipe to display the data in the desired format:
<div *ngFor="let property of properties | keyvalue">
{{property.key}}:{{property.value}}
</div>
UPDATE - Extending answer as per request
As you have updated your question with the exact API response, here's the method to access the properties property to display it in HTML as required:
accessingProperties = JSON.parse(this.valueFromAPI.properties.replace(/'/g, '"'));
Here's a Stackblitz with this example in live.
When querying with mysql2, the third argument to the callback function fields has the following documentation:
console.log(fields); // fields contains extra meta data about results, if available
Ok, great. But when I look at the values in the fields array, I see the following:
[
{
"_buf":{},
"_clientEncoding":"utf8",
"_catalogLength":3,
"_catalogStart":10,
"_schemaLength":0,
"_schemaStart":14,
"_tableLength":11,
"_tableStart":15,
"_orgTableLength":0,
"_orgTableStart":27,
"_orgNameLength":2,
"_orgNameStart":31,
"characterSet":63,
"encoding":"binary",
"name":"id",
"columnLength":11,
"columnType":3, // <-- column type 3? This is an INTEGER field
"flags":1,
"decimals":0
},
{
...
"columnType":253, // <-- column type 253? This is a VARCHAR field
...
}
]
How do I determine what the actual column type is from these integer values?
After doing some more digging, I was able to find the answer by looking at the source. mysql2 exposes a Types field that has the column type names as keys with the column id as values.
At the time of posting, that list looks like this:
{
"DECIMAL": 0,
"TINY": 1,
"SHORT": 2,
"LONG": 3,
"FLOAT": 4,
"DOUBLE": 5,
"NULL": 6,
"TIMESTAMP": 7,
"LONGLONG": 8,
"INT24": 9,
"DATE": 10,
"TIME": 11,
"DATETIME": 12,
"YEAR": 13,
"NEWDATE": 14,
"VARCHAR": 15,
"BIT": 16,
"JSON": 245,
"NEWDECIMAL": 246,
"ENUM": 247,
"SET": 248,
"TINY_BLOB": 249,
"MEDIUM_BLOB": 250,
"LONG_BLOB": 251,
"BLOB": 252,
"VAR_STRING": 253,
"STRING": 254,
"GEOMETRY": 255
}
Here is my code for merging 2 jsons into one... Is there a better way?
Expected behaviour is to get a 'big json' with sum of 'entry jsons' and no
"type-XX" overlaps, and keeping the longest 'rc[ ]' list.
def json_src1 = '''
{
"branch": {
"type-0.2": {
"version": "0.2",
"rc": "[17, 18, 19, 20, 21, 22, 23, 24]"
}
}
}
'''
def json_src2 = '''
{
"branch": {
"type-0.3": {
"version": "0.3",
"rc": "[17, 18, 19, 20, 21, 22, 23, 24]"
}
}
}
'''
def concatenateJsons(json_src1, json_src2){
def json = json_src1 + json_src2
return json
}
To change strings to json objects:
json_src1 = new JsonSlurper().parseText(json_src1)
json_src2 = new JsonSlurper().parseText(json_src2)
To concatenate
json = concatenateJsons(json_src1, json_src2)
println JsonOutput.prettyPrint(JsonOutput.toJson(json))
Expected result:
{
"branch": {
"type-0.2": {
"version": "0.2",
"rc": "[17, 18, 19, 20, 21, 22, 23, 24]"
}
"type-0.3": {
"version": "0.3",
"rc": "[17, 18, 19, 20, 21, 22, 23, 24]"
}
}
}
P.S I am losing order of elements inside of Json after merge for no obvious reason :
("version": "0.3" moves to the bottom in type-03 {}:
Instead of:
{
"branch": {
"type-0.2": {
"version": "0.2",
"rc": "[17, 18, 19, 20, 21, 22, 23, 24]"
}
"type-0.3": {
"version": "0.3",
"rc": "[17, 18, 19, 20, 21, 22, 23, 24]"
}
}
}
I am getting
{
"branch": {
"type-0.2": {
"version": "0.2",
"rc": "[17, 18, 19, 20, 21, 22, 23, 24]"
}
"type-0.3": {
"rc": "[17, 18, 19, 20, 21, 22, 23, 24]",
"version": "0.3"
}
}
}
the simplest thing you can do is to change the concatenateJsons function
def concatenateJsons(json_src1, json_src2){
def json = [branch: json_src1.branch + json_src2.branch]
return json
}
groovy not doing deep merge of parsed jsons it merges only root objects.
so, to merge content of branches just sum branch from each json
Note: if both json1 and json2 has the same type-X.Y then second overlaps content of first one.
I am trying to get (via JSON Path) only key values from the JSON below but with no success.
I cannot use the tilde sign (~) because JMeter's JSON Path Extractor works under JSON PATH 4.0 and ~ is not recognized.
{
"facetCount": {
"designer": {
"4856430": 2,
"7313551": 14,
"7018102": 8,
"306838": 1,
"85146": 146,
"2654979": 11,
"221111": 4,
"180510": 40,
"3344622": 59,
"472718": 73,
"107993": 19,
"166170": 58,
"6908": 2,
"426629": 1,
"1358858": 9,
"9879178": 6,
"55006": 43,
"285396": 2,
"3355": 9,
"215501": 8,
"4968477": 4,
"11349629": 7,
"11229643": 27,
"11355128": 9,
"7093068": 3,
"11098281": 2,
"5833751": 1,
"4741301": 1,
"9198104": 21,
"991324": 4
},
"attributes": {
"135979:77": 290,
"135979:83": 27,
"136227:20": 141,
"136227:78": 670,
"135985:44": 123,
"135985:43": 669,
"135979:62": 700,
"135979:61": 1188,
"136644:176": 2,
"136331:7": 1,
"136331:8": 3,
"136641:190": 13,
"136641:191": 12,
"136061:144": 3
},
"category": {
"136103": 208,
"136105": 147,
"137322": 2,
"136389": 120,
"136215": 236,
"136214": 954,
"136216": 217,
"136217": 352,
"136218": 452,
"136219": 40,
"136480": 4,
"136220": 111,
"136221": 288,
"136222": 58,
"136223": 369,
"136224": 163,
"136986": 3,
"136307": 1125,
"136059": 10,
"136308": 956,
"136315": 984,
"136003": 574,
"136045": 267,
"136035": 1501,
"135985": 1380,
"137134": 27,
"136309": 60,
"137323": 9,
"136390": 1,
"136021": 16,
"136322": 1951,
"137166": 16,
"137317": 7,
"136005": 4,
"135983": 4019,
"136033": 1513,
"136310": 1224,
"136392": 18,
"135981": 2430,
"136031": 16,
"136326": 1312,
"136061": 79
},
"colour": {
"1": 41686,
"7": 14593,
"5": 9596,
"18": 1,
"13": 5185,
"6": 5259,
"3": 6391,
"11": 5715,
"12": 1537,
"4": 8767,
"16": 1466,
"9": 8590,
"15": 1730,
"8": 8333,
"14": 3208,
"2": 13269,
"10": 2730
},
"ninetyminutes": {
"3": 309
},
"sameday": {
"3": 1714,
"42": 254
},
"size": {
"135972:1620": 523,
"136657:2650": 1,
"136657:2850": 1
},
"location": {
"3": 2674,
"4": 7671,
"5": 35808,
"6": 2761,
"7": 11948
},
"labels": {
"1300": 2969
}
}
}
I would like to get the keys that are under facetCount element (designers, attributes, colour, etc.) and also (another JSON Path expression) get the keys that are inside these keys, such as 4856430 from designers, 135979:77 from attributes, and so on.
Could you help me, please?
Thanks in advance!
You can use JSR223 PostProcessor to get key in object JSON
new groovy.json.JsonSlurper().parse(prev.getResponseData()).facetCount.eachWithIndex{ def node, int idx ->
log.info('Key ' + idx + '=' + node.getKey())
vars.put('key_' + idx, node.getKey())
}
And you can get key with a variable like that:
${key_0}, ${key_1}, ...
More detail check here How to extract values from json in jmeter when the keys are unkown?
JMeter's JSON test elements rely on Jayway Jsonpath which doesn't has this tilde operator for querying the keys, you will have to go for:
JSR223 PostProcessor
Groovy language
JsonSlurper
Add JSR223 PostProcessor as a child of the request which returns the above JSON and use the following code:
For direct keys (designer, attributes, etc)
def counter = 1
new groovy.json.JsonSlurper().parse(prev.getResponseData()).facetCount.each { facet ->
vars.put('key_' + counter, facet.key)
counter++
}
vars.put('key_matchNr', counter - 1 as String)
For child keys (4856430, 135979:77, etc)
def counter = 1
new groovy.json.JsonSlurper().parse(prev.getResponseData()).facetCount.each { child ->
child.value.keySet().each { key ->
vars.put('childKey_' + counter, key)
counter++
}
}
vars.put('childKey_matchNr', counter -1 as String)
More information: Groovy - Parsing and producing JSON