[英]How can I extract exactly 2 keys and values from several objects in an array
我有这个 json 文件
artist:[
{artist: "Henry", Year :"XYZ", album: "ABC", image: "image.jpg"}
{artist: "Lisa", Year :"1998", album: "All the time", image: "image.jpg"}
{artist: "David", Year :"2001", album: "Lets go", image: "image.jpg"}
{artist: "James", Year :"1997", album: "Memories", image: "image.jpg"}
{artist: "Julia", Year :"2002", album: "Technology", image: "image.jpg"}
{artist: "Bob", Year :"1995", album: "Chill 5", image: "image.jpg"}
{artist: "Frank", Year :"1996", album: "DeadRat", image: "image.jpg"}
]
我想提取艺术家,专辑和图像并将其动态放在网站上。 我怎样才能做到这一点?
你可以这样做:
const artist=[ {artist: "Henry", Year :"XYZ", album: "ABC", image: "image.jpg"}, {artist: "Lisa", Year :"1998", album: "All the time", image: "image.jpg"}, {artist: "David", Year :"2001", album: "Lets go", image: "image.jpg"}, {artist: "James", Year :"1997", album: "Memories", image: "image.jpg"}, {artist: "Julia", Year :"2002", album: "Technology", image: "image.jpg"}, {artist: "Bob", Year :"1995", album: "Chill 5", image: "image.jpg"}, {artist: "Frank", Year :"1996", album: "DeadRat", image: "image.jpg"} ] var arr = artist.map(x=>{return {artist:x.artist,album:x.album,image:x.image}}) console.log(arr)
})
为了在 React 应用程序上显示您的数据,您可以按照此代码
function App() {
const artist = [
{ artist: "Henry", Year: "XYZ", album: "ABC", image: "image.jpg" },
{ artist: "Lisa", Year: "1998", album: "All the time", image: "image.jpg" },
{ artist: "David", Year: "2001", album: "Lets go", image: "image.jpg" },
{ artist: "James", Year: "1997", album: "Memories", image: "image.jpg" },
{ artist: "Julia", Year: "2002", album: "Technology", image: "image.jpg" },
{ artist: "Bob", Year: "1995", album: "Chill 5", image: "image.jpg" },
{ artist: "Frank", Year: "1996", album: "DeadRat", image: "image.jpg" }
];
var arr = artist.map(x => {
return { artist: x.artist, album: x.album, image: x.image };
});
return (
<div className="App">
{arr.map(x => {
return (
<div>
{x.album} : {x.artist}
<img alt="" src={x.src} />
</div>
);
})}
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.