Develop Reference

Show JSON in VUE.js

I made an API on Node.js, If I send some params I get the response, it's the same person but different language info, I would like to present it like in the second example I haven't been able to figure it out.
How I'm getting the data
[
{
"Id": 1,
"ced": "123",
"Name": "Andres",
"NativeLanguage": 1,
"Level": 100,
"NameLang": "spanish",
},
{
"Id": 1,
"ced": "123",
"Name": "Andres",
"NativeLanguage": 1,
"Level": 100,
"NameLang": "english",
}
]
how I want to see it
[
{
"Id": 1,
"ced": "123",
"Name": "Andres",
}
"Idiomas":
[
{
"NativeLanguage": 1,
"Level": 100,
"NameLang": "spanish",
},
{
"NativeLanguage": 1,
"Level": 100,
"NameLang": "spanish",
}
]
]
export default {
el: "myFormPerson",
data() {
return {
results:[],
ced:'',
}
},
methods: {
submitForm() {
axios.get('http://localhost:8080/person/' + this.ced)
.then((response) => {
this.results = response.data;
//console.log(this.results);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
});
//console.log(this.ced);
},
}
}
How I see it right now [1]: https://i.stack.imgur.com/ezHgH.png

Rather than pointlessly trying to get the format you want in the MySQL result (not possible) - work with the JSON to convert it to what you want
this.results=Object.values(response.data.reduce((acc,{Id,ced,Name,...rest})=>(acc[Id]||={Id,ced,Name,Idiomas:[]},acc[Id].Idiomas.push({...rest}),acc),{}));
working example
const have = [{
"Id": 1,
"ced": "123",
"Name": "Andres",
"NativeLanguage": 1,
"Level": 100,
"NameLang": "spanish",
},
{
"Id": 1,
"ced": "123",
"Name": "Andres",
"NativeLanguage": 1,
"Level": 100,
"NameLang": "english",
}
];
const want = Object.values(have.reduce((acc,{Id,ced,Name,...rest}) => (acc[Id]||={Id,ced,Name,Idiomas:[]},acc[Id].Idiomas.push({...rest}),acc),{}));
console.log(want);

prepare dataset from json to train RNN in brain.js and node

I have two separate json files that are the response provided from an online api service and will hold the informations about the last two football season of Italian Serie A.
I want to use the unique team id and the result of the match to create a dataset to use with brain.js, what's the best way to achive this?
I've tried to unify the files by copying the content of the second file into the first ove but I will then have two matches array and other duplied fields and I'm not sure on how to process data to ingest into brain.js
{
"filters": {
"season": 2021
},
"resultSet": {
"count": 380,
"first": "2021-08-21",
"last": "2022-05-22",
"played": 380
},
"competition": {
"id": 2019,
"name": "Serie A",
"code": "SA",
"type": "LEAGUE",
"emblem": "https://crests.football-data.org/SA.png"
},
"matches": [
{
"area": {
"id": 2114,
"name": "Italy",
"code": "ITA",
"flag": "https://crests.football-data.org/784.svg"
},
"competition": {
"id": 2019,
"name": "Serie A",
"code": "SA",
"type": "LEAGUE",
"emblem": "https://crests.football-data.org/SA.png"
},
"season": {
"id": 757,
"startDate": "2021-08-21",
"endDate": "2022-05-22",
"currentMatchday": 38,
"winner": null
},
"id": 333779,
"utcDate": "2021-08-21T16:30:00Z",
"status": "FINISHED",
"matchday": 1,
"stage": "REGULAR_SEASON",
"group": null,
"lastUpdated": "2022-06-25T08:20:15Z",
"homeTeam": {
"id": 108,
"name": "FC Internazionale Milano",
"shortName": "Inter",
"tla": "INT",
"crest": "https://crests.football-data.org/108.png"
},
"awayTeam": {
"id": 107,
"name": "Genoa CFC",
"shortName": "Genoa",
"tla": "GEN",
"crest": "https://crests.football-data.org/107.svg"
},
"score": {
"winner": "HOME_TEAM",
"duration": "REGULAR",
"fullTime": {
"home": 4,
"away": 0
},
"halfTime": {
"home": 2,
"away": 0
}
},
"odds": {
"msg": "Activate Odds-Package in User-Panel to retrieve odds."
},
"referees": [
{
"id": 11336,
"name": "Valerio Marini",
"type": "REFEREE",
"nationality": "Italy"
}
]
},{ ... } //
],
// here I will have the other season
"filters": {
"season": 2020
},
"resultSet": {
"count": 380,
"first": "2021-08-21",
"last": "2022-05-22",
"played": 380
},
"competition": {
"id": 2019,
"name": "Serie A",
"code": "SA",
"type": "LEAGUE",
"emblem": "https://crests.football-data.org/SA.png"
},
"matches": [
{...}]
}
At the momen I've used this code on the json I have created to have training data.
const dataset = Object.values(samples.matches).map( (match) => {
let result
switch( match.score.winner ) {
case 'HOME_TEAM':
result = 0
break;
case 'AWAY_TEAM':
result = 1
break;
case 'DRAW':
result = 2
break;
}
return {
homeTeam: match.homeTeam.id,
awayTeam: match.awayTeam.id,
matchResult: result
}
})
//console.log( dataset )
const trainingData = dataset.map( (data) => {
return {
input: [ data.homeTeam, data.awayTeam ],
output: [ data.matchResult ]
}
})
this is what the data I'm using with brain will look
{ homeTeam: 112, awayTeam: 1106, matchResult: 2 },
{ homeTeam: 472, awayTeam: 113, matchResult: 1 },
{ homeTeam: 584, awayTeam: 98, matchResult: 1 },
{ homeTeam: 99, awayTeam: 107, matchResult: 2 },
{ homeTeam: 471, awayTeam: 1106, matchResult: 0 },
{ homeTeam: 472, awayTeam: 488, matchResult: 0 },
where 0 is when home team win, 1 when away team win and 2 if draw, but I need to have a better solution for handle this case.

