We Keep Coding

Creating dynamic children of a JSON object from data source

I'm creating a plugin using this library to create an organizational chart for my application (built on bubble.io) that gets the data from the application and wants that data to get inside the structure i.e parent children dynamically. The number of children of any node can be dynamic and needs to be entered through a loop and recursive function.
I have tried to create a JSON object dynamically but could not succeed in creating a recursive function inside a loop that will keep making children programmatically.
I have got the first node from data_source (ibrar) but after that, I have a record of thousand, and a 'children_text' field( can be more than 1 entry) stores a unique ID of the parent. I can also add a parent field if the solution asks for that.
var len = properties.data_source.length();
var i;
var j;
let objj = {};
let hello = [];
let user = properties.data_source.get(0, len);
//extracting string properties from data_source
var name = user[0].get("name_text");
var title = user[0].get("designation_text");
var image = user[0].get("picture_image");
$(function() {
var styleTag = $(' <style> .orgchart { background: #fff; }.orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #aaa; } .orgchart td>.down { background-color: #aaa; } .orgchart .middle-level .title { -color: 699; }.orgchart .middle-level .content { border-color: #006699; }.orgchart .product-dept .title { background-color: #009933; } .orgchart .product-dept .content { border-color: #009933; } .orgchart .rd-dept .title { background-color: #993366; } .orgchart .rd-dept .content { border-color: #993366; } .orgchart .pipeline1 .title { background-color: #996633; } .orgchart .pipeline1 .content { border-color: #996633; } .orgchart .frontend1 .title { background-color: #cc0066; }.orgchart .frontend1 .content { border-color: #cc0066; } .orgchart .second-menu-icon { transition: opacity .5s; opacity: 0; right: -20px; top: 80px; transform: rotate(270deg); z-index: 2; position: relative; } .orgchart .second-menu-icon::before { background-color: rgba(68, 157, 68, 0.5); } .orgchart .second-menu-icon:hover::before { background-color: #449d44; } .orgchart .node:hover .second-menu-icon { opacity: 1; } .orgchart .node .second-menu { display: none; position: absolute; top: 110px; transform: scaleX(-1)rotate(90deg); right: -70px; border-radius: 35px; box-shadow: 0 0 10px 1px #999; background-color: #fff; z-index: 1; } .orgchart .node .second-menu .avatar { width: 60px; height: 60px; border-radius: 30px; float: left; margin: 5px; } </style>');
$('html > head').append(styleTag);
var datascource = {
'name': name,
'title': title,
'children': [{
'name': 'Bo Miao',
'title': 'department manager',
'className': 'middle-level',
'children': [{
'name': 'Li Jing',
'title': 'senior engineer',
'className': 'product-dept'
},
{
'name': 'Li Xin',
'title': 'senior engineer',
'className': 'product-dept',
'children': [{
'name': 'To To',
'title': 'engineer',
'className': 'pipeline1'
},
{
'name': 'Fei Fei',
'title': 'engineer',
'className': 'pipeline1'
},
{
'name': 'Xuan Xuan',
'title': 'engineer',
'className': 'pipeline1'
}
]
}
]
},
{
'name': 'Su Miao',
'title': 'department manager',
'className': 'middle-level',
'children': [{
'name': 'Pang Pang',
'title': 'senior engineer',
'className': 'rd-dept'
},
{
'name': 'Hei Hei',
'title': 'senior engineer',
'className': 'rd-dept',
'children': [{
'name': 'Xiang Xiang',
'title': 'UE engineer',
'className': 'frontend1'
},
{
'name': 'Dan Dan',
'title': 'engineer',
'className': 'frontend1'
},
{
'name': 'Zai Zai',
'title': 'engineer',
'className': 'frontend1'
}
]
}
]
}
]
};
$('#chart-container').orgchart({
'data': datascource,
'visibleLevel': 2,
'nodeContent': 'title',
'direction': 'l2r',
'nodeID': 'id',
'createNode': function($node, data) {
var secondMenuIcon = $('<i>', {
'class': 'oci oci-info-circle second-menu-icon',
click: function() {
$(this).siblings('.second-menu').toggle();
}
});
var secondMenu = '<div class="second-menu"><img class="avatar" src=' + image + '></div>';
$node.append(secondMenuIcon).append(secondMenu);
}
});
});

You can try to create it with Org Chart JS:
https://balkan.app/OrgChartJS/Docs/GettingStarted
Feel free to ask if you have any further questions.

How do I show the next and restart button at the bottom of each question?

