This may be a simple fix but I'm new to react so I appologize in advance. I have nested data that I would like to display on a list. The data is being pulled and displayed below.
data: [
{
"id": 1,
"domain_url": "localhost",
"created_on": "2020-05-26",
"config": [
{
"test_name": "test",
"test_description": "test",
}
]
}
]
I can get the domain_url and created_on displaying just fine but nothing I've tried gets any of the config items to appear.
below is the current method I'm using.
<tbody>
{this.props.data.map((data) => (
<tr key={data.id}>
<td>{data.domain_url}</td>
<td>
{data.config.map((sub) => {
sub.test_name;
})}
</td>
<td>{data.created_on}</td>
<td>
...
how can I get the test name from the config array to display? Any help would be appreciated. Thank you!
Your code looks right - I think you just need to add a ‘return’ in front of your ‘sub.test_name;’
Related
I know I'm close on this but I can't figure out how to pass the data array to the controller. This function works perfectly to build an array based on user input. ---Note that the client side includes a post method - the endpoint works in Postman.
//Intent is to trigger the function and capture the array - then ultimately refine the code if it worked.
<form id=liquid action="/api/entities/liquid" method="post" >
<button onclick="getLiquidity()" class="button">Console Data</button>
<button type="submit" class="button" value="Submit">Save Liquidity</button>
<div id="tblCash" style="height: 250px; width:100%;" class="ag-theme-alpine"> </div>
</form>
function getLiquidity() {
const rowData = [];
gridOptions.api.forEachNode(function (node) {
rowData.push(node.data);
});
}
//This doesn't work
module.exports = rowData
//ReferenceError: rowData is not defined
Console.log shows the following:
[
{
"ID": "",
"columnA": "data",
"columnB": "data",
"columnC": "data",
"columnD": "data",
"columnE": "data",
"columnF": "data"
},
]
I can't figure out how to send rowData to the controller where Sequelize takes over.
//controller.js
//imports GridOptions file for Ag-Grid and where rowData is built
const rowData= require("../../public/scripts/liquid")
const liquid = {
ID:"2240", //Using this for testing
columnA:rowData[0].inputA,
columnB:rowData[0].inputB,
columnC:rowData[0].inputC,
columnD:rowData[0].inputD,
columnE:rowData[0].inputE,
columnF: rowData[0].inputF,
updatedAt: rowData[0].updatedAt,
createdAt: rowData[0].createdAt
};
rowData remains empty
I expected to be able to export rowData as an array but it doesn't work. As shown below, the response shows an empty array.
{
trxID: 3211,
ID: 2240,
columnA: null,
columnB: null,
columnC: null,
columnD: null,
columnE: null,
columnF: null,
updatedAt: "2023-02-01T18:57:29.480Z",
createdAt: "2023-02-01T18:57:29.480Z"
}
Besides the specific js issues that others have commented on, I think that you are missing a fundamental concept here.
That is, the grid is intended to be a view component that represents your data.
It should not be the repository for your data.
You should keep your data as an array of objects whose properties represent a "row" of data. You then bind that array to the grid's "rows" property.
If you want to do something with your data, like send it to your back-end, you would use your data array to do so, and should not have to reference the grid to "get" the data.
So, for instance, your code:
gridOptions.api.forEachNode(function (node) {
rowData.push(node.data);
});
should be entirely unnecessary, as you should already have the data which you bound to the grid.
I am trying to create an item on Monda.com through Integromat.
But it fails to create with an error code below;
I am an absolute beginner and unfamiliar with coding stuff but I am trying to create this looking at other existing scenarios... Please help me out!
RuntimeError
[200] invalid value, please check our API documentation for the correct data structure for this column. https://api.developer.monday.com/docs/change-column-values [ Error Code: ColumnValueException / Error Details: {"column_value":"{"url"=>"[Collection]", "text"=>nil}","column_type":"LinkColumn"} ]
mutation {
create_item (
board_id: 3483681072,
group_id: "topics",
item_name: "{{3.name}}",
column_values: "{
"text": "{{3.mappable_column_values.mirror29}}",
"text2": "{{3.mappable_column_values.mirror0}}",
"text7": "{{3.mappable_column_values.mirror1}}",
"text76": "{{3.mappable_column_values.mirror8}}",
{{5.Actual Photoshoot date}}
"text6": "{{3.mappable_column_values.mirror75}}",
"status_10" : {
"label" : "{{3.mappable_column_values.status_10}}"
},
"numbers": "{{3.mappable_column_values.numbers}}",
"link_to_ready_photos": "{{3.mappable_column_values.link_to_ready_photos}}",
"link": "{{3.mappable_column_values.link}}",
{{5.Photoshoot Start}}
"text35": "{{3.mappable_column_values.text35}}"
}",
create_labels_if_missing: true
) {id}
}
Tried copied pretty much everything from the scenarios running without problems, and tweaked some column IDs accordingly.
I'm a little bit new to programming and very new to JS so I apologize for the beginner question.
I'm trying to iterate through this data and get each tracks name and artist but I'm having an issue. Currently I'm trying something like this.
If anybody has any insight or suggestions I would appreciate it greatly.
I'm using a rails backend with JS frontend. Thank you!
function selectTracks(){
fetch(BACKEND_URL)
.then(response => response.json())
.then(playlist => {
playlist.data.forEach(playlist => {
`<h4> ${playlist.attributes.track.name}</h4>
<h4>${playlist.attributes.track.artist}></h4> `
// let newPlaylist = new Playlist(playlist, playlist.attributes)
console.log(fetch)
// document.getElementById("playlist-container").innerHTML += newPlaylist.renderPlaylistCard();
debugger
}
)}
)
}
My serializer looks like this
{
data: [
{
id: "1",
type: "playlist",
attributes: {
name: "Country Songs",
id: 1,
track_id: 10,
track: {
id: 10,
name: "First Song",
artist: "Randy",
created_at: "2020-06-17T02:09:07.152Z",
updated_at: "2020-06-17T02:09:07.152Z"
}
},
relationships: {
track: {
data: {
id: "10",
type: "track"
}
}
}
}
]
}
You need to replace forEach with map. The 'forEachloop doesn't return anything. But themapmethod return an array. (An array of HTML elements in your case
fetch(BACKEND_URL)
.then(response => response.json())
.then(playlist => {
return playlist.data.map(playlist => {
`<h4> ${playlist.attributes.track.name}</h4>
<h4>${playlist.attributes.track.artist}></h4> `
// let newPlaylist = new Playlist(playlist, playlist.attributes)
console.log(fetch)
// document.getElementById("playlist-container").innerHTML += newPlaylist.renderPlaylistCard();
debugger
}
)}
)
Your code technically works assuming that the BACKEND_URL is correct and the json is valid. But, in its current state, it doesn't do anything with the data. If you output the h4 tags, for instance, you should see them written to the screen.
document.write(
`<h4> ${playlist.attributes.track.name}</h4>
<h4>${playlist.attributes.track.artist}</h4> `
)
Or alternatively you could log the values out to prove that you are processing the data correctly:
console.log(playlist.attributes.track.name, playlist.attributes.track.artist)
If not, the next thing to check is the validity of your json. I'm assuming that you copied your json from the browser which will strip some quotes for readability. View the source to ensure that the key names are correctly wrapped in quotes like this:
{
"data": [
{
"id": "1",
"type": "playlist",
"attributes": {
"name": "Country Songs",
...
If you are using ActiveModel Serializers, they should be formatted correctly.
If your json is valid and you can write the h4 tags to the page with the correct data in them, then the problem probably lies in your Playlist class.
Another handy tool for diagnosing fetch() problems is in Chrome Developer Tools. Go to the Network and click the XHR filter. This will allow you to inspect the fetch request and see if the response is valid and the data is what you expect. Other browsers have a similar feature.
Currently working with Bootstrap-vue. I need to generate b-table but with dynamic header values which I get from api, not sure how to go about doing this.
I have tried regular way to set fields in data which works fine but if I try to set computed fields I get no values in my table .
`
computed: {
fields () {
return ['date', ...this.scheduler.times]
}
}
`
The this.scheduler.times is data received from api which contains array like below. Also this array can have more times added
(data from api)
`
[
{
"id": 1,
"start": "01:30:00",
"end": "09:30:00"
},
{
"id": 2,
"start": "10:00:00",
"end": "13:00:00"
}
]
`
Expected result would be where I have columns headers with times from api and added column of dates.
I can generate series of dates using moment but not sure how will i map this to the b-table
Below is a screenshot of result I would like to get:
Any help would be greatly appreciated.
Thanks
I think this is something, you are looking for:
<b-table :items="items" :fields="fields">
<template v-for="field in dynamicFields" v-slot:[`cell(${field.key})`]="{ item }">
</b-table>
in scripts:
this.dynamicFields.push({key: 'someTestKey', label: '1:30AM - 2:30AM'})
I have an array of events being sent to react-big-calendar
They have the following format:
{ "_id": "9Hfiz8C3tztP5LauA",
"name": "This is a test event",
"description": "Testing 123",
"calendar": "LwnaRAuJ6n9xmxhGj",
"clientData": [
{
"clientId": "dSE84s8qQDHNzAFDt",
"date": "2017-02-23T12:00:00.000Z"
}
]
}
I want react-big-calendar to use the event.clientData.date as the date it displays for each event.
Currently the calendar is being rendered empty.
From reading the documentation it seems I need to use the startAccessor prop to achieve this. I've tried the following:
<BigCalendar
selectable
events={events}
startAccessor={this.getEventDate}
/>
getEventDate() {
return moment(this.props.events.clientData.date);
}
That isn't working (I didn't think it would). If anyone could help it would be much appreciated!
I managed to work it out
Here is what worked for me:
<BigCalendar
events={this.props.events}
startAccessor={(event) => { return moment(event.clientData[0].date) }}
endAccessor={(event) => { return moment(event.clientData[0].date) }}
/>