Postman - How to count occurrences of a specific object in a JSON response

I am new to JSON and Postman. I believe I'm trying to do something very simple.
I have created a GET request which will get a JSON response like the one below.
In the example below I want to get the count of All "IsArchived" attributes in the response;
The number of those attributes will vary from response to response.
How can I do it? Thanks in advance
{
"Id": 1328,
"Name": "AAA Test",
"Owner": {
"Id": 208,
"Name": "The Boss"
},
"FieldGroups": [
{
"Id": "c81376f0-6ac3-4028-8d61-76a0f815dbf8",
"Name": "General",
"FieldDefinitions": [
{
"Id": 1,
"DisplayName": "Product Name",
"IsArchived": false
},
{
"Id": 2,
"DisplayName": "Short Description",
"IsArchived": false
},
{
"Id": 33,
"DisplayName": "Long Description",
"IsArchived": false
},
]
},
{
"Id": "5ed8746b-0fa8-4022-8216-ad3af17db91f",
"Name": "Somethingelse",
"FieldDefinitions": [
{
"Id": 123,
"DisplayName": "Attribution",
"IsArchived": false
},
{
"Id": 1584,
"DisplayName": "FC1",
"IsArchived": false
},
{
"Id": 623,
"DisplayName": "Sizes",
"IsArchived": false,
"Owner": {
"Id": 208,
"Name": "The Boss"
},
"Unit": "",
"Options": [
{
"Id": 1,
"Value": "XS"
},
{
"Id": 2,
"Value": "S"
},
{
"Id": 3,
"Value": "M"
}
]
}
]
}
],
"IsArchived": false
"Version": 1
}

It is a rather specific solution but I hope it helps. The description is added as comments:
// Convert the response body to a JSON object
var jsonData = pm.response.json()
// Create a count variable which will be increased by 1 everytime IsArchived occurs
var count = 0;
function countIsArchived() {
// Loop through the FieldGroupsArray
_.each(jsonData.FieldGroups, (fieldGroupsArray) => {
// Loop through the FieldDefinitionsArray
_.each(fieldGroupsArray.FieldDefinitions, (fieldDefinitionsArray) => {
// Check if IsArchived exists
if(fieldDefinitionsArray.IsArchived) {
// Increase count by 1
count++;
}
});
});
// IF you want it:
// Check if IsArchived exists on the top level of the JSON response and increase count
if(jsonData.IsArchived) {
count++;
}
// IF you want it:
// Create a Postman environment variable and assign the value of count to it
pm.environment.set("count", count);
}
Additional info:
The , after the following object is not needed. It invalidates the JSON:
{
"Id": 33,
"DisplayName": "Long Description",
"IsArchived": false
}, <--

Parse json array and loop through all the data for Pivot.js

