In React Fullstack by Accomazzo book, in the first chapter they used seed.js as a data source. it has IIFE and they used window object to use it anywhere in the project. but when i created my own react project and followed along the codes it shows an error saying Seed is not defined no-undef
I have tried importing, including the js file in html file but those didn't seem to work
this is the app.js file
import React from 'react';
class PlayerList extends React.Component {
render() {
const player = Seed.players[0]
return (
<div className='ui unstackable items'>
<Player
id={player.id}
name={player.name}
club={player.club}
url={player.url}
votes={player.votes}
submitterAvatarUrl={player.submitterAvatarUrl}
playerImgUrl={player.playerImgUrl}
/>
</div>
)
}
}
this is the seed.js file
window.Seed = (function () {
function generateVoteCount() {
return Math.floor((Math.random() * 50) + 15);
}
const players = [
{
id: 1,
name: 'CR7',
club: 'Juventus',
url: '#',
votes: generateVoteCount(),
submitterAvatarUrl: 'images/avatars/profile-pic.jpeg',
playerImgUrl: 'images/players/CR7.jpg',
},
{
id: 2,
name: 'LM10',
club: 'Barcelona',
url: '#',
votes: generateVoteCount(),
submitterAvatarUrl: 'images/avatars/kristy.png',
playerImgUrl: 'images/players/LM10.jp',
},
{
id: 3,
name: 'MS10',
club: 'Liverpool',
url: '#',
votes: generateVoteCount(),
submitterAvatarUrl: 'images/avatars/veronika.jpg',
playerImgUrl: 'images/players/MS10.jpg',
},
];
return { players: players };
}());
Here you can find a working example, just import your seed file. Basically, you only need to import 'seed' and to avoid errors add window.Seed
https://codesandbox.io/s/stackoverflow-import-iife-5mojf
Related
I am trying to dynamically render images from a local folder within my project
The object structure looks like this
{
id: 2,
text: 'How would you describe your level of influence in management of the farm?',
type: 'cardChoice',
choices: [
{
id: 1,
text: 'I am the primary decision maker',
questionId: 'Hm?',
value: 'I am the primary decision maker',
image: '1.jpg',
},
{
id: 2,
text: 'I hent',
questionId: 'Hrm?',
value: 'I',
image: '2.jpg',
},
{
id: 3,
text: 'I arm',
questionId: '?',
value: 'Irm',
image: '3.jpg',
},
],
},
In my component I select the folder that contains the images const baseUrl = '../../assets/images/CNA'
After that, in my return I try to render the images
<img src={`${baseUrl}'${questionChoice.image}'`} alt={questionChoice.text} />
The page renders, but my image isn't loading and it's showing my alt instead
Heres my full component
const CardChoiceQuestions = ({ cardChoiceArray, currentAnswer, updateCurrent, submitAnswer }) => {
const { id, value } = currentAnswer
const baseUrl = '../../assets/images/CNA'
return (
<ButtonContainer>
{cardChoiceArray.map(questionChoice => {
return (
<Button
active={questionChoice.id === id}
type="button"
key={questionChoice.id}
onClick={() => {
const answer = { id: questionChoice.id, value: questionChoice.value }
updateCurrent(answer)
submitAnswer()
}}
>
<p>{questionChoice.text}</p>
<img src={`${baseUrl}${questionChoice.image}`} alt={questionChoice.text} />
</Button>
)
})}
</ButtonContainer>
)
}
I don't have my laptop in front of me but a few things I noticed. Do you need a slash "/" after your base url? Also, the string concatenation should be completed in one set of brackets after the $ sign. Not sure if that's the issue try a few console.log(string path) amd verify it is going where you think it is. It looks like the path may be wrong. You may be better off conditional rendering images as opposed to building a dynamic url but either way it should render on change.
<img src={`${baseUrl}/${questionChoice.image}`} alt={questionChoice.text} />
use like this
Leaving this here in case someone comes across this...
<img src={require(`../../assets/images/CNA/${questionChoice.image}`)} alt={questionChoice.text} />
Not sure why I can't use ${baseUrl} but this works for now.
Using React with TypeScript
Please could somebody provide an example of how I might be able to use a Kendo DataSource to read from a method which internally uses Axios to prod an external API for JSON data..? I must have flown through 20 different versions of this code trying different approaches, nothing seems to fit...
All I'm trying to do currently is supply a Kendo ComboBox with an array of {id: number, name: string}
Very basic stuff at the moment, but I do have to use a similar approach to this later on with a Kendo Grid which handles server side sorting and pagination so I'd like to get this working now then that should be somewhat easier later on...
The reason I want to use Axios is because I've written an api.ts file that appends appropriate headers on the gets and posts etc and also handles the errors nicely (i.e. when the auth is declined etc...)
A basic example of what I'm trying, which isn't working is this: -
public dataSource: any;
constructor(props: {}) {
super(props);
this.dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: function() {
return [{ id: 1, name: "Blah" }, { id: 2, name: "Thing" }];
}.bind(this)
},
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
});
}
<ComboBox
name="test"
dataSource={this.dataSource}
placeholder={this.placeholder}
dataValueField="id"
dataTextField="name"
/>
Anybody got any thoughts on this please? :)
Easy fix in the end...
this.dataSource = new kendo.data.DataSource({
transport: {
read: function(options: any) {
options.success([{ id: 1, name: "Blah" }, { id: 2, name: "Thing" }]);
}.bind(this)
},
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
});
2 things were wrong..
Removed the type: "odata",
and
Added the usage of options in
All working fine now with the async await function also, just passing the data into the options.success in the .then on the promise. Job done :-)
I am new to the Meteor and React Framework, and
I am trying to incorporate 'search' in meteor, and using the package easysearch for it. I am getting an error. The exact wordings of the error are as follows:
match.js:40 Uncaught
errorClass {message: "Match error: Expected particular constructor", path: "", sanitizedError: errorClass, errorType: "Match.Error", stack: "Error: Match error: Expected particular constructo…5a95662d577f9e8a17248e5683161da2f8b114da:3779:14)"}
errorType: "Match.Error"
message: "Match error: Expected particular constructor"
path: ""
I really cannot understand why this error is occurring and how to solve this. I am writing my code below, so that the error can be found exactly.
search.html (the blaze template for the search)
<template name="search">
<div id="search-wrap">
<div>Search page!</div>
<div class="black searchbar">
{{> EasySearch.Input index=index attributes=inputAttributes }}
</div>
{{#EasySearch.IfInputEmpty index=index }}
<div class="padded examples black">For example "Company 1"</div>
{{else}}
{{#if resultsCount}}
<div class="padded count-results black">{{resultsCount}} results found.</div>
{{/if}}
{{/EasySearch.IfInputEmpty}}
{{#EasySearch.IfSearching index=index }}
<div>Searching</div>
{{/EasySearch.IfSearching}}
<ol class="leaderboard">
{{#EasySearch.Each index=index }}
{{> User}}
{{/EasySearch.Each}}
</ol>
{{#EasySearch.IfNoResults index=index }}
<div class="padded no-results black">No results found</div>
{{else}}
{{/EasySearch.IfNoResults}}
{{> EasySearch.Pagination index=index maxPages=10 }}
{{! > EasySearch.LoadMore index=index}}
{{#if showMore}}
{{> EasySearch.Input name="mini-index" index=index attributes=inputAttributes }}
<ul>
{{#EasySearch.Each name="mini-index" index=index}}
<li>{{name}}</li>
{{/EasySearch.Each}}
</ul>
{{/if}}
<!-- Easy Search -->
</div>
<!-- End search -->
--></template>
<template name="User">
<li class="user black {{selected}}" id="user-link">
<span class="name">{{name}}</span>
</li>
</template>
The index.js file (Creating an index on the Collection - companies)
import Companies from "./companies.js";
import { EasySearch } from 'meteor/easy:search';
import { Meteor } from 'meteor/meteor';
import { Mongo } from "meteor/mongo";
export const CompaniesIndex = new EasySearch.Index({
engine: new EasySearch.MongoDB({
sort: function() {
//return based on the latest additions, newest on top
return { createdAt: -1 };
},
//something easy search always asks for
selector: function(searchObject, options, aggregation) {
let selector = this.defaultConfiguration().selector(searchObject, options, aggregation),
//to sort with category.
categoryFilter = options.search.props.categoryFilter;
//search with a category, not really sure what it does, using the easysearch docs.
if(_.isString(categoryFilter) && !_.isEmpty(categoryFilter)) {
selector.category = categoryFilter;
}
return selector;
}
}),
//collection name
collection: Companies,
//fieldname to be searched on
fields: ['name'],
defaultSearchOptions: {
//limit the results size to be 10
limit: 10
},
permission: () => {
return true;
}
});
// export const CompaniesIndex;
The jsx file (Company-search-trial.jsx)
import React from "react";
import Blaze from "meteor/gadicc:blaze-react-component";
import "./pages/search.html";
import Companies from "../api/data/companies.js";
import CompaniesIndex from "../api/data/index.js";
/* A set of controls for the user to select search queries and options.
* For use in the CompanySearchPage.
*/
Template.search.rendered = function() {
$("#search-link").addClass('selected');
$("#profile-link").removeClass('selected');
$("#rankings-link").removeClass('selected');
$("#jokes-link").removeClass('selected');
$("#login-link").removeClass('selected');
}
Template.search.helpers({
inputAttributes: function() {
return { 'class': 'easy-search-input', 'placeholder': 'Start Searching' };
},
players: function() {
return Companies.find({}, { sort: { createdAt: -1 } });
},
selectedName: function() {
var company = CompaniesIndex.config.mongoCollection.findOne({ __originalId: Session.get("selectedCompany") });
return company && company.Name;
},
index: function () {
return CompaniesIndex;
},
resultsCount: function() {
return CompaniesIndex.getComponentDict().get('count');
},
showMore: function() {
return false;
},
renderTmpl: () => Template.renderTemplate
});
Template.User.helpers({
selected: function() {
return Session.equals("selectedCompany", this.__originalId) ? "selected" : '';
},
});
Template.User.events({
'click': function() {
Session.set("selectedCompany", this.__originalId);
}
});
export default class CompanySearchTrial extends React.Component {
render() {
return (
<div className="page CompanySearchTrial">
<Blaze template="search"/>
</div>
);
}
}
Can someone please help me with this. I am really clueless, as to how to go about doing this. Thanks!
The error: Match error: Expected particular constructor" points to a likely cause of an invalid parameter to a function. It also gives us the pointer that it's a missing constructor that's the issue.
The two things in your code that use constructors (ie. are instantiated with new) are EasySearch.Index and EasySearch.MongoDBEngine.
Taking a quick look at the documentation for EasySearch, the correct way to import both of these classes is like so:
import { Index, MongoDBEngine } from 'meteor/easy:search'
// Client and Server
const index = new Index({
...
engine: new MongoDBEngine({
sort: () => { score: 1 },
}),
});
Give the above a go and see if it solves your issue
I have a component I'm going to use as a shell for multiple choice questions to load into. Here's how the component is set up so far
component
import { Component } from '#angular/core';
export class Answers{
id: string;
answer: string;
}
const answers: Answers[] = [
{
id: 'exp01q',
answer: 'Its fine as is.'
},
{
id: 'exp02q',
answer: 'I want to make minor adjustments.'
},
{
id: 'exp03q',
answer: 'I want to change my image'
},
{
id: 'exp04q',
answer: 'Ive never wanted to use a particular image until now.'
}
];
#Component({
moduleId: module.id,
selector: 'multi-radio-btn',
templateUrl: 'multi-rad-btn.component.html',
styleUrls: ['multi-rad-btn.component.css']
})
export class MultiRadioBtnShell {
question = 'How do you feel about your current image?';
id = 'exp-img-q';
name = 'exp-ques1';
ans = answers;
}
HTML Template
<h3>radio button shell</h3>
<div class="row justify-content-center">
<fieldset [attr.id]='id' class="card col-8 justify-content-center">
<label class="ques-title">
{{question}}
</label>
<div class="row answer-row-section justify-content-center">
<div *ngFor="let answers of ans" class="col col-12 answer-row justify-content-center">
<div class="col justify-content-center">
<input type="radio"
[attr.id]="answers.id"
[attr.name]="name"
[attr.value]="answers.answer" hidden />
<label [attr.for]="answers.id" class="col ques-ans-title" style="background-color: #4b73a0;">
{{answers.answer}}
</label>
</div>
</div>
</div>
</fieldset>
</div>
The reason it's set up like this now is because the way I was trying to do it at first wasn't working so I went to the Tour of Heroes tutorial to follow along with how they loaded all the heroes. The problem was coming from answer not being defined. So I rigged that part up the same way they did the heroes just for the sake of doing something I'm able to follow just to be sure I get the mechanics of how things load.
The original way I tried to do it was with this
// I had this right above the component
export class ExpQ{
question: string;
id: string;
name: string;
answers:[
{
id: string;
answer: string;
}
]
}
// I had this in the component's class
export const expq: ExpQ[] = [
{
question: 'How do you feel about your current image?',
id: 'exp-img-q',
name: 'exp-ques1',
answers:[
{
id: 'exp01q',
answer: 'Its fine as is.'
},
{
id: 'exp02q',
answer: 'I want to make minor adjustments.'
},
{
id: 'exp03q',
answer: 'I want to change my image'
},
{
id: 'exp04q',
answer: 'Ive never wanted to use a particular image until now.'
}
]
}
]
I was calling it in the html with
{{expq.question}}, {{expq.name}}, {{expq.answers.id}}, {{expq.answers.answer}}, etc.
at first with just loading the question it worked fine, but as I got to the answers: part it started breaking. I came across this https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol and seen the syntax for the addresses: part was pretty much the same as how I needed to structure my data. So I remade everything to resemble that. I still had no luck getting it to work.
Ultimately I'm going to be sending the questions through the parent component with #input and #output as well as a couple other tricks I came across. But before I can even think about that I need to get a handle on how to put the data all into one source so that it properly reads the nested bits of data. All the examples I come across are simple single tier bits of data, so I'm not sure on the syntax I need to use. How can I make this work?
You can define your model like so:
export interface Answer {
id: string;
answer: string;
}
export interface Question {
id: string;
name: string;
question: string;
answers: Answer[];
}
Then your component could have this to test
question1: Question = {
id: 'q1',
name: 'q1',
question: 'Does TypeScript rule?',
answers: [
{ id: 'a1', answer: 'Yes' },
{ id: 'a2', answer: 'Of Course' },
{ id: 'a3', answer: 'Duh' }
]
};
Of course the names don't have to be the same but I think this gives you a better idea of how to model nested data.
Then to display it you will need to iterate over nested structures. Look up the *ngFor directive. You will want to iterate over your answers in this case. Ex:
<div *ngFor="let answer of question1.answers">
{{answer.id}} - {{answer.answer}}
</div>
Need to flatten the objects,
Params :
Objects : at least n>0 array off JSON objects (dose not matter is circular)
target : {}
path : ""
Note : make sure the Objects Array passed in is n>0 at least
flatten(objects, target, path) {
let me = this;
let retArray = [];
for(let x=0; x < objects.length; x++) {
let object = objects[x];
path = path || '';
target={};
target = me.flattenHelper(object, target, path);
retArray.push(target);
}
return retArray;}
..
flattenHelper(object, target, path){
let me = this;
Object.keys(object).forEach(function (key) {
console.log("key : "+ key + " : object : " + (object[key] && typeof object[key] === 'object') + " path : " + path);
if (object[key] && typeof object[key] === 'object') {
me.flattenHelper(object[key], target, path + key);
}
target[path + key] = object[key];
console.log(target);
});
return target;}
Since I have begin to learn Angular 2 , I am following the basic concepts well. But when I tried running the below program, I don't get the values which is statically set in the code.
import { Component,Input } from '#angular/core';
export class Hero {
id: number;
name: string;
}
hero: Hero = {
id: 1,
name: 'Windstorm'
};
#Component({
selector: 'my-app',
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
})
export class AppComponent {
title = 'Tour of Heroes';
hero = 'Windstorm';
}
Can someone please point out where I am wrong, also can someone show how to debug the Angular code so that I can learn the framework well and try complex things out by self-learning and solve out basic issues by myself?
The output which I got
This should work
#Component({
selector: 'my-app',
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
})
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
With hero = 'Windowstorm'; {{hero.name}} is invalid because hero doesn't have a name property.
I'm sure your browser console show an error message. Please add such errors to future questions.