Creating a Javascript quiz web app, how do I show the next and restart button at the bottom of each question? And why does my web app not allow the user to select the incorrect answer in the quiz answer options.
I am struggling to show my next and restart buttons so the quiz stays on the one question and my quiz now does not allow the user to select the wrong answer and I did Change the selectAnswer function to:
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
}
const startButton = document.getElementById("start-btn")
const nextButton = document.getElementById("next-btn")
const questionContainerElement = document.getElementById("question-container")
const questionElement = document.getElementById("question")
const answerButtonsElement = document.getElementById("answer-buttons")
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener("click", startGame)
function startGame() {
startButton.classList.add("hide")
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove("hide")
setNextQuestion()
}
function setNextQuestion() {
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
console.log(question);
questionElement.innerText = question.question
question.answers.forEach(answer => {
console.log(answer.text);
const button = document.createElement("button");
button.innerHTML = answer.text;
button.classList.add("btn");
if (answer.correct) {
button.dataset.correct = answer.correct;
button.addEventListener("click", selectAnswer);
answerButtonsElement.appendChild(button);
}
else{
answerButtonsElement.appendChild(button);
}
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add("hide")
while (answerButtonsElement.firstChild){
answerButtonsElements.removeChild
(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add("correct")
} else {
element.classList.add("wrong")
}
}
function clearStatusClass(element) {
element.classList.remove("correct")
element.classList.remove("wrong")
}
const questions = [
{
question: 'What language do they speak in Zimbabwe?',
answers: [
{ text: 'Shona', correct: true },
{ text: 'Spanish', correct: false }
]
},
{
question: 'Who is the President of Russia?',
answers: [
{ text: 'Juju', correct: false },
{ text: 'Putin', correct: true },
{ text: 'Hitler', correct: false },
{ text: 'Clint', correct: false }
]
},
{
question: 'What are the colours of the Jamaican flag?',
answers: [
{ text: 'Pink and White', correct: false },
{ text: 'Green, yellow, white and black', correct: true },
{ text: 'White, yellow and gold', correct: false },
{ text: 'Red', correct: false }
]
},
{
question: 'What is the Capital City of Germany ?',
answers: [
{ text: 'Belgium', correct: false },
{ text: 'Berlin', correct: true }
]
},
{
question: 'In which city is the Statue of Liberty?',
answers: [
{ text: 'Soweto', correct: false },
{ text: 'New York City', correct: true }
]
},
{
question: 'Which country has a unicorn as its national animal?',
answers: [
{ text: 'Finland', correct: false },
{ text: 'Scotland', correct: true },
{ text: 'Fairytopia', correct: false },
{ text: 'Narnia', correct: false }
]
},
{
question: 'Where is Nollywood?',
answers: [
{ text: 'Nairobi', correct: false },
{ text: 'Nigeria', correct: true },
{ text: 'Namibia', correct: false },
{ text: 'Nashville', correct: false }
]
},
{
question: 'Which country is home to the tallest building?',
answers: [
{ text: 'Singapore', correct: false },
{ text: 'UAE', correct: true },
{ text: 'China', correct: false },
{ text: 'France', correct: false }
]
},
{
question: 'Which is the largest country in the world?',
answers: [
{ text: 'China', correct: false },
{ text: 'Russia', correct: true },
{ text: 'Mexico', correct: false },
{ text: 'Nigeria', correct: false }
]
},
{
question: 'Who is the President of South Korea?',
answers: [
{ text: 'Son Heung-Min', correct: false },
{ text: 'Yoon Soek-Youl', correct: true },
{ text: 'Kim Nam-Joon', correct: false },
{ text: 'Kim Bok-Joo', correct: false }
]
},
]
*, *::before, *::after {
box-sizing: border-box;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-image: url("image.jpg");
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: var(--hue-wrong);
}
.container {
width: 500px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
display: inline-block;
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
transition: all 0.5s;
cursor: pointer;
}
.btn:hover {
border-color: black;
padding-right: 25px;
}
.btn.span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 00.5s;
}
.btn.span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.btn:hover.span{
padding-right: 25px;
}
.btn:hover span::after{
opacity: 1;
right: 0;
}
.btn.correct {
--hue: var(--hue-correct);
color: greenyellow;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
color: aquamarine;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="style.css" rel="stylesheet">
<script defer src="script.js"></script>
<title>Countries Quiz Web App</title>
</head>
<body>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid"></div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start Quiz</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
</div>
</body>
</html>

I passed through the following points to make a workable demo of your code:
You were missing the click event handlers on the buttons with the wrong answer prepared in showQuestion();
You were missing the click event handler on the next button (html);
I slightly changed the way setNextQuestion() so that it increments
the index;
I rule the visibility of the next button according to the event;
I clear the current answer shown when you click on the next button;
Of course there are some minor side effects.. like the fact it could be better factored around your existing logic, anyway it was enough for the whole game to be correctly working now:
const startButton = document.getElementById("start-btn")
const nextButton = document.getElementById("next-btn")
const questionContainerElement = document.getElementById("question-container")
const questionElement = document.getElementById("question")
const answerButtonsElement = document.getElementById("answer-buttons")
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener("click", startGame)
function startGame() {
startButton.classList.add("hide")
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove("hide")
setNextQuestion()
}
function setNextQuestion() {
currentQuestionIndex++;
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
console.log(question);
questionElement.innerText = question.question
question.answers.forEach(answer => {
console.log(answer.text);
const button = document.createElement("button");
button.innerHTML = answer.text;
button.classList.add("btn");
if (answer.correct) {
button.dataset.correct = answer.correct;
button.addEventListener("click", selectAnswer);
answerButtonsElement.appendChild(button);
} else {
button.addEventListener("click", selectAnswer);
answerButtonsElement.appendChild(button);
}
})
document.querySelector('#next-btn').classList.add('hide');
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add("hide")
while (answerButtonsElement.firstChild) {
answerButtonsElements.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
document.querySelector('#next-btn').classList.remove('hide');
}
function clearCurrentAnswer(){
document.querySelector('#answer-buttons').innerHTML = '';
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add("correct")
} else {
element.classList.add("wrong")
}
}
function clearStatusClass(element) {
element.classList.remove("correct")
element.classList.remove("wrong")
}
const questions = [{
question: 'What language do they speak in Zimbabwe?',
answers: [{
text: 'Shona',
correct: true
},
{
text: 'Spanish',
correct: false
}
]
},
{
question: 'Who is the President of Russia?',
answers: [{
text: 'Juju',
correct: false
},
{
text: 'Putin',
correct: true
},
{
text: 'Hitler',
correct: false
},
{
text: 'Clint',
correct: false
}
]
},
{
question: 'What are the colours of the Jamaican flag?',
answers: [{
text: 'Pink and White',
correct: false
},
{
text: 'Green, yellow, white and black',
correct: true
},
{
text: 'White, yellow and gold',
correct: false
},
{
text: 'Red',
correct: false
}
]
},
{
question: 'What is the Capital City of Germany ?',
answers: [{
text: 'Belgium',
correct: false
},
{
text: 'Berlin',
correct: true
}
]
},
{
question: 'In which city is the Statue of Liberty?',
answers: [{
text: 'Soweto',
correct: false
},
{
text: 'New York City',
correct: true
}
]
},
{
question: 'Which country has a unicorn as its national animal?',
answers: [{
text: 'Finland',
correct: false
},
{
text: 'Scotland',
correct: true
},
{
text: 'Fairytopia',
correct: false
},
{
text: 'Narnia',
correct: false
}
]
},
{
question: 'Where is Nollywood?',
answers: [{
text: 'Nairobi',
correct: false
},
{
text: 'Nigeria',
correct: true
},
{
text: 'Namibia',
correct: false
},
{
text: 'Nashville',
correct: false
}
]
},
{
question: 'Which country is home to the tallest building?',
answers: [{
text: 'Singapore',
correct: false
},
{
text: 'UAE',
correct: true
},
{
text: 'China',
correct: false
},
{
text: 'France',
correct: false
}
]
},
{
question: 'Which is the largest country in the world?',
answers: [{
text: 'China',
correct: false
},
{
text: 'Russia',
correct: true
},
{
text: 'Mexico',
correct: false
},
{
text: 'Nigeria',
correct: false
}
]
},
{
question: 'Who is the President of South Korea?',
answers: [{
text: 'Son Heung-Min',
correct: false
},
{
text: 'Yoon Soek-Youl',
correct: true
},
{
text: 'Kim Nam-Joon',
correct: false
},
{
text: 'Kim Bok-Joo',
correct: false
}
]
},
]
*,
*::before,
*::after {
box-sizing: border-box;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-image: url("image.jpg");
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: var(--hue-wrong);
}
.container {
width: 500px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
display: inline-block;
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
transition: all 0.5s;
cursor: pointer;
}
.btn:hover {
border-color: black;
padding-right: 25px;
}
.btn.span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 00.5s;
}
.btn.span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.btn:hover.span {
padding-right: 25px;
}
.btn:hover span::after {
opacity: 1;
right: 0;
}
.btn.correct {
--hue: var(--hue-correct);
color: greenyellow;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.start-btn,
.next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
color: aquamarine;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="style.css" rel="stylesheet">
<script defer src="script.js"></script>
<title>Countries Quiz Web App</title>
</head>
<body>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid"></div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start Quiz</button>
<button id="next-btn" class="next-btn btn hide" onclick="clearCurrentAnswer();setNextQuestion()">Next</button>
</div>
</body>
</html>

Getting an unexpected token error in React

This is my first time using react and I have somewhat limited experience with javascript in general. Trying to adapt a project I found on codepen for my project. The idea being creating a dynamic graded quiz that returns some output if a user selects the wrong answer.
This is what I have as my html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'second/css/app/quiz_control.css' %}">
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="{% static 'second/js/app/quiz_control.js' %}" defer></script>
</head>
<main class="container">
<section id="riots-to-renaissance">
</section>
</main>
</html>
javascript:
const RawHTML = (props) => <span dangerouslySetInnerHTML={{__html: props.html}}></span>;
class QuestionImage extends React.Component {
constructor(props) {
super(props);
this.imgRef = React.createRef();
}
componentDidUpdate(prevProps, prevState) {
if (this.imgRef.current && prevProps.img.src !== this.props.img.src) {
this.imgRef.current.classList.add('fade-in');
let timer = setTimeout(() => {
this.imgRef.current.classList.remove('fade-in');
clearTimeout(timer);
}, 1000)
}
}
render() {
return (
<img ref={this.imgRef} className="img-fluid" src={this.props.img.src} alt={this.props.img.alt} />
);
}
}
const QuizProgress = (props) => {
return (
<div className="progress">
<p className="counter">
<span>Question {props.currentQuestion+1} of {props.questionLength}</span>
</p>
<div className="progress-bar" style={{'width': ((props.currentQuestion+1) / props.questionLength) * 100 + '%'}}></div>
</div>
);
}
const Results = (props) => {
return (
<div className="results fade-in">
<h1>Your score: {((props.correct/props.questionLength) * 100).toFixed()}%</h1>
<button type="button" onClick={props.startOver}>Try again <i className="fas fa-redo"></i></button>
</div>
);
}
class Quiz extends React.Component {
constructor(props) {
super(props);
this.updateAnswer = this.updateAnswer.bind(this);
this.checkAnswer = this.checkAnswer.bind(this);
this.nextQuestion = this.nextQuestion.bind(this);
this.getResults = this.getResults.bind(this);
this.startOver = this.startOver.bind(this);
this.state = {
currentQuestion: 0,
correct: 0,
inProgress: true,
questions: [{
question: "<em>A Raisin in the Sun</em> was the first play by an African-American woman to be produced on Broadway. Who was the playwright?",
options: [{
option: "Lorraine Hansberry",
correct: true
}, {
option: "Maya Angelou",
correct: false
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable-to-obama_raisin-in-the-sun.jpg',
alt: 'Characters in A Raisin in the Sun'
},
feedback: "Lorraine Hansberry's (1930–1965) play opened in 1959 to critical acclaim and was a huge success. The play is about a black family who faces racism when moving into an all-white suburb. The play is drawn from a similar experience in Hansberry’s early life.",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/hansberrys-victory'
}, {
question: "The internationally famous Harlem Globetrotters basketball team started with players from which Chicago High School?",
options: [{
option: "Wendell Phillips High School",
correct: true
}, {
option: "DuSable High School",
correct: false
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable/riots_renaissance_thumb_5.jpg',
alt: 'A Harlem Globetrotter holding a basketball in each hand'
},
feedback: "The athletes who would become Harlem Globetrotters first played together as students at Wendell Phillips High School on the south side of Chicago. Later, they played as a team under the banner of the South Side's Giles Post of the American Legion and then as the Savoy Big Five before taking on their current name. The team was based in Chicago for 50 years, from 1926 through 1976.",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/harlem-globetrotters'
}, {
question: "What Chicagoan is known as the father of Gospel Music?",
options: [{
option: "Thomas A. Dorsey",
correct: true
}, {
option: "Langston Hughes",
correct: false
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable-to-obama_thomas-dorsey.jpg',
alt: 'Thomas Andrew Dorsey'
},
feedback: "Some.",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/dorseys-gospel'
}, {
question: "Which of these African-American women ran for the office of president of the United States?",
options: [{
option: "All of the above",
correct: true
}, {
option: "None of the above",
correct: false
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable/achieving_dream_thumb_9.jpg',
alt: 'Carol Moseley-Braun'
},
feedback: "more text.\"",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/carol-moseley-braun'
}, {
question: "Who was Oscar Stanton De Priest?",
options: [{
option: "The first Catholic priest in Chicago",
correct: false
}, {
option: "A United States congressman",
correct: true
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable-to-obama_oscar-stanton-de-priest.jpg',
alt: 'Oscar Stanton De Priest'
},
feedback: "Text again.",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/carol-moseley-braun'
}, {
question: "What musical artist was part of Chicago's Black Renaissance?",
options: [{
option: "Louis Armstrong",
correct: false
}, {
option: "Nat \"King\" Cole",
correct: true
}, {
option: "Curtis Mayfield",
correct: false
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable-to-obama_nat-king-cole.jpg',
alt: 'Nat King Cole'
},
feedback: "Long text.",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/dorseys-gospel'
}, {
question: "Gwendolyn Brooks was:",
options: [{
option: "the first black woman to win a Pulitzer Prize in poetry.",
correct: false
}, {
option: "all of the above",
correct: true
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable-to-obama_gwendolyn-brooks.jpg',
alt: 'Gwendolyn Brooks'
},
feedback: "Gwendolyn Brooks (1917–2000) is a jewel in Chicago’s literary history. She was a writer best known for her poetry describing life in the South Side community in which she lived."
}]
}
}
updateAnswer(e) {
//record whether the question was answered correctly
let answerValue = e.target.value;
this.setState((prevState, props) => {
let stateToUpdate = prevState.questions;
//convert boolean string to boolean with JSON.parse()
stateToUpdate[prevState.currentQuestion].answerCorrect = JSON.parse(answerValue);
return {questions: stateToUpdate};
});
}
checkAnswer(e) {
//display to the user whether their answer is correct
this.setState((prevState, props) => {
let stateToUpdate = prevState.questions;
stateToUpdate[prevState.currentQuestion].checked = true;
return {questions: stateToUpdate};
});
}
nextQuestion(e) {
//advance to the next question
this.setState((prevState, props) => {
let stateToUpdate = prevState.currentQuestion;
return {currentQuestion: stateToUpdate+1};
}, () => {
this.radioRef.current.reset();
});
}
getResults() {
//loop through questions and calculate the number right
let correct = this.state.correct;
this.state.questions.forEach((item, index) => {
if (item.answerCorrect) {
++correct;
}
if (index === (this.state.questions.length-1)) {
this.setState({
correct: correct,
inProgress: false
});
}
});
}
startOver() {
//reset form and state back to its original value
this.setState((prevState, props) => {
let questionsToUpdate = prevState.questions;
questionsToUpdate.forEach(item => {
//clear answers from previous state
delete item.answerCorrect;
delete item.checked;
});
return {
inProgress: true,
correct: 0,
currentQuestion: 0,
questions: questionsToUpdate
}
});
}
componentDidMount() {
//since we're re-using the same form across questions,
//create a ref to it so we can clear its state after a question is answered
this.radioRef = React.createRef();
}
render() {
if (!this.state.inProgress) {
return (
<section className="quiz">
<Results correct={this.state.correct} questionLength={this.state.questions.length} startOver={this.startOver} />
</section>
);
}
return (
<section className="quiz fade-in" aria-live="polite">
<QuizProgress currentQuestion={this.state.currentQuestion} questionLength={this.state.questions.length} />
<div className="question-container">
{this.state.questions[this.state.currentQuestion].img.src &&
<QuestionImage img={this.state.questions[this.state.currentQuestion].img} />
}
<p className="question"><RawHTML html={this.state.questions[this.state.currentQuestion].question} /></p>
<form ref={this.radioRef}>
{this.state.questions[this.state.currentQuestion].options.map((item, index) => {
return <div key={index}
className={"option" + (this.state.questions[this.state.currentQuestion].checked && !item.correct ? ' dim' : '') + (this.state.questions[this.state.currentQuestion].checked && item.correct ? ' correct' : '')}>
<input id={"radio-"+index} onClick={this.updateAnswer} type="radio" name="option" value={item.correct}
disabled={this.state.questions[this.state.currentQuestion].checked} />
<label htmlFor={"radio-"+index}><RawHTML html={item.option}/></label>
</div>
})}
</form>
<div className="bottom">
{this.state.questions[this.state.currentQuestion].feedback && this.state.questions[this.state.currentQuestion].checked
&& <div className="fade-in">
<p>
<RawHTML html={this.state.questions[this.state.currentQuestion].feedback} />
{this.state.questions[this.state.currentQuestion].moreUrl &&
<React.Fragment>
<a target="_blank" href={this.state.questions[this.state.currentQuestion].moreUrl}>Learn more</a>.
</React.Fragment>
}
</p>
</div>
}
{!this.state.questions[this.state.currentQuestion].checked &&
<button type="button" onClick={this.checkAnswer}
disabled={!('answerCorrect' in this.state.questions[this.state.currentQuestion])}>Check answer</button>
}
{(this.state.currentQuestion+1) < this.state.questions.length && this.state.questions[this.state.currentQuestion].checked &&
<button className="fade-in next" type="button" onClick={this.nextQuestion}>Next <i className="fa fa-arrow-right"></i></button>
}
</div>
{(this.state.currentQuestion+1) === this.state.questions.length && this.state.questions[this.state.currentQuestion].checked &&
<button type="button" className="get-results pulse" onClick={this.getResults}>Get Results</button>
}
</div>
</section>
)
}
}
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<Quiz />, document.getElementById('riots-to-renaissance'));
})
and css
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#green: #36ad3b;
#red: #ff1100;
#yellow: #f3c000;
#blue: #1d77cc;
#sans: "Open Sans", "Helvetica", "Arial", sans-serif;
#keyframes roll-in {
0% {
top: 10px;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
.pulse {
animation: pulse 1s infinite;
}
.fade-in {
animation: fade .75s ease;
}
.quiz {
margin: 2em auto;
min-height: 40vh;
font-size: 16px;
.progress {
position: relative;
transition: width .4s ease;
margin-bottom: 1em;
background: rgb(181, 181, 181);
border-radius: 0;
width: 100%;
height: 2em;
font-family: #sans;
.progress-bar {
background-color: #1d77cc;
}
.counter {
position: absolute;
right: 5px;
top: 0;
font-weight: normal;
color: #fff;
height: 100%;
font-family: #sans;
font-size:1.25em;
margin: auto .5em;
letter-spacing:.025em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
form {
width:90%;
margin:1.5em auto;
}
.img-fluid {
margin: 2em auto;
max-width: 360px;
display: block;
}
.question {
font-weight:bold;
line-height:1.35;
margin-bottom:.75em;
}
.option {
margin-bottom: .25em;
transition: all .25s ease;
font-size: .9em;
}
button {
padding: .75em;
font-family: #sans;
background-color: #1d77cc;
border: 0;
color: #fff;
font-size: 1em;
transition: .25s all;
white-space: nowrap;
font-weight: bold;
cursor: pointer;
i {
margin-left: .15em;
}
&:disabled {
opacity: .5;
}
}
//custom radio controls
input[type="radio"] {
position: absolute;
left: -9999px;
& + label {
position: relative;
font-weight: normal;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
&::before {
text-align: center;
content: '';
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
&::after {
content: '';
width: 12px;
height: 12px;
background-color: #222;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
transition: all 0.2s ease;
}
}
}
.dim, .correct {
input[type="radio"] + label::before {
border: 0;
font-size: 1.2em;
animation: .25s roll-in ease;
}
input[type="radio"] + label::after {
display: none;
}
}
.correct input[type="radio"] + label:before {
content: '\f00C';
font-family: "FontAwesome"!important;
color: #green;
}
.dim input[type="radio"]:checked + label:before {
content: '\f00d';
font-family: "FontAwesome"!important;
color: #red;
}
input[type="radio"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
input[type="radio"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
//end custom radio controls
.dim {
opacity: 0.5;
}
.bottom {
width:90%;
margin:0 auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
div {
flex: 1 1 70%;
font-size: .9em;
}
.next {
flex: 0 1 10%;
margin-left: 3em;
}
#media (max-width: 600px) {
div, .next {
flex-basis: 100%;
}
.next {
margin-left: 0;
}
}
}
.get-results {
display: block;
margin: 2em auto;
}
.results {
font-size: 1.1em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 40vh;
h1 {
font-family: #sans;
}
button {
margin-top: 1em;
}
}
}
When I check my browser console, I get the error message:
Uncaught SyntaxError: Unexpected token '<'

something wrong while getting data from url app made in vue js and axios

trying to replace customer js with
export default[
{ id: 0, name: 'some one', title: 'zero' },
{ id: 1, name: 'test last', title:'one'},
{ id: 2, name: 'test first', title:'two'},
{ id: 3, name: 'test second', title:'three'},
{ id: 4, name: 'test third', title:'four'},
{ id: 5, name: 'test fourth', title:'five'},
{ id: 6, name: 'test fifth', title:'six'}
];
My app is fine while using the above raw json.
since i am trying to get the date using axios in same file as per below code
Something i am missing to get the data into app.
import axios from 'axios';
export default {
data () {
return {
info: []
}
},
mounted () {
axios
.get('http://localhost/json/test.json')
.then(response => (this.info = response))
}
}
for getting data from url into customer.js
not working in case.
while my app.vue is
<template>
<div id="app">
<Autocomplete :items="customers"
filterby="name"
#change="onChange"
title="Look for a customer"
#selected="customerSelected"/>
</div>
</template>
<script>
import customers from './assets/customers';
import Autocomplete from './components/Autocomplete'
export default {
name: 'App',
mounted() {
this.customers = customers;
},
data() {
return {
customers: []
};
},
methods: {
customerSelected(customer) {
console.log(`Customer Selected:\nid: ${customer.id}\nname: ${customer.name}\ntitle:${customer.title}`);
},
onChange(value) {
// do something with the current value
}
},
components: {
Autocomplete
}
}
</script>
<style>
#app {
margin: 0px auto;
margin-top: 60px;
width: 400px;
}
</style>
and Autocomplete.vue is
<template>
<div class="autocomplete">
<div class="input" #click="toggleVisible" v-text="selectedItem ? selectedItem[filterby] : ''"></div>
<div class="placeholder" v-if="selectedItem == null" v-text="title"></div>
<button class="close" #click="selectedItem = null" v-if="selectedItem">x</button>
<div class="popover" v-show="visible">
<input type="text"
ref="input"
v-model="query"
#keydown.up="up"
#keydown.down="down"
#keydown.enter="selectItem"
placeholder="Start Typing...">
<div class="options" ref="optionsList">
<ul>
<li v-for="(match, index) in matches"
:key="index"
:class="{ 'selected': (selected == index)}"
#click="itemClicked(index)"
v-text="match[filterby]"></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
items: {
default: [],
type: Array
},
filterby: {
type: String
},
title: {
default: 'Select One...',
type: String
},
shouldReset: {
type: Boolean,
default: true
}
},
data() {
return {
itemHeight: 39,
selectedItem: null,
selected: 0,
query: '',
visible: false
};
},
methods: {
toggleVisible() {
this.visible = !this.visible;
setTimeout(() => {
this.$refs.input.focus();
}, 50);
},
itemClicked(index) {
this.selected = index;
this.selectItem();
},
selectItem() {
if (!this.matches.length) {
return;
}
this.selectedItem = this.matches[this.selected];
this.visible = false;
if (this.shouldReset) {
this.query = '';
this.selected = 0;
}
this.$emit('selected', JSON.parse(JSON.stringify(this.selectedItem)));
},
up() {
if (this.selected == 0) {
return;
}
this.selected -= 1;
this.scrollToItem();
},
down() {
if (this.selected >= this.matches.length - 1) {
return;
}
this.selected += 1;
this.scrollToItem();
},
scrollToItem() {
this.$refs.optionsList.scrollTop = this.selected * this.itemHeight;
}
},
computed: {
matches() {
this.$emit('change', this.query);
if (this.query == '') {
return [];
}
return this.items.filter((item) => item[this.filterby].toLowerCase().includes(this.query.toLowerCase()))
}
}
}
</script>
<style scoped>
.autocomplete {
width: 100%;
position: relative;
}
.input {
height: 40px;
border-radius: 3px;
border: 2px solid lightgray;
box-shadow: 0 0 10px #eceaea;
font-size: 25px;
padding-left: 10px;
padding-top: 10px;
cursor: text;
}
.close {
position: absolute;
right: 2px;
top: 4px;
background: none;
border: none;
font-size: 30px;
color: lightgrey;
cursor: pointer;
}
.placeholder {
position: absolute;
top: 11px;
left: 11px;
font-size: 25px;
color: #d0d0d0;
pointer-events: none;
}
.popover {
min-height: 50px;
border: 2px solid lightgray;
position: absolute;
top: 46px;
left: 0;
right: 0;
background: #fff;
border-radius: 3px;
text-align: center;
}
.popover input {
width: 95%;
margin-top: 5px;
height: 40px;
font-size: 16px;
border-radius: 3px;
border: 1px solid lightgray;
padding-left: 8px;
}
.options {
max-height: 150px;
overflow-y: scroll;
margin-top: 5px;
}
.options ul {
list-style-type: none;
text-align: left;
padding-left: 0;
}
.options ul li {
border-bottom: 1px solid lightgray;
padding: 10px;
cursor: pointer;
background: #f1f1f1;
}
.options ul li:first-child {
border-top: 2px solid #d6d6d6;
}
.options ul li:not(.selected):hover {
background: #8c8c8c;
color: #fff;
}
.options ul li.selected {
background: orange;
color: #fff;
font-weight: 600;
}
</style>

In most of the cases, response consists of several properties and you will need response.data.
if this didn't work then print the response, using console.log(response) and inspect it such that which key holds the JSON data.

Header name not displaying completely in ag-grid angular 2

I am using ag-grid for Angular 2. In that i have multiple headers like token number. It is not displaying completely. It is just like Token N...
Below is my component.ts
import { Component, OnInit } from '#angular/core';
import{ GridOptions } from 'ag-grid';
import { FlightProcessGridStatusComponent } from '../flight-process-grid-status/flight-process-grid-status.component';
import { FetchedFlightInfoBean } from '../../_model/FetchedFlightInfoBean';
#Component({
selector: 'app-user-home-child',
templateUrl: './user-home-child.component.html',
styleUrls: ['./user-home-child.component.css'],
//providers: [FetchedFlightInfoBean]
})
export class UserHomeChildComponent {
private gridOptions: GridOptions;
private refreshFlag: boolean;
fetchedFltBean: FetchedFlightInfoBean [] = [
{tokenNbr:1, flightNbr:"AY01", flightDate: "12-aug-17", flightBrPoint:"DEL", flightoffPoint:"LKO", nbrPax:2, okEmail:"Y", nonOkEmail:"N", okphn:"Y", nonOkPhn:"N", status:"WAIT"},
{tokenNbr:2, flightNbr:"AY02", flightDate: "6-aug-17", flightBrPoint:"BAN", flightoffPoint:"MUM", nbrPax:4, okEmail:"N", nonOkEmail:"Y", okphn:"Y", nonOkPhn:"N", status:"MISSED-CONNECTION"},
{tokenNbr:3, flightNbr:"AY013", flightDate: "22-aug-17", flightBrPoint:"HEL", flightoffPoint:"PAR", nbrPax:1, okEmail:"N", nonOkEmail:"Y", okphn:"Y", nonOkPhn:"N", status:"FLOWN"}
];
constructor() {
this.gridOptions = <GridOptions>{headerHeight: 48,
rowHeight: 35,
rowSelection: 'single',
enableColResize: true,
onGridReady: (params) => {
params.api.sizeColumnsToFit();
}
};
this.gridOptions.columnDefs = [
{headerName: 'Token Number', field: 'tokenNbr'},
{headerName: "Flight Number", field: "flightNbr"},
{headerName: "Flight Date", field: "flightDate"},
{headerName: "Flight Boarding Point", field: "flightBrPoint"},
{headerName: "Flight Off Point", field: "flightoffPoint"},
{headerName: "NBR of Pax", field: "nbrPax"},
{headerName: "Ok Email", field: "okEmail"},
{headerName: "NonOk Email", field: "nonOkEmail"},
{headerName: "Ok Phone", field: "okphn"},
{headerName: "NonOk Phone", field: "nonOkPhn"},
{
headerName: "Status",
field: "status",
cellRendererFramework: FlightProcessGridStatusComponent,
}
];
this.gridOptions.rowData = this.createRowData();
}
public refreshRowData()
{
this.refreshFlag = true;
alert(`inside refreshRowData`);
let rowData = this.createRowData();
this.gridOptions.api.setRowData(rowData);
}
private createRowData() {
if(this.refreshFlag)
{
alert(`refresh call`);
}
let rowData:FetchedFlightInfoBean[] = this.fetchedFltBean;
/* let rowDataLength = rowData.length;
alert(`${rowDataLength}`)
for (var i = 0; i < rowDataLength; i++) {
rowData.push({
tokenNbr: 1,
flightNbr: "",
flightDate: "",
flightBrPoint: "",
flightoffPoint: "",
nbrPax: 3,
okEmail: "",
nonOkEmail: "",
okphn: "",
nonOkPhn: "",
status: "",
});
}
*/
return rowData;
}
}
next is my html part....
<div style="width: 800px; padding-left: 100px" class="ag-fresh ag-header-cell-label">
<button (click)="refreshRowData()">Refresh Data</button>
<button (click)="autoFit()">AutoFit</button>
<ag-grid-angular style="width: 1000px; height: 1000px;"
[gridOptions]="gridOptions"
enableSorting
enableFilter >
</ag-grid-angular>
</div>
my CSS-
#import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
.ag-fresh {
font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.ag-fresh .ag-root {
border: none;
}
.ag-fresh .ag-header-container {
background: #fff;
}
.ag-fresh .ag-header {
border-bottom: 2px solid #000;
}
.ag-fresh .ag-header-row {
font-weight: bold;
font-size: 13px;
line-height: 1em;
color: #000;
background: #fff;
border: none;
}
.ag-fresh .ag-ltr .ag-header-cell {
padding: 10px;
border: none
}
.ag-fresh .ag-row {
border-bottom: 1px solid #ddd;
}
.ag-fresh .ag-row:nth-child(odd){
border-top: 1px solid #ddd;
background-color: #f9f9f9;
}
.ag-fresh .ag-row:last-child {
border-bottom: none;
}
.ag-fresh .ag-row:hover {
background-color: #d9edf7;
border-top: 1px solid #aaa;
border-color: #aaa;
}
.ag-fresh .ag-row .ag-cell {
color: #333;
padding: 10px 15px;
}
.ag-fresh .ag-row .ag-cell:focus,
.ag-fresh .ag-row .ag-cell:hover {
font-weight: bold;
background-color: #d0edf3 ;
color:#000;
}
.ag-header-cell-label {
text-overflow: clip;
overflow: visible;
white-space: normal;
}
In my component you can see I have fixed the size of the column using params.api.sizeColumnsToFit(). This allow my columns to display without a horizontal scroll bar. So i am getting complete data in one view.
But now my column-headers are not wraaping up there name. I am not getting the complete name displayed.
For example, If the column-header is Token Number then only "token n..." this part is displayed.
Please help.