javascript - 如何从数组中的多个对象中准确提取 2 个键和值

Question

我有这个 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"}
]

我想提取艺术家、专辑和图像并将其动态地放在网站上。我怎样才能做到这一点？

Answer 1

你可以这样做:

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应用程序上显示您的数据，您可以关注this Code

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>
  );
}