ReactJS export excel with xlxs-populate nested array of object how - javascript

I'm looking for a way to export excel file for nested array of object using xlxs-populate library, language is reactjs. I don't see this get mention in the official document, i make sure to check thoroughly (or perhap i'm missing please be kindly leave a comment), or perhap this feature hasn't been implemented yet? I'm looking forward for your insight. For an easier depiction, here's how the data should look like:
[
{
title: "title1",
content: [
{
imageUrl: "http://placehold.it/300x300",
title: "Campaigns",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Events",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "General",
description:
"Short description explaining the use of this design in a single sentence."
}
]
},
{
title: "title2",
content: [
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description:
"Short description explaining the use of this design in a single sentence."
}
]
}
];

Related

Is there a way to format a JavaScript object logged to console in vscodes integrated git bash terminal?

I'm currently working with a an object and loading it into the terminal console with console.log(books)
The code for the object is this.
const books = [
{
id:1,
name: "Harry Potter and the Chamber of Secrets",
authorId: 1
},
{
id: 2,
name: "Harry Potter and the Prisoner of Azkaban",
authorId: 1
},
{
id: 3,
name: "Harry Potter and the Goblet of Fire",
authorId: 1
},
{
id: 4,
name: "The Fellowship of the Ring",
authorId: 2
},
{
id: 5,
name: "The Two Towers",
authorId: 2
},
{
id: 6,
name: "The Return of the King",
authorId: 2
},
{
id: 7,
name: "The Way of Shadows",
authorId: 3
},
{
id: 8,
name: "Beyond the Shadows",
authorId: 3
},
];
It's quite a small problem, but I've noticed that not all of the information is displayed consistently when I log to console. Is this a problem with the git bash terminal or the integration between vscode and git bash and is there anything that can be done to make the presentation more consistent? It's a bit jarring.
I've tried looking for resources on this issue and haven't found anything similar. Would be great to get ideas as even if it's a small thing, when looking through larger data sets, it would be nice to know it will be formatted consistently.
I found a great answer to this on Handy Tips on Using Console Log
You can use Stringify to structure big objects and create consistent formatting.
If I type the following it formats nicely.
console.log(JSON.stringify(books, null, 2))

JS - How to populate an array with objects from another greater object