I have a json array data in this format:
{
"jobs": [
{
"id": "some_random_id_1",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 40,
"rejected": 20
}
},
{
"id": "some_random_id_2",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 30,
"rejected": 20
}
},
{
"id": "some_random_id_3",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 13,
"rejected": 1
}
},
{
"id": "some_random_id_4",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 13,
"rejected": 1
}
}
],
"job_id": "some_id",
"total_jobs": 60
}
where I just need to access the jobs object and grab id and status and all info for job_fields and stats (or all info for now).
// example is from here
// https://pivottable.js.org/examples/mps.html
$(function(){
$.getJSON("data.json", function(mps) {
$("#output").pivotUI(mps);
});
});
the example works with this json format:
[{
"Province": "Quebec",
"Party": "NDP",
"Age": 22,
"Name": "Liu, Laurin",
"Gender": "Female"
},
{
"Province": "Quebec",
"Party": "Bloc Quebecois",
"Age": 43,
"Name": "Mourani, Maria",
"Gender": "Female"
},
{
"Province": "Ontario",
"Party": "Conservative",
"Age": "",
"Name": "O'Toole, Erin",
"Gender": "Male"
}
]
I am not sure how to modify the javascript so it can read my json format. I can't modify the json format to match the above format, so in the above javascript example, province, party, etc are all passed to the function.
I want to do the same but with my json format, so output id, status, all members of job_fields (ex: TITLE, etc. ), all members of stats (ex: applied, rejected.

Assuming all jobs have job_fields.TITLE, stats.applied and stats.rejected maybe the following will do:
const json = {
"jobs": [
{
"id": "some_random_id_1",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 40,
"rejected": 20
}
},
{
"id": "some_random_id_2",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 30,
"rejected": 20
}
},
{
"id": "some_random_id_3",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 13,
"rejected": 1
}
},
{
"id": "some_random_id_4",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 13,
"rejected": 1
}
}
],
"job_id": "some_id",
"total_jobs": 60
};
console.log(
json.jobs.map(
(job)=>({
id:job.id,
status:job.status,
title:job.job_fields.TITLE,
applied:job.stats.applied,
rejected:job.stats.rejected
})
)
);

You can use map and use Object.assign and spread operator to make an object
var obj={"jobs":[{"id":"some_random_id_1","email":"some#email.com","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":40,"rejected":20}},{"id":"some_random_id_2","email":"some#email.com","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":30,"rejected":20}},{"id":"some_random_id_3","email":"some#email.com","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":13,"rejected":1}},{"id":"some_random_id_4","email":"some#email.com","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":13,"rejected":1}}],"job_id":"some_id","total_jobs":60}
var result = obj.jobs.map(({id,status,job_fields,stats}) => {
return Object.assign({}, {id}, {status}, {...job_fields}, {...stats});
});
console.log(result);
Or you can make it shorter like:
var result = obj.jobs.map( ({id,status,job_fields,stats}) => Object.assign({},{id},{status},{...job_fields},{...stats}) );

Can try with below snippet:
$(function(){
$.getJSON("data.json", function(orgData) {
var pivotData = [];
orgData.jobs.forEach(function (job, ind) {
var reqInfo = {};
reqInfo['id'] = job.id;
reqInfo['status'] = job.status;
reqInfo['jobTitle'] = job.job_fields && job.job_fields.TITLE;
reqInfo['applied'] = job.stats && job.stats.applied;
reqInfo['rejected'] = job.stats && job.stats.rejected;
pivotData.push(reqInfo)
})
$("#output").pivotUI(pivotData);
});
});

$("#output").pivotUI(mps.jobs);

How to use Highmaps and Highcharts with Meteor?

I am using the highcharts:highcharts-meteor package in my application. I added highmaps to my configuration. My config object for highcharts is as follows:
{
"version": "4.2.1", // Choose version of Highcharts/Highstock/Highmaps.
"base": "highcharts.js", // Choose base, can be "highcharts.js", "highstock.js" or "highmaps.js"
"adapter": "jquery", // Choose adapter, e.g. "jquery" or "standalone-framework.js".
"modules": [ // Choose modules to be installed altogether with main library.
"highcharts-3d.src.js",
"modules/exporting.js",
"modules/heatmap.js",
"modules/maps.js",
"modules/drilldown.js",
"themes/gray.js"
]
}
I added the maps.js to be able to use both highcharts and highmaps. I am trying to render the sample demo map "US Population Density" without any luck. I am unsure what the right configuration option is and where should I put the us-all.js file in my directory.
The error I get in the browser console is
Cannot set property 'countries/us/us-all' of undefined
The JSFiddle from highcharts demo site is below.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/
So highcharts.Map is undefined. I have tried multiple things:
changed the config base option to highmaps.js
Removing the modules/maps.js
Putting us-all.js in the compatibility directory
Same issue. What am I doing wrong?

