The map() function efficiently retrieves all object values from an array in the backend simultaneously

Using axios, I am downloading backend structure data.

The data is structured as advancedProfile.technologies (an array with 5 objects) with keys {title, link, category, date, id}.

Afterwards, I am rendering divs using the map function.

The code line looks like this:

{download.data.advancedProfile.technologies.map(obj=><div>{obj.title}</div>)}

Although this line allows me to render all 5 objects from the array, it only displays one key value at a time.

Is there a way for me to map and display all 5 objects with all keys at once, without having to manually input each key value separately?

Answer №1

When extracting data, you have two options:

{records.data.profileInfo.interests.map(item => (
  <div>
    {Object.values(item).map(value => <div>{value}</div>)
  </div>
))}

If you also want to display the keys:

{records.data.profileInfo.interests.map(item => (
  <div>
    {Object.entries(item).map(([key, value])=> <div>{key}: {value}</div>)
  </div>
))}

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

Guide to creating a nested list using the jQuery :header selector

Here is the structure of my html: <h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p ...

Using Ajax to seamlessly replace content with a smooth fade effect

Is it possible to add a fade effect to the code below, where the content of "demo" div is replaced with the content of "newpage.html"? <button onclick="loadDoc()">Click here</button> function loadDoc() { var xhttp = new XMLHttpRe ...

Successful execution occurring prior to beforeSend in a Cordova iOS application utilizing jQuery Ajax

After making some changes to the HTML of the login button, I encountered an issue where the alert was being triggered before the button's HTML had updated when testing on my iPhone using a Cordova-built app. Strangely, this problem did not occur when ...

What's causing jQuery to make the entire page malfunction?

I am experiencing an issue where a function is not recognized as being in scope when I have a reference to jQuery defined. Oddly enough, if I comment out that reference, the function call works just fine. I have other pages set up the same way with jQuer ...

Enhancing performance by dynamically updating DOM elements when they come into view during scrolling

Currently, I am in search of an efficient algorithm to dynamically load background-images for a group of <li>'s but I am encountering some efficiency issues. The code I am using at the moment is as follows: function elementInView($elem, vps, vp ...

Why does the content not appear again when switching between tabs?

Hello! I'm facing an issue with toggling between two sets of content on my page. Initially, the correct content shows up, but when I switch tabs, the new content doesn't appear. Furthermore, if I click back to the first tab, that content disappea ...

Changing font color of a selected item in Material-UI's textview

I have a select textview in my react app and I am wondering how to change the font color after selecting an item from this textview. <div> <TextField id="standard-select-currency" select fullWidth l ...

Save this page for later by using JavaScript to create a

Does anyone have a solution as to why window.location.href does not save the current webpage URL as a bookmark? Thank you ...

Using Axios to Integrate an API - Displaying a Username and Password Pop-up

I have been given a project that involves API integration. I have successfully retrieved data from the API, but there is a pop-up appearing asking for a username and password. Although I have these credentials, I would like to log in without that pop-up ap ...

Tips for saving and retrieving req.user using JsonwebToken

Looking for ways to store and retrieve req.user using JsonwebToken in my booking application built with Node. I need to fetch the user information who booked a product and display it on the admin portal. .then((user) => { const maxAge = 3 * 60 * ...

Learn the step-by-step process of sending an email through the SendGrid API V3 utilizing templates with a comprehensive example

Currently, I am delving into the SendGrid documentation regarding templates and stumbled upon this: You have three options to send transactional templates: Utilizing the SMTP Relay Including the template ID in the templates parameter of the W ...

Fixing a menu hover appearance

I recently encountered a small issue with the menu on my website. When hovering over a menu item, a sub-menu should appear. However, there seems to be a slight misalignment where the submenu appears a few pixels below the actual menu item. Check out the w ...

When retrieving the card in React, only the first element is affected by the .map function

There seems to be an issue with Arrays.map as it is only working for the first object in the array. Here is the main function: function App(){ return ( <div> <NavBar /> { data.map((prop) =&g ...

Looking for a substitute for iframes when using jQuery UI tabs?

I currently have a Spring-based web application that integrates with jQuery Tabs. What I'm doing is building a data string with specific parameters and appending it to a URL: var hrefData = "?" + item1 + "&" + item2 + "&" + item3; var href = ...

Troubleshooting URL Problems with Node.js Search and Pagination

My results page has pagination set up and the routes are structured like this: app.get("/results",function(req,res){ query= select * from courses where // this part adds search parameters from req.query to the sql query// Object.keys(req.query.search).for ...

After signing out and logging back in, data fails to display - ReactJS

I am encountering difficulties with the login/logout process and displaying data in a form. When I restart my server and log in without logging out, everything works fine and the data appears in the form. However, if I log in, then log out, and log back in ...

Unable to fetch the identification number from the database

I'm encountering an issue with retrieving the ID from my database: https://i.sstatic.net/oSAi8.jpg Here is a snapshot of my database: https://i.sstatic.net/j5PpZ.jpg Below is my event controller class: <?php namespace App\Http\Contro ...

Guidelines for converting a number into an array of strings using JavaScript

Task: Write a function that takes a number and returns an array of strings, each element being the number cut off at each digit. Examples: For 420, the function should return ["4", "42", "420"]; For 2017, the function should return ["2", "20", "201", "2017 ...

Tips for resolving the final item issue in Owl Carousel when using right-to-left (RTL)

Encountering a bug with the rtl setting in owl-carousel. When the rtl is applied to the slider and I reach the last item, the entire slider disappears! Here's the code snippet: var viewportWidth = $("body").innerWidth(); if (viewportWidth & ...

Utilizing identical data in two distinct React child components: one component enables manipulation of the data, while the other component restricts any changes to it

Within a react application, I am fetching data (an array of objects with two key-value pairs per object) in a parent component and passing this data down to two pureComponent children in props. Interestingly, when I perform any data manipulation, such as a ...