I am traying to populate an array "array1" with objects with format {a:'value', b:'value'} that come from a greater objet "objPractice", (could be a json). I don't know what I am doing wrong but I get an array with objects all equals corresponding just with the last element of the original object. I need all of them, not just the last one.
This is the code:
let objPractice = {
books: [
{
isbn: "9781449325862",
title: "Git Pocket Guide",
subtitle: "A Working Introduction",
author: "Richard E. Silverman",
publish_date: "2020-06-04T08:48:39.000Z",
publisher: "O'Reilly Media",
pages: 234,
description: "This pocket guide is the perfect on-the-job companion to Git, the distributed version control system. It provides a compact, readable introduction to Git for new users, as well as a reference to common commands and procedures for those of you with Git exp",
website: "http://chimera.labs.oreilly.com/books/1230000000561/index.html"
},
{
isbn: "9781449331818",
title: "Learning JavaScript Design Patterns",
subtitle: "A JavaScript and jQuery Developer's Guide",
author: "Addy Osmani",
publish_date: "2020-06-04T09:11:40.000Z",
publisher: "O'Reilly Media",
pages: 254,
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-da",
website: "http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/"
},
{
isbn: "9781449337711",
title: "Designing Evolvable Web APIs with ASP.NET",
subtitle: "Harnessing the Power of the Web",
author: "Glenn Block et al.",
publish_date: "2020-06-04T09:12:43.000Z",
publisher: "O'Reilly Media",
pages: 238,
description: "Design and build Web APIs for a broad range of clients—including browsers and mobile devices—that can adapt to change over time. This practical, hands-on guide takes you through the theory and tools you need to build evolvable HTTP services with Microsoft",
website: "http://chimera.labs.oreilly.com/books/1234000001708/index.html"
},
{
isbn: "9781449365035",
title: "Speaking JavaScript",
subtitle: "An In-Depth Guide for Programmers",
author: "Axel Rauschmayer",
publish_date: "2014-02-01T00:00:00.000Z",
publisher: "O'Reilly Media",
pages: 460,
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 o",
website: "http://speakingjs.com/"
},
{
isbn: "9781491904244",
title: "You Don't Know JS",
subtitle: "ES6 & Beyond",
author: "Kyle Simpson",
publish_date: "2015-12-27T00:00:00.000Z",
publisher: "O'Reilly Media",
pages: 278,
description: "No matter how much experience you have with JavaScript, odds are you don’t fully understand the language. As part of the \\\"You Don’t Know JS\\\" series, this compact guide focuses on new features available in ECMAScript 6 (ES6), the latest version of the st",
website: "https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20&%20beyond"
},
{
isbn: "9781491950296",
title: "Programming JavaScript Applications",
subtitle: "Robust Web Architecture with Node, HTML5, and Modern JS Libraries",
author: "Eric Elliott",
publish_date: "2014-07-01T00:00:00.000Z",
publisher: "O'Reilly Media",
pages: 254,
description: "Take advantage of JavaScript's power to build robust web-scale or enterprise applications that are easy to extend and maintain. By applying the design patterns outlined in this practical book, experienced JavaScript developers will learn how to write flex",
website: "http://chimera.labs.oreilly.com/books/1234000000262/index.html"
},
{
isbn: "9781593275846",
title: "Eloquent JavaScript, Second Edition",
subtitle: "A Modern Introduction to Programming",
author: "Marijn Haverbeke",
publish_date: "2014-12-14T00:00:00.000Z",
publisher: "No Starch Press",
pages: 472,
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 ",
website: "http://eloquentjavascript.net/"
},
{
isbn: "9781593277574",
title: "Understanding ECMAScript 6",
subtitle: "The Definitive Guide for JavaScript Developers",
author: "Nicholas C. Zakas",
publish_date: "2016-09-03T00:00:00.000Z",
publisher: "No Starch Press",
pages: 352,
description: "ECMAScript 6 represents the biggest update to the core of JavaScript in the history of the language. In Understanding ECMAScript 6, expert developer Nicholas C. Zakas provides a complete guide to the object types, syntax, and other exciting changes that E",
website: "https://leanpub.com/understandinges6/read"
}
]}
And here is the code to populate the new array "array1"
let obj1 = { isbn: "", title: "" }
let array1 = []
for (var i=0; i < objPractica.books.length - 1; i++) {
obj1.isbn = objPractica.books[i].isbn
obj1.title = objPractica.books[i].title
array1.push(obj1)
}
console.log("The array [] that contains object with format {a:'value', b:'value'} is: ", array1)
But these is the result that I am getting:
The array [] that contains object with format {a:'value', b:'value'} is: [
{
isbn: '9781593275846',
title: 'Eloquent JavaScript, Second Edition'
},
{
isbn: '9781593275846',
title: 'Eloquent JavaScript, Second Edition'
},
{
isbn: '9781593275846',
title: 'Eloquent JavaScript, Second Edition'
},
{
isbn: '9781593275846',
title: 'Eloquent JavaScript, Second Edition'
},
{
isbn: '9781593275846',
title: 'Eloquent JavaScript, Second Edition'
},
{
isbn: '9781593275846',
title: 'Eloquent JavaScript, Second Edition'
},
{
isbn: '9781593275846',
title: 'Eloquent JavaScript, Second Edition'
}
]
As you can see, I just get only the last element from the original object. Why is that?
This is a fun learning experience about object references (see this article for some short reading). Follow my comments in this code snippet:
// You are creating an object here:
let obj1 = { isbn: "", title: "" }
let array1 = []
for (var i=0; i < objPractice.books.length - 1; i++) {
// You are changing properties on the _existing_ object "obj1" here:
obj1.isbn = objPractice.books[i].isbn
obj1.title = objPractice.books[i].title
// You are pushing another copy of "obj1" into the array.
array1.push(obj1)
}
You are not creating a new object in each iteration of your for loop. You are just changing the properties on the existing object (obj1) and adding another copy of it to your array.
How about this:
for (var i=0; i < objPractice.books.length - 1; i++) {
array1.push({
isbn: objPractice.books[i].isbn,
title: objPractice.books[i].title
})
}
or even better still, use some of the helpful Array prototype methods like map to make this even simpler:
const array1 = objPractice.books.map(book => ({
isbn: book.isbn,
title: book.title
}))

Filter array by tag Vuejs

I'm currently working with vuejs and vuex. Here is my issue :
I have a store with all the data
state: {
articles: [{
title: "Article 1",
id: 1,
tag: "Tutorial"
}, {
title: "Article 2",
id: 2,
description: "Article 2",
tag: "Review"
}
}]
}
On the homepage, I want to display all kind of articles. On the tutorial page I only want to display articles with tag "tutorial", etc...
I'm using vue-router. I'm working with a computed property and a v-for so I can loop in the articles.
computed: {
articles() {
if (this.$route.meta.title == 'Tutorial') {
return this.$store.state.articles.tag == 'Tutorial'
}
if (this.$route.meta.title == 'Review') {
return this.$store.state.articles.tag == 'Review'
}
else if (this.$route.meta.title == 'Home') {
return this.$store.state.articles
}
}
}
I know that return this.$store.state.articles.tag == 'Tutorial' can't work, I'm looking for a way to code it correctly but I'm stuck!
Also, if you have a completely different and better way to do it, feel free to tell me!
Thank you for your time :)
As everybody mentioned you will need to use filter but as a pattern you should structure it with vuex getters
when you access properties from vuex state do not to access them directly but the correct thing is to use getters
Vuex store e.x.
const store = new Vuex.Store({
state: {
articles: [
{
title: "Article 1",
id: 1,
tag: "Tutorial"
},
{
title: "Article 2",
id: 2,
description: "Article 2",
tag: "Review"
}
]
},
getters: {
allArticles: state => {
return state.articles
},
tutorialArticles: state=>{
return state.articles.filter(article=>articles.tag=='Tutorial')
},
reviewArticles: state=>{
return state.articles.filter(articles=>articles.tag=='Review')
}
}
})
//end of vuex store
Then in your "all articles" component you use
computed:{
articles(){
return this.$store.getters.allArticles;
}
}
Then in your tutorial articles component you use
computed:{
articles(){
return this.$store.getters.tutorialArticles;
}
}
This is very important because if you need to change the code for the filter method you do it in one place and thats the purpose of using Vuex
Probably the best way is using .filter()
var obj = {state: {
articles: [{
title: "Article 1",
id: 1,
tag: "Tutorial"
}, {
title: "Article 2",
id: 2,
description: "Article 2",
tag: "Review"
}
]}}
var filtered = obj.state.articles.filter(o=>o.tag == "Tutorial");
console.log(filtered)