The error:
highcharts.Map is undefined
occurs, because you are including modules/maps.js but this file cannot be found. The module you want to include instead is named map.js. This file is located in the directory /packages/highcharts-container/.npm/package/node_modules/highcharts/modules/.
If you want to implement the Highcharts Maps demo in Meteor, follow these seven steps:
Run the command meteor add highcharts:highcharts-meteor.
Run meteor in order to initialise the highcharts-container.
Open the file /client/config.highcharts.json and insert the following Highcharts configuration:
{
"version": "4.2.1",
"base": "highcharts.js",
"adapter": "default",
"modules": [
"highmaps.js",
"modules/exporting.js",
"modules/heatmap.js",
"modules/drilldown.js",
"modules/map.js",
"themes/gray.js"
]
}
Load the US map in your HTML head:
<head>
<title>meteor-highcharts-demo</title>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
</head>
Implement a container which wraps your map:
<template name="map">
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</template>
Instanciate the map:
if (Meteor.isClient) {
var data = [{
"value": 438,
"code": "nj"
}, {
"value": 387.35,
"code": "ri"
}, {
"value": 312.68,
"code": "ma"
}, {
"value": 271.4,
"code": "ct"
}, {
"value": 209.23,
"code": "md"
}, {
"value": 195.18,
"code": "ny"
}, {
"value": 154.87,
"code": "de"
}, {
"value": 114.43,
"code": "fl"
}, {
"value": 107.05,
"code": "oh"
}, {
"value": 105.8,
"code": "pa"
}, {
"value": 86.27,
"code": "il"
}, {
"value": 83.85,
"code": "ca"
}, {
"value": 72.83,
"code": "hi"
}, {
"value": 69.03,
"code": "va"
}, {
"value": 67.55,
"code": "mi"
}, {
"value": 65.46,
"code": "in"
}, {
"value": 63.8,
"code": "nc"
}, {
"value": 54.59,
"code": "ga"
}, {
"value": 53.29,
"code": "tn"
}, {
"value": 53.2,
"code": "nh"
}, {
"value": 51.45,
"code": "sc"
}, {
"value": 39.61,
"code": "la"
}, {
"value": 39.28,
"code": "ky"
}, {
"value": 38.13,
"code": "wi"
}, {
"value": 34.2,
"code": "wa"
}, {
"value": 33.84,
"code": "al"
}, {
"value": 31.36,
"code": "mo"
}, {
"value": 30.75,
"code": "tx"
}, {
"value": 29,
"code": "wv"
}, {
"value": 25.41,
"code": "vt"
}, {
"value": 23.86,
"code": "mn"
}, {
"value": 23.42,
"code": "ms"
}, {
"value": 20.22,
"code": "ia"
}, {
"value": 19.82,
"code": "ar"
}, {
"value": 19.4,
"code": "ok"
}, {
"value": 17.43,
"code": "az"
}, {
"value": 16.01,
"code": "co"
}, {
"value": 15.95,
"code": "me"
}, {
"value": 13.76,
"code": "or"
}, {
"value": 12.69,
"code": "ks"
}, {
"value": 10.5,
"code": "ut"
}, {
"value": 8.6,
"code": "ne"
}, {
"value": 7.03,
"code": "nv"
}, {
"value": 6.04,
"code": "id"
}, {
"value": 5.79,
"code": "nm"
}, {
"value": 3.84,
"code": "sd"
}, {
"value": 3.59,
"code": "nd"
}, {
"value": 2.39,
"code": "mt"
}, {
"value": 1.96,
"code": "wy"
}, {
"value": 0.42,
"code": "ak"
}];
Template.map.onRendered(function() {
// Make codes uppercase to match the map data
_.each(data, (el) => el.code = el.code.toUpperCase());
// Instanciate the map
$('#container').highcharts('Map', {
chart: {
borderWidth: 1
},
title: {
text: 'US population density (/km²)'
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series: [{
animation: {
duration: 1000
},
data: data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
});
});
}
Run meteor to start your app.
I have prepared also a demo repository, which is hosted on GitHub.