How to format and display JSON data using Array.map in Reactjs?
As per your model schema, your user object contains userName
and not name
, so you would write user.userName
in your displayUsers
method, Also a key param is helpful in performance optimisation and you should add a unique key on the element returned by the iterator
displayUsers(){
return this.state.userList.map( user => {
return(
<div className="item-card" key={user.id}>
<div className="info">
<div className="username">Username: {user.userName}</div>
</div>
<div className="del-wrap">
<img src={require("../../images/cancel.svg")}/>
</div>
</div>
);
})
}
How to print JSON data with map in array React component
I assume that import { projects } from '../../data'
is something like this:
export const data = {
projects: [
{
title: "Project title 1",
category: "frontend development",
description: "",
desktop: [],
mobile: []
}
]
};
So when you map this object, you need to reference to the projects
property like this data.projects.map()
.
Example:
data.js
export const data = {
projects: [
{
title: "Project title 1",
category: "frontend development",
description: "",
desktop: [],
mobile: []
},
{
title: "Project title 2",
category: "frontend development",
description: "",
desktop: [],
mobile: []
}
]
};
App.js
import React from "react";
import { data } from "./data";
export default function App() {
return (
<div>
{data.projects.map((project, key) => {
return <p key={key}>{project.title}</p>;
})}
</div>
);
}
I created codesandbox too.
How to map a JSON array to a List in ReactJS?
I see a few problems here, hopefully I will be able to address them all.
1) I mentioned this in the comments, but it doesn't look like you understand what .map()
is supposed to do. Here's a reference.
tl;dr: Calling .map()
on an iterable object and passing a function to be executed on each item will return a collection of the return values of that function.
As an example, consider an array with a few names ['Michael', 'Brian', 'John']
. I can call .map()
on this array and use it to return an array of strings that say "hello" to everyone in the list:
var names = ['Michael', 'Brian', 'John'];
var sayHello = names.map(function (name) {
return 'Hello, ' + name;
});
console.log(sayHello); // ['Hello, Michael', 'Hello, Brian', 'Hello, John'];
This can be used in React to perform logic that looks something like "Given some names, return some React components that represent the markup for those names".
2) The JSON data you have linked is an array of objects, each with their own name
property. It looks like you're using jQuery to fetch this and save the result in this.state.data
. This means that this.state.data
is an array. So if you try to do this.state.data.names.map()
, it's going to fail, because this.state.data.names
is undefined. You'll want to do this.state.data.map()
instead.
3) Inside of JSX, you can perform JavaScript expressions/statements as long as they're within curly braces {}
. It doesn't look like you're doing that.
4) Your call to .map()
is on this.props.data
, I think you want to do this.state.data
instead.
This is everything I saw that should be fixed or improved before this starts working as you expect it to. If it were me, I'd keep your .map()
call inside of the <List />
that you're trying to render to:
<List selectable={true} selected={0}>
{
this.state.data.map(function (person) {
return (
<ListItem justify="between">
<span>{person.name}</span>
</ListItem>
);
})
}
</List>
Or perhaps a cleaner solution would be to pull this logic out to its own helper function. But that isn't necessary for this to work.
Edit: Here's a demo
How to map JSON data with array in React component
You can use the length
property of the array to determine if the array is empty or not.
const emptyArray = [];
const notEmptyArray = [1,2,3];
console.log(!emptyArray.length); // => true;
console.log(!notEmptyArray.length); // => false;
How to map this data to a json array within React?
Array#map
returns an array, therefore you do not have to enclose it within square brackets.
Amend your code as follows:
if (this.state.coreversions) {
var options = this.state.coreversions.map(
versions => ({value: versions, label: versions})
);
}
// simplified this.state.coreversions to just coreversions// only for the purposes of this snippetvar coreversions = ["1.6.3","1.6.4","1.6.5","1.6.6","1.7.0","1.7.2"];
if (coreversions) { var options = coreversions.map( versions => ({value: versions, label: versions}) );}
console.log(options);
// logs out an array of objects:// [// { value: '1.6.3', label: '1.6.3' },// { value: '1.6.4', label: '1.6.4' },// { value: '1.6.5', label: '1.6.5' },// { value: '1.6.6', label: '1.6.6' },// { value: '1.7.0', label: '1.7.0' },// { value: '1.7.2', label: '1.7.2' }// ]
JSON format leads to .map is not a function
This is because posts
is a JSON object and not an array that you can use the map()
function with. Instead, you need to give the array to the map()
function before you can pull out the titles.
To access the array of the JSON object, you can use posts['data']
.
export default function Home({ posts }) {
return (
<div>
{posts &&
posts["data"].map((post) => (
<div key={post.id}>
<h2>{post.attributes.title}</h2>
</div>
))}
</div>
);
}
How to map JSON data in react js?
You must export default react components. I got it working in a sandbox (link), by changing this line
ReactDOM.render(<App />, document.getElementById("app"));
to this
export default App;
Related Topics
How to Get the Ajax Response from Success and Assign It in a Variable Using Jquery
Javascript Generate Video Thumbnail from Video Url
How to Remove a Json Inside a Json by a Key Using Jquery
Uncheck a Checkbox and Another Checkbox Will Untick
Reduce the Build Time in a Large Angular 8
Converting User Input String to Regular Expression
Generate Child Row Under a Parent Row in HTML Table
Ng2-Smart-Table Bind 'Add New' Button Event to an External Button
How to Get the Difference Between Two Arrays of Objects in JavaScript
How to Validate Mobile Number for Countries in Angular
Stop Just One Dropdown Toggle from Closing on Click
Html5 and JavaScript to Play Videos Only When Visible
Best Way to Show a Loading Spinner/Gif While My React Component Is Fetching Via Ajax
How to Format Numbers in Vuejs
Filtering Item from Nested Object Array in Typescript
Stop Chrome Back/Forward Two Finger Swipe
Connecting to Tcp Socket from Browser Using JavaScript
How to Prevent iOS Keyboard from Pushing the View Off Screen With CSS or Js