How to Format and Display Json Data Using Array.Map in Reactjs

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



Leave a reply



Submit