Map over nested array of objects in React

I am trying to map over array of objects which each array contains another nested array of objects. However, the map does not work on the nested array. How do I map over the contents of the nested array while keeping all the content under the same title of the parent object?
Fiddle: https://jsfiddle.net/69z2wepo/249197/
The data structure looks like:
[
{
title: "title1",
content: [
{
imageUrl: "http://placehold.it/300x300",
title: "Campaigns",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Events",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "General",
description:
"Short description explaining the use of this design in a single sentence."
}
]
},
{
title: "title2",
content: [
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description:
"Short description explaining the use of this design in a single sentence."
}
]
}
];
The map looks like
{dataItems.map((item, index) => {
return (
<h1>{item.title}</h1>
// for each item, loop over the content array objects
<img src={item.content.imageUrl} />
<h3>{item.content.title}</h3>
<h3>{item.content.description}</h3>
<hr />
);
})}
Since each element has a content array, you must map over content as well.
Example
{dataItems.map((item, index) => (
<div key={index}>
<h1>{item.title}</h1>
{item.content.map((c, i) => (
<div key={i}>
<img src={c.imageUrl} />
<h3>{c.title}</h3>
<h3>{c.description}</h3>
<hr />
</div>
))}
</div>
))}
This is a working example.
const dataItems = [{
title: "title1",
content: [{
imageUrl: "http://placehold.it/300x300",
title: "Campaigns",
description: "Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Events",
description: "Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "General",
description: "Short description explaining the use of this design in a single sentence."
}
]
},
{
title: "title2",
content: [{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description: "Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description: "Short description explaining the use of this design in a single sentence."
}
]
}
];
class App extends React.Component {
render() {
return <div>
{
dataItems.map((item, index) => {
return ( <div>
<h1>{item.title}</h1>
{ item.content.map((c, i) => <div>
<h3>{c.title}</h3>
<h3>{c.description}</h3>
</div>)}
</div>
)
})
}
</div>
}
}
ReactDOM.render( < App / > , document.getElementById('root'));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

How To Delete Mongo Object (nested 2 arrays down) without knowing its position?

I need to remove one of the 'answers' objects nested in the Doc below. I have the text of the answer I'm looking for. I don't have the index of the question OR the answer that I need to drill down into the arrays.
For example, I know that the text of the question I'm trying to drill down into is "This is a question." and the answer I want to delete is "Answer One".
How would you go about doing that?
Here's the sample MongoDB Doc:
(Quizzes have Questions; Questions have Answers)
{
name: "Sample Quiz",
categories: [
{ name: "testcategory1", description: "this is a test category" }
,{ name: "categoryTWO", description: "the second category" }
],
questions: [
{ text: "This is a question."
,answers: [
{text: "Answer One", affected_categories: "testcategory1"}
,{text: "Answer Two", affected_categories: "testcategory1"}
,{text: "Answer Three", affected_categories: "categoryTWO"}
]
}
,{ text: "This is the second question."
,answers: [
{text: "Mepho One", affected_categories: "testcategory1"}
,{text: "Answer Toodlydoo", affected_categories: "testcategory1"}
,{text: "Lehmen Sumtin", affected_categories: "categoryTWO"}
]
}
],
}
When I was deleting an item that was nested a single level down (in this case, a question), I was able to do it with a query like:
Quizzes.update(
{ _id: quizID, 'questions.text': questionText },
{ $pull: { questions: {text: questionText }}}
);
(as described here: http://docs.mongodb.org/manual/core/update/#Updating-ModifierOperations , in the section titled "Update an Element without Specifying Its Position")
I tried expanding that to something like:
Quizzes.update(
{ _id: quizID, 'answers.text': answerText },
{ $pull: { questions: {text: questionText {answers: {text: answerText }}}}}
);
but didn't have any luck.
Any ideas would be greatly appreciated.
Use the positional operator in combination with $pull condition:
> db.quizzes.update(
{_id:<quizID>, "questions.text":"This is the second question."},
{$pull:{ "questions.$.answers":{"text":"Answer Toodlydoo"}}}
);
The above works to remove the second answer from the second question.

Categories

Resources