Tips for displaying a nested JSON array in a table format?

https://i.sstatic.net/BvAEx.png

I'm working with a JSON array and need to display the data in a table. My question is, how can I insert 'transactionData' inside the main object? Essentially, I want the object structure to be:

{
completeTime: "value",
createTime: "value2",
assigneeName:"value3",
assigneeMap:"value4"
}

Since this involves dealing with a JSON Array, I'm searching for a way to loop through the array and adjust each object as needed.

I can't rely on the original JSON array structure because the transactionData object is not static and its keys could change dynamically. Therefore, I don't want to hardcode specific values like assigneeMap or assigneeName that may vary. That's why I need to programmatically include any values present in the transactionData object into my main object.

javascriptarraysjsonvue.jsobject

Answer №1

employ the array.map() method in a similar fashion

results.map(item => {
{
completeTime: item.completeTime,
createTime: item.createTime,
assigneeName: item.assigneeName || item.assigneename,
assigneeMap: item.assigneeMap || item.assigneeMap || item.yourChangedKey,
}
})

Answer №2

Utilize the map() method of Array.prototype

const transformedData = dataArray.map(element => {
    const { endTime, startTime, info: { eventData } } = element;
    const { performerName, performerInfo } = eventData;
    return {
        endTime,
        startTime,
        performerName,
        performerInfo
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue's reactivity in Vue 3 is exhibiting strange behavior with boolean data

Currently, I am attempting to modify a boolean variable. Upon the initial page load, everything works as expected. However, upon reloading the page, the variable gets updated locally within the method but not in the global data section. As a result, an err ...

javascriptvue.jsruntime-errorvuejs3vue-reactivity

Utilize ExpressJS app.use to enable middleware functionality

As I delve into learning ExpressJS, my attention was drawn to a particular code snippet that has left me puzzled. The function app.use is perplexing me and the documentation isn't providing clear insight. Could someone shed some light on what exactly ...

javascriptnode.jsexpress

Learning how to implement react-toastify promises with axios is a valuable skill to have

// I am trying to implement toastify promises to show a spinner while fetching data and then display a success or failed message // However, I am encountering an error in the code below const fetchData = () => { axios .get("https://restc ...

javascriptreactjsaxiosreact-toastify

Unfulfilled expectation of a promise within an array slipping through the cracks of a for loop

I have a function that generates a Promise. Afterward, I have another function that constructs an array of these promises for future utilization. It is important to note that I do not want to execute the promises within the array building function since so ...

javascripttypescriptasynchronousasync-awaitpromise

Problem with onblur and onchange events not being triggered in input tag

After encountering this issue, I came to the realization that the events onblur and onchange function properly. However, I noticed that if your page contains only ONE <input type="text" onblur="loadXMLDoc()"> Change Content</input> The behav ...

javascriptajaxhtml

What is the method for transmitting a concealed attribute "dragable" to my component?

Currently, I have successfully integrated a here map into my project, but I am now tackling the challenge of adding draggable markers to this map. To achieve this, I am utilizing a custom package/module developed by my company. This package is designed to ...

javascriptreactjstypescripthere-api

What is the best way to perform a redirect in Node.js and Express.js following a user's successful login

As I work on developing an online community application with nodejs/expressjs, one persistent issue is arising when it comes to redirecting users to the correct page after they have successfully signed in. Despite reading several related articles and attem ...

javascriptnode.jsapiexpresserror-handling

Recursive methodology for building DOM tree structure

var div = { element:'div', parent:'body', style: { width:'100px', height:'100px', border:'1px solid black' } child: { element:'input', type:'text', ...

javascript

An issue with Laravel 5.5 and its bootstrap functionality

I encountered the following error: Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. app.js require('./bootstrap'); window.Vue = require('vue'); import Vue f ...

laravellaravel-5twitter-bootstrap-3vue.js

Using transition-group without the need to enclose it in a span tag

My goal is to add a transition effect to a Vuetify v-data-table, specifically when deleting a tbody element so that it fades out instead of abruptly disappearing from the screen. When I use a transition-group wrapping the tbody, the fade-out effect works a ...

vue.jsvuetify.js

What to do when encountering the error "Exceeded Maximum Call Stack Size in vue-router"?

Hello there, I am facing the following error: [vue-router] uncaught error during route navigation: vue-router.esm.js:1897 RangeError: Maximum call stack size exceeded at String.replace (<anonymous>) at resolvePath (vue-router.esm.js:597) ...

vue.jsvue-router

The system encountered an error due to the absence of a defined Google or a MissingKeyMapError from the

Currently, I am developing a component that includes ng-map functionality by following the guidance in this tutorial. <div class="content-pane" map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{$ctrl.googleMapsUrl}}"> & ...

javascriptangularjsng-map

The MUI next Tooltip fails to display upon hovering

While using Material-UIv1.0.0-beta.34 Tooltip with Checkbox and FormControlLabel, I noticed that the tooltip works as expected when hovering over the label in one case. However, when I tried creating a new component(custom) with FormControlLabel and Checkb ...

javascriptreactjsecmascript-6material-ui

Getting the exact value of a key from a JSON array using PHP

In my current project, I received a response from a payment gateway in JSON format: { "response": { "token": "ch_lfUYEBK14zotCTykezJkfg", "success": true, "amount": 400, "currency": null, "description": "test charge", "email": "& ...

phpjson

Internet Explorer no longer supports SCRIPT tags in AJAX responses

We are currently facing an issue in our project where AJAX returns some code, and we utilize innerHTML to insert this code into a DIV. Subsequently, we scan this DIV for all script tags and execute the contents of these script tags using EVAL() (which add ...

javascriptajaxinternet-explorerinnerhtmlscript-tag

Choosing a value in VueORSelecting

Having some issues with vue select. I have a function that should return the id as the value and display the text as an option, but it is currently returning the full object of the selected value. For instance: I am fetching selectable options from my bac ...

javascriptvue.js

passing data from the view to the controller

When I choose an option from the dropdown menu, the selected value is not being passed to the controller action method. Although the selected value is binding in Ajax, it is not binding in the controller action method. Check out our page <div class="ro ...

javascriptjqueryajaxasp.net-mvc-4asp.net-mvc-3

Using Vue to display dynamic images in a v-for loop

I'm currently using a v-for method to determine which image to display, but when inspecting the element, I see that the source is empty. Is this method not correct for rendering images? <div v-for="unit in units"> <img :src=" ...

vue.jsvuejs2

Verify if a user in discord.js has the necessary permissions

I need a special command that is restricted to users with the ban permission current code: if(msg.member.guild.me.hasPermission('BAN_MEMBERS')) { msg.channel.send("hi") } else { msg.channel.send("You do not have ...

javascriptnode.jsdiscord.js

How to Retrieve a File Using Angular 2

Currently, I am trying to download a file in pdf format using Angular 2. For this purpose, I have incorporated FileSaver.js to facilitate the saving of the file as a pdf. (response) => { var mediaType = 'application/pdf'; let pdfConte ...

javascriptangularfilesaver.js