如何在用flat()创建的数组数组上循环



我已经使用flat((将3个JSON文件组合成一个数组,然后在数组中循环以在控制台中输出其内容。它输出一个由以下3个JSON文件创建的数组数组。

这是控制台输出:

{books: Array(3)}books: (3) [{…}, {…}, {…}]__proto__: Object
{movies: Array(3)}movies: (3) [{…}, {…}, {…}]__proto__: Object
{posts: Array(3)}posts: (3) [{…}, {…}, {…}]__proto__: Object

我在遍历每个内部数组以访问它们的属性/值时遇到了问题。有人能帮忙吗?非常感谢。

这是我的密码。。。

JAVASCRIPT:

let finalResult;
const urls = ['books', 'movies', 'posts'];
Promise.all(
urls.map(url =>
fetch('json/' + url + '.json')
.then(e => e.json())
)
).then(data => {
finalResult = data.flat();
finalResult.forEach(array => {
console.log(array); // returns the array of arrays I want to loop through to get the property-values
});
});

books.json

{
"books": [
{
"title": "Eloquent JavaScript, Second Edition",
"description": "JavaScript lies at the heart of almost every modern web application, from social apps to the newest browser-based games. Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications."
},
{
"title": "Learning JavaScript Design Patterns",
"description": "With Learning JavaScript Design Patterns, you'll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you."
},
{
"title": "Speaking JavaScript",
"description": "Like it or not, JavaScript is everywhere these days-from browser to server to mobile-and now you, too, need to learn the language or dive deeper than you have. This concise book guides you into and through JavaScript, written by a veteran programmer who once found himself in the same position."
}
]
}

movies.json

{
"movies": [
{
"title": "History of the World Part I",
"description": "A 1981 American sketch comedy film written, produced, and directed by Mel Brooks. Brooks also stars in the film, playing five roles: Moses, Comicus the stand-up philosopher, Tomás de Torquemada, King Louis XVI, and Jacques, le garçon de pisse."
},
{
"title": "Jaws",
"description": "a 1975 American thriller film directed by Steven Spielberg, based on Peter Benchley's 1974 novel of the same name. In the film, a man-eating great white shark attacks beachgoers at a summer resort town, prompting police chief Martin Brody (Roy Scheider) to hunt it with the help of a marine biologist (Richard Dreyfuss) and a professional shark hunter (Robert Shaw). "
},
{
"title": "The Exorcist",
"description": "When a 12-year-old girl is possessed by a mysterious entity, her mother seeks the help of two priests to save her."
}
]
}

post.json

{
"posts": [
{
"title": "Done",
"description": "I can't take it anymore."
},
{
"title": "Finished",
"description": "The story of a young man who has finished his sandwich."
},
{
"title": "Concluded",
"description": "An epic take of a meeting that has conluded."
}
]
}

使用Object.entries和析构函数。

const finalResult = [{"books":[{"title":"Eloquent JavaScript, Second Edition","description":"JavaScript lies at the heart of almost every modern web application, from social apps to the newest browser-based games. Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications."},{"title":"Learning JavaScript Design Patterns","description":"With Learning JavaScript Design Patterns, you'll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you."},{"title":"Speaking JavaScript","description":"Like it or not, JavaScript is everywhere these days-from browser to server to mobile-and now you, too, need to learn the language or dive deeper than you have. This concise book guides you into and through JavaScript, written by a veteran programmer who once found himself in the same position."}]},
{"movies":[{"title":"History of the World Part I","description":"A 1981 American sketch comedy film written, produced, and directed by Mel Brooks. Brooks also stars in the film, playing five roles: Moses, Comicus the stand-up philosopher, Tomás de Torquemada, King Louis XVI, and Jacques, le garçon de pisse."},{"title":"Jaws","description":"a 1975 American thriller film directed by Steven Spielberg, based on Peter Benchley's 1974 novel of the same name. In the film, a man-eating great white shark attacks beachgoers at a summer resort town, prompting police chief Martin Brody (Roy Scheider) to hunt it with the help of a marine biologist (Richard Dreyfuss) and a professional shark hunter (Robert Shaw). "},{"title":"The Exorcist","description":"When a 12-year-old girl is possessed by a mysterious entity, her mother seeks the help of two priests to save her."}]},
{"posts":[{"title":"Done","description":"I can't take it anymore."},{"title":"Finished","description":"The story of a young man who has finished his sandwich."},{"title":"Concluded","description":"An epic take of a meeting that has conluded."}]}]
finalResult.forEach(obj => {
// destructure first entry key, value pair.
const [[type, array]] = Object.entries(obj);
console.log('-----------> Type: ', type);
array.forEach(item => console.log(item));
});

我不确定这是否正是您想要的,因为您没有指定确切的输出,但我认为您已经明白了如何做到这一点。

Object.entries/Object.keys/Object.values是您正在寻找的东西:

const books = {"books":[{"title":"Eloquent JavaScript, Second Edition","description":"JavaScript lies at the heart of almost every modern web application, from social apps to the newest browser-based games. Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications."},{"title":"Learning JavaScript Design Patterns","description":"With Learning JavaScript Design Patterns, you'll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you."},{"title":"Speaking JavaScript","description":"Like it or not, JavaScript is everywhere these days-from browser to server to mobile-and now you, too, need to learn the language or dive deeper than you have. This concise book guides you into and through JavaScript, written by a veteran programmer who once found himself in the same position."}]}
const movies = {"movies":[{"title":"History of the World Part I","description":"A 1981 American sketch comedy film written, produced, and directed by Mel Brooks. Brooks also stars in the film, playing five roles: Moses, Comicus the stand-up philosopher, Tomás de Torquemada, King Louis XVI, and Jacques, le garçon de pisse."},{"title":"Jaws","description":"a 1975 American thriller film directed by Steven Spielberg, based on Peter Benchley's 1974 novel of the same name. In the film, a man-eating great white shark attacks beachgoers at a summer resort town, prompting police chief Martin Brody (Roy Scheider) to hunt it with the help of a marine biologist (Richard Dreyfuss) and a professional shark hunter (Robert Shaw). "},{"title":"The Exorcist","description":"When a 12-year-old girl is possessed by a mysterious entity, her mother seeks the help of two priests to save her."}]}
const posts = {"posts":[{"title":"Done","description":"I can't take it anymore."},{"title":"Finished","description":"The story of a young man who has finished his sandwich."},{"title":"Concluded","description":"An epic take of a meeting that has conluded."}]}
const yourThen = (data) => {
const finalResult = data.map(e => Object.entries(e)).flat()
finalResult.forEach(([k, v]) => console.log(k, v))
return finalResult
}
yourThen([books, posts, movies])
.as-console-wrapper { max-height: 100% !important; top: 0; }

最新更新