Working with chart visualization template

Ask the Experts and Postman Tips
1

I’m a bit lost. Tried using handlebars to access data in an array - but it throws a test error.

I know we are supposed to edit this code:

onst vizData = {

// Labels take an array of strings
labels: res.report.portfolios.groups.data.symbol,

// Data takes an array of numbers
data: res.report.portfolios.groups.data.quantity

};

challenge 1: My code is in nested arrays. I need to iterate through multiple results to get each symbol and each quantity. Handlebars.js code does not seem to work here.
My data is more like (ignore the lack of quotes etc - my data is real json - this is for structure only:
Portfolios

  • 0
    – Groups
    — Groupname: “United States”
    — 0
    -----Data
    ------ Symbol: A
    ------ Quantity: 1000
    — 1
    —Groupname: “Netherlands”
    -----Data
    ------ Symbol: A_C
    ------ Quantity: 1000

// EDIT THIS OBJECT TO BIND YOUR DATA
const vizData = {

// Labels take an array of strings
labels: 
{{#each res.report.portfolios}}
{{#each groups}}
{{#each data}}
{{symbol}}
{{/each}}
{{/each}}
{{/each}},

This also doesn’t work.

What does the chart use to access data - and is there an example where I can see it accessing data in an array rather than the relatively flat example? Is there recommended reading to figure out how to initialize the constant that has an example with a more complex array?

Is there instructions on the different pieces to change? I note mychart is referenced in the script and the const. Do I change both?

Thanks in advance

2

I have also tried a little lodash - but get an error on this as well:

// Access the response data JSON as a JavaScript object
// const res = pm.response.json();
var obj = JSON.parse(responseBody)
var report = obj.report

// -----------------------------
// - Structure data for charts -
// -----------------------------

// EDIT THIS OBJECT TO BIND YOUR DATA
const vizData = {

// Labels take an array of strings
labels: _.flatMap(report, ({portfolios}) => (portfolios, ({ groups }) => _.flatMap(groups, ({ data }) => _.map(data, item => ({ quantity: item.symbol}))))),

// Data takes an array of numbers
data: _.flatMap(report, ({portfolios}) => (portfolios, ({ groups }) => _.flatMap(groups, ({ data }) => _.map(data, item => ({ quantity: item.quantity})))))

};

No luck yet. I actually get _.flatMap is not a function

3

Hi @thomas.zdon,

Let us know if you get that flatmap to work (speaking of a prior comment in another thread)

Now, if you do get flatMap to work with Lodash, I dont see why you can’t use those variables within Handlebars.js, unless I am missing something. Once they are arrays, you should be able to iterate over them with “#each”.

Try that out once Lodash works, and keep us posted on the progress.

— Orest

4

Orest,

I’m just trying to console.log the flatmap and am not getting a result.

console.log( _.flatMap(portfolios, ({ groups }) => _.flatMap(groups, ({ data }) => _.map(data, item => ({ symbol: item.symbol})))))

I also tried
console.log( .flatMap(report, ({ portfolios }) =>.flatMap(portfolios, ({ groups }) => _.flatMap(groups, ({ data }) => _.map(data, item => ({ symbol: item.symbol})))))

I no longer get back an error but instead get back an empty

5

Hi Thomas!

Well good you are getting that, means lodash is coming through properly.

Now for your issue. I went back to the post on visulations that we initially did this on, and I see I made a mistake that I forgot to correct in there.

var portfolios = obj.portfolios is wrong
it shoud be portfolios = obj.report.portfolios

When I did that, I got a result and you should too.

Let me know if that fixes it!

Regards,
Orest

6

[quote=“thomas.zdon, post:2, topic:9282”]

_ = require(‘lodash’);
const res = pm.response.json();
// Access the response data JSON as a JavaScript object
// const res = pm.response.json();
var obj = JSON.parse(responseBody)
var portfolios = obj.report.portfolios

console.log( Object.values(_.flatMap(portfolios, ({ groups }) => _.flatMap(groups, ({ data }) => _.map(data, item => ({ data: item.symbol}))))))

console.log(_.flatMap(portfolios, ({ groups }) => _.flatMap(groups, ({ data }) => _.map(data, item => ({ data: item.bookMarketValue})))))

// -----------------------------
// - Structure data for charts -
// -----------------------------

// EDIT THIS OBJECT TO BIND YOUR DATA
const vizData = {

// Labels take an array of strings
labels: _.flatMap(portfolios, ({ groups }) => _.flatMap(groups, ({ data }) => _.map(data, item => ({ data: item.symbol})))),

// Data takes an array of numbers
data: Object.values(_.flatMap(portfolios, ({ groups }) => _.flatMap(groups, ({ data }) => _.map(data, item => ({ data: item.bookMarketValue})))))

};

// ------------
// - Template -
// ------------

// Configure the template
var template = `

`;

// -------------------------
// - Bind data to template -
// -------------------------

// Set the visualizer template
pm.visualizer.set(template, vizData);

Produces a viz - but not properly

I have tried using Object.values to extract values - but I always get the data.symbol - which the chart shows as objejct (object) instead of the real values. I now understand the lodash method to get to the data - and get console.log outputs of 0,1,2 - Data: A Data: AA Data: AABA - so that is ok - jjust isn’t flowing to thhe chart.

7

Hi Thomas,

Thanks for the feedback. I think I know what you are saying, but i am having a difficult time visualizing it. Can you show us a picture that is the behavior that you are seeing?

Thanks,
— Orest

8

Just needed to step away for a while and the solution came to me. All fixed. Thanks for the help.

/ EDIT THIS OBJECT TO BIND YOUR DATA
const vizData = {

// Labels take an array of strings
labels:  _.flatMap(portfolios, ({ groups }) => _.flatMap(groups, ({ data }) => _.map(Object.values(data), 'symbol'))),

// Data takes an array of numbers
data: _.flatMap(portfolios, ({ groups }) => _.flatMap(groups, ({ data }) =>  _.map(Object.values(data), 'bookMarketValue')))

};

1 Like