I am creating a Spotify app. After a GET query of a track search, I want to display the results as clickable buttons with track name and artist. The query returns a different number of results. How can I dynamically add and remove buttons? I have the search results as a JSON.
Using Bootstrap, HTML, and JavaScript
function searchSpotify(track) {
$.post(URL + "/search", { "pc": getCookie('pc'), "track": track }, function (data, status) {
console.log("Searching for: " + track)
if (status === "success") {
console.log("Results found: " + data)
document.getElementById('textSpace').innerHTML = data
localStorage.setItem('searchResults', JSON.stringify(data));
}
})
.fail(function (response, status) {
console.log("No results found");
})
In this code, data is the search results, formatted like this example.
{
"artists":["Calvin Harris","Morgan Evans","Prince","Lil Peep","Ed Sheeran","Carly Rae Jepsen","Sixpence None The Richer","Soulja Boy","Calvin Harris","Chris Brown"],
"names":["One Kiss (with Dua Lipa)","Kiss Somebody","Kiss","Kiss","Kiss Me","Call Me Maybe","Kiss Me","Kiss Me Thru The Phone","One Kiss (with Dua Lipa) - ZHU Remix","Kiss Kiss"],
"ids":["7ef4DlsgrMEH11cDZd32M6","1mJMD1VIQ7jWTP9DK2zmY0","62LJFaYihsdVrrkgUOJC05","4J3FltfCktHfD9iPCneDGy","0Tel1fmuCxEFV6wBLXsEdk","3TGRqZ0a2l1LRblBkJoaDx","754kgU5rWscRTfvlsuEwFp","2q4rjDy9WhaN3o9MvDbO21","3aNt9AQw0JSY9dvCiPK1kF","4CweuuMMzi71pO0MSRgyaT"]
}
(function dotDone() {
var data = {
"artists": ["Calvin Harris", "Morgan Evans", "Prince", "Lil Peep", "Ed Sheeran", "Carly Rae Jepsen", "Sixpence None The Richer", "Soulja Boy", "Calvin Harris", "Chris Brown"],
"names": ["One Kiss (with Dua Lipa)", "Kiss Somebody", "Kiss", "Kiss", "Kiss Me", "Call Me Maybe", "Kiss Me", "Kiss Me Thru The Phone", "One Kiss (with Dua Lipa) - ZHU Remix", "Kiss Kiss"],
"ids": ["7ef4DlsgrMEH11cDZd32M6", "1mJMD1VIQ7jWTP9DK2zmY0", "62LJFaYihsdVrrkgUOJC05", "4J3FltfCktHfD9iPCneDGy", "0Tel1fmuCxEFV6wBLXsEdk", "3TGRqZ0a2l1LRblBkJoaDx", "754kgU5rWscRTfvlsuEwFp", "2q4rjDy9WhaN3o9MvDbO21", "3aNt9AQw0JSY9dvCiPK1kF", "4CweuuMMzi71pO0MSRgyaT"]
}
let sHTML = "";
for(let i = 0; i < data.artists.length; i++){
sHTML += '<button type="button" class="btn btn - primary">artists: ' + data.artists[i]
+ ' song: ' + data.names + '</button>';
}
$('#theButtons').html(sHTML);
})();
<!DOCTYPE HTML>
<html>
<body>
<div id="theButtons">
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So you should be able to add this to your functions as a .done just like the .fail has already been done. jQuery loops through the data object and generates html, which is then posted by: $('#theButtons').html(sHTML); to the
Related
I'm working on this self exploration which I want to show a chart that shows how many anime that have comedy genre or fantasy genre. The data for my chart is going to be an external json file (anime.json) on my computer and it's not yet contain the total of how many anime that have comedy or fantasy genre, so I need to do some loop to know that. I try this to make it happen by trying with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
let data;
$.getJSON("anime.json", function(json){
data = json;
});
let comedy = 0;
let fantasy= 0;
for (i = 0; i < data.length; i++)
{
let genres = data[i]['genres']
for (j = 0; j < genress.length; j++)
{
let value = genres[j].trim()
if (value.toLowerCase() == 'comedy')
{
comedy = comedy +1;
}
if (value.toLowerCase() == 'fantasy')
{
fantasy = fantasy + 1;
}
}
}
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Comedy', 'Super Natural'],
datasets:[{
label : 'Genre',
data: [
comedy,
superNatural
],
}]
},
options : {},
});
</script>
</body>
</html>
But when I open this html on my browser, It came up empty so I'm wondering what is the correct way to do it. And this is my json file (and I have like 25 or 30 of them):
[
{
"cover_title": "Haikyuu!! TO THE TOP",
"cover_studio": "Production I.G",
"cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx106625-UR22wB2NuNVi.png",
"format": "TV",
"duration": "84%",
"description": "The fourth season of Haikyuu!!\n\nThe Karasuno High School Volleyball Club finally won their way into the nationals after an intense battle for the Miyagi Prefecture Spring Tournament qualifiers. As they were preparing for the nationals, Kageyama is invited to go to All-Japan Youth Training Camp. At the same time, Tsukishima is invited to go to a special rookie select training camp for first-years in Miyagi Prefecture. Hinata feels panic that he\u2019s being left behind as one of the first-years and then decides to show up at the Miyagi Prefecture rookie select training camp anyway...\n\n(Source: Crunchyroll)",
"genres": [
"Comedy ",
" Drama ",
" Sports"
]
},
{
"cover_title": "Eizouken ni wa Te wo Dasu na!",
"cover_studio": "Science SARU",
"cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx109298-YvjfI88hX76T.png",
"format": "TV",
"duration": "79%",
"description": "First year high schooler Midori Asakusa loves anime so much, she insists that \"concept is everything\" in animation. Though she draws a variety of ideas in her sketchbook, she hasn't taken the first step to creating anime, insisting that she can't do it alone. The producer-type Sayaka Kanamori is the first to notice Asakusa's genius. Then, when it becomes clear that their classmate, charismatic fashion model Tsubame Mizusaki, really wants to be an animator, they create an animation club to realize the \"ultimate world\" that exists in their minds.\n\n(Source: Crunchyroll)",
"genres": [
"Adventure ",
" Comedy"
]
},
{
"cover_title": "Made in Abyss: Fukaki Tamashii no Reimei",
"cover_studio": "Kinema Citrus",
"cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx100643-fPH9OgEKKvcI.jpg",
"format": "Movie",
"duration": "78%",
"description": "Dawn of the Deep Soul continues the epic adventure of plucky Riko and Reg who are joined by their new friend Nanachi. Together they descend into the Abyss\u2019 treacherous fifth layer, the Sea of Corpses, and encounter the mysterious Bondrewd, a legendary White Whistle whose shadow looms over Nanachi\u2019s troubled past. Bondrewd is ingratiatingly hospitable, but the brave adventurers know things are not always as they seem in the enigmatic Abyss...\n\n(Source: Sentai Filmworks)",
"genres": [
"Adventure ",
" Fantasy ",
" Sci-Fi ",
" Drama"
]
}]
Thank you!
Your code seems to be fine, the only thing I can see is you are not handling the callback properly. The code you have written after $.getJSON should be placed inside the callback function. As because of the async behavior your data is set after other codes are executed. If you open console you may see error as cannot read property length of undefined as initially, the data is undefined.
Below snippet should fix your problem.
<script>
$.getJSON("anime.json", function (json) {
const data = json;
let comedy = 0;
let fantasy = 0;
for (i = 0; i < data.length; i++) {
let genres = data[i]["genres"];
for (j = 0; j < genress.length; j++) {
let value = genres[j].trim();
if (value.toLowerCase() == "comedy") {
comedy = comedy + 1;
}
if (value.toLowerCase() == "fantasy") {
fantasy = fantasy + 1;
}
}
}
let myChart = document.getElementById("myChart").getContext("2d");
let massPopChart = new Chart(myChart, {
type: "bar",
data: {
labels: ["Comedy", "Super Natural"],
datasets: [
{
label: "Genre",
data: [comedy, superNatural],
},
],
},
options: {},
});
});
</script>
This question already has answers here:
Use jQuery to convert JSON array to HTML bulleted list
(6 answers)
Closed 4 years ago.
I have a JSON like below
{
"gists": [
{
"name": "Get the title",
"id": "beaf8a106e76f4bb82a85ca3a7707a78",
"category": "Function"
},
{
"name": "Get the content",
"id": "c6ae7c55aa27f8b6dbeb15f5d72762ec",
"category": "Uncategorized"
}
]
}
I want to foreach & get as HTML via JavaScript. Like below:
<ul>
<li>Name: Get The title, ID: beaf8a106e76f4bb82a85ca3a7707a78, Function: Function</li>
<li>Name: Get The content, ID: c6ae7c55aa27f8b6dbeb15f5d72762ec, Function: Uncategorized</li>
</ul>
I have tried this way: http://jsfiddle.net/ehsansajjad465/SLHTA/10/
But, I am not sure how to get values in one line & I want to do it using plain JS. Also my JSON will be form external link. http://rasel.tech/gist.json
This might be a very dumb question. I am sorry :(
With vanilla JS, you can loop through the array with the forEach method and construct the li elements accordingly.
var data = {
"gists": [
{
"name": "Get the title",
"id": "beaf8a106e76f4bb82a85ca3a7707a78",
"category": "Function"
},
{
"name": "Get the content",
"id": "c6ae7c55aa27f8b6dbeb15f5d72762ec",
"category": "Uncategorized"
}
]
};
var container = document.querySelector('#container');
var ul = document.createElement('ul');
data.gists.forEach(function (item) {
var li = document.createElement('li');
li.textContent = 'Name: ' + item.name + ', ID: ' + item.id + ', Function: ' + item.category;
ul.appendChild(li);
});
container.appendChild(ul);
<div id="container"></div>
You can use JSON.stringify to stringify object and i used regex to remove {} from string.
let obj = {"gists": [{"name": "Get the title","id": "beaf8a106e76f4bb82a85ca3a7707a78","category": "Function"},{ "name": "Get the content","id": "c6ae7c55aa27f8b6dbeb15f5d72762ec","category": "Uncategorized"}]}
let li = document.getElementById('list');
obj.gists.forEach( e => {
let ele = document.createElement('li')
ele.innerHTML = `${JSON.stringify(e).replace(/[{}]/g,'')}`
li.appendChild(ele);
})
<ul id='list'>
</ul>
If you want to get the items in one line you can do it with css.
You can add white-space:nowrap; in your ul and display: inline in li. I am just editing your added fiddle.
var data = {
"qA": [{
"question": "How deep is the ocean",
"answer": [
"quite deep",
"very deep",
"no deep at all"]
}, {
"question": "How high is the sky",
"answer": [
"real high",
"high enough",
"not that high"]
}]
};
var html = "";
$.each(data.qA, function (index, item) {
//console.log(item);
html += "<ul>" + item.question;
$.each(item.answer, function (index1, item1) {
html += " <li> ("+index1+ ") " + item1 + "</li>";
});
html += "</ul>";
});
$("#container").append(html);
ul{
white-space:nowrap;
}
ul li{
display: inline
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container"></div>
I have a javascript object that I would like to traverse and print data based off 1 common category.
Javascript object:
var $states = {
"AL" : {
"longname": "Alabama",
"lawOne": "Alabama Law 1",
"lawTwo": "Alabama Law 2",
"lawThree": "Alabama Law 3",
"region" : "Southeast"
},
"AK" : {
"longname": "Alaska",
"lawOne": "Alaska Law 1",
"lawTwo": "Alaska Law 2",
"lawThree": "Alaska Law 3",
"region" : "Northwest"
},
"AZ" : {
"longname": "Arizona",
"lawOne": "Arizona Law 1",
"lawTwo": "Arizona Law 2",
"lawThree": "Arizona Law 3",
"region" : "Southwest"
},
etc...
}
I am able too loop the array and get as granular as getting the console to log all of the states that are in the same region:
for (var key in $states) {
if ($states.hasOwnProperty(key)) {
var $getStateRegion = $states[key].region
if ($getStateRegion === "Northeast") {
console.log ($states[key].longname);
}
}
}
Once I try to loop through those and print a table with that data is where I am running into an issue. I want to be able to have a withthe 's longname, lawOne, lawTwo, and lawThree values input in there. What gives? Once I try running a for loops through this is where I'm hitting a roadblock. Thanks in advance!
Try the working code below.
var $states = {
"AL" : {
"longname": "Alabama",
"lawOne": "Alabama Law 1",
"lawTwo": "Alabama Law 2",
"lawThree": "Alabama Law 3",
"region" : "Southeast"
},
"AK" : {
"longname": "Alaska",
"lawOne": "Alaska Law 1",
"lawTwo": "Alaska Law 2",
"lawThree": "Alaska Law 3",
"region" : "Northwest"
},
"AZ" : {
"longname": "Arizona",
"lawOne": "Arizona Law 1",
"lawTwo": "Arizona Law 2",
"lawThree": "Arizona Law 3",
"region" : "Southwest"
}
};
var result = {};
Object.keys($states).forEach(function(key) {
if ($states[key]["region"] === "Southwest") {
result[key] = $states[key];
}
});
console.log(result);
You are on the right track. Before I continue, I would like to point out that you are using a for..in loop, but newer versions of Javascript support the for..of loop also, so this is something you may want to consider. The difference is that the for..in loop gives you the keys of the object, and the for..of loop gives you the values, so it shortens the code by skipping the step where you write something to the effect of:
for( var index in array ){
var currentObject = array[ index ];
}
The secret to your solution is in how you handle the DOM, and there are many ways to do this. I will show you one, but it is not necessarily the fastest or the best. I recommend playing around with different DOM manipulations to find the one that works best for you.
First, we know how to get a record, so the javascript aspect of looping, you have that handled...
Next, we need to create the table.... I will assume that you want four columns based on your description, but you could easily adjust this to put the state name and one law on each line, which would probably be a better design allowing a variable number of laws.
The html would look something like this:
<table>
<tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr>
<!-- Here is where we would create new html for each state -->
</table>
Your loop then would need to add to this html by creating several lines that appear as:
<tr><td>[State]</td><td>[Law1]</td><td>[Law2]</td><td>[Law3]</td><tr>
We will use string manipulation of the DOM, because it is a good place to start, because it is most similar to what you would write by hand.
We will break the table into three parts: the header, the body and the footer.
var header = "<table><tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr>";
var body = ""; //this is where we add the data
var footer = "</table>";
Now, on the loop, we will create each line as needed and add it to the body:
for( var index in stateObj ){
...error checking occurs here...
var state = stateObj[ index ];
var stateColumn = "<td>" + state.longname + "</td>";
var law1Col = "<td>" + state.lawOne + "</td>";
var law2Col = "<td>" + state.lawTwo + "</td>";
var law3Col = "<td>" + state.lawThree + "</td>";
var row = "<tr>" + stateColumn + law1Col + law2Col + law3Col + "</tr>";
//now that we have a row, we add it to the body
body += row; //same as body = body + row;
}
After we have the body, we can make our table by combining the header, body and footer:
var tableHTML = header + body + footer;
And then we find a place to inject it into our document:
var outputDiv = document.getElementById( "stateTableData" );
outputDiv.innerHTML = tableHTML;
Here is a live example:
var states = {
PA: {
longname:"Pennsylvania",
lawOne:"It is illegal to sing in the shower in apartment buildings within the city limits of Philadelphia",
lawTwo:"All motorists are required to stop the vehicle for passing horsemen. The vehicle shall be covered with camoflage so as not to scare the horses.",
lawThree:"Any house having more than four women occupants shall be considered a brothel and shall be in violation of the law."
},
NJ: {
longname:"New Jersey",
lawOne:"There is no such thing as the Mafia",
lawTwo:"Any reference to the denizens of New Jersey shall be derogatory and degrading, think Jersey Shore",
lawThree:"There is no escape from New Jersey and we are not a suburb of NYC"
},
VA: {
longname:"Virginia",
lawOne: "Civil War re-enactments must have the North as the victor.",
lawTwo: "All roads shall end in Richmond, VA",
lawThree: "I have run out of silly ideas for this example."
}
};
function buildTableForState( stateNames ){
var stateList = stateNames.split(",");
//remove spaces
for( var i in stateList ){ stateList[i] = stateList[i].trim(); }
//initialize table parts
var header = "<table><tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr>";
var footer = "</table>";
var body = "";
//build body
for( var index in states ){
if( stateList.indexOf( index ) !== -1 ){
var currentState = states[index];
body += buildRowForState( currentState );
}
}
//compose and inject table
var tableHTML = header + body + footer;
var documentOut = document.getElementById( "outputDiv" );
documentOut.innerHTML = tableHTML;
}
function submitTable(value){
buildTableForState( value );
}
function buildRowForState( currentState ){
var state = makeTableCol( currentState.longname );
var law1 = makeTableCol( currentState.lawOne );
var law2 = makeTableCol( currentState.lawTwo );
var law3 = makeTableCol( currentState.lawThree );
var row = makeTableRow( [state, law1, law2, law3] );
return row;
}
function makeTableCol( stringText ){
return "<td>" + stringText + "</td>";
}
function makeTableRow( arrayColumns ){
return "<tr>" + arrayColumns.join("") + "</tr>";
}
<h1>Table Loader</h1>
<form>
<p>Use the values "PA", "NJ", and "VA" to generate a table. You can use more than one value by separating them with a comma.</p>
<input type="text" id="stateNames" name="stateNames" /><br/>
<button onclick="submitTable(stateNames.value);">Build Table</button>
<p>Try:
</p>
<ul>
<li>PA</li>
<li>NJ,VA</li>
<li>VA,PA,NJ</li>
</ul>
</form>
<h1>Table Output appears here</h1>
<div id="outputDiv"></div>
NOTE: Regarding the live code, the HTML is bigger than the display box. In my browser I have to scroll down on the snippit HTML to view the generated table. Either that or expand the snippit window to a full tab to view it in a larger screen.
The above code is simplified, and most coders would tell you not to use HTMLElement.innerHTML, because it is slow, but it is a good place to start. Once you have this down, start practicing with document.create( tagName ), and then use more direct DOM manipulations.
I am making a trivia game with JSON, and I am stuck. First off, I can pull my data from JSON and get it to display in a list after working through the documentation, like so:
$.getJSON('/trivia.json', function(data) {
var items = []
$.each(data, function (item, i) {
items.push('<li id="' + i.order + '">' + i.question + ' - ' + i.choices + i.correct + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('#example');
});
That works fine at creating a list of the questions and answers, so I can confirm I am calling the local JSON file correctly.
My next step is to get the question and answer data to be stored in my Javascript variable for the quiz to wrok. When I made the example quiz, I store the data like so:
var quiz = [
{
"question" : "Q1: Who came up with the theory of relativity?",
"choices" : [
"Sir Isaac Newton",
"Nicolaus Copernicus",
"Albert Einstein",
"Ralph Waldo Emmerson"
],
"correct" : "Albert Einstein",
}];
I don't want the questions to be static, so I want JSON to take over supplying the question and choices.
I have tried to call the appendTo function for the quiz var, but it isn't passing the data through like it was when I created a list. Any ideas on how I can get the question, choices, and correct data sets to apply with the var quiz?
You may update your code to add the grapped data from Ajax request to quiz variable and iterate over choices to print them like the following code:
var quiz = [
{
"question" : "Q1: Who came up with the theory of relativity?",
"choices" : [
"Sir Isaac Newton",
"Nicolaus Copernicus",
"Albert Einstein",
"Ralph Waldo Emmerson"
],
"correct" : "Albert Einstein",
}];
$.getJSON('/trivia.json', function(data) {
var items = []
$.each(data, function (item, i) {
var q = {"question": i.question, "correct": i.correct, "choices": []};
var choicesStr = "";
$.each(i.choices, function (it, choice) {
choicesStr += "<span>choice</span></br>";
q.choices.push(choice);
}
quiz.push(q);
items.push('<li id="' + i.order + '">' + i.question + ' - ' + choicesStr + i.correct + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('#example');
});
I have the following JSON:
var questions = {
section: {
"1": question: {
"1": {
"id" : "1a",
"title": "This is question1a"
},
"2": {
"id" : "1b",
"title": "This is question2a"
}
},
"2": question: {
"1": {
"id" : "2a",
"title": "This is question1a"
},
"2": {
"id" : "2b",
"title": "This is question2a"
}
}
}
};
NOTE: JSON changed based on the answers below to support the question better as the original JSON was badly formatted and how it works with the for loop below.
The full JSON will have 8 sections and each section will contain 15 questions.
The idea is that the JS code will read what section to pull out and then one by one pull out the questions from the list. On first load it will pull out the first question and then when the user clicks on of the buttons either option A or B it will then load in the next question until all questions have been pulled and then do a callback.
When the button in the appended list item is clicked it will then add it to the list below called responses with the answer the user gave as a span tag.
This is what I have so far:
function loadQuestion( $section ) {
$.getJSON('questions.json', function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (item === $section) {
$('#questions').append('<li id="' + item.section.questions.question.id + '">' + item.section.questions.question.title + ' <button class="btn" data-response="a">A</button><button class="btn" data-response="b">B</button></li>');
}
}
});
}
function addResponse( $id, $title, $response ) {
$('#responses').append('<li id="'+$id+'">'+$title+' <span>'+$response+'</span></li>');
}
$(document).ready(function() {
// should load the first question from the passed section
loadQuestion( $('.section').data('section') );
// add the response to the list and then load in the next question
$('button.btn').live('click', function() {
$id = $(this).parents('li').attr('id');
$title = $(this).parents('li').html();
$response = $(this).data('response');
addResponse( $id, $title, $response );
loadQuestion ( $('.section').data('section') );
});
});
and the HTML for the page (each page is separate HTML page):
<div class="section" data-section="1">
<ul id="questions"></ul>
<ul id="responses"></ul>
</div>
I've become stuck and confused by how to get only the first question from a section and then load in each question consecutively for that section until all have been called and then do a callback to show the section has been completed.
Thanks
Do not have multiple id's in html called "section."
Do not have multiple keys in your JSON on the same level called "section". Keys in JSON on the same level should be unique just as if you are thinking about a key-value hash system. Then you'll actually be able to find the keys. Duplicate JSON keys on the same level is not valid.
One solution can be section1, section2, etc. instead of just section. Don't rely on data-section attribute in your HTML - it's still not good if you have "section" as the duplicate html id's and as duplicate JSON keys.
If you have only one section id in HTML DOM, then in your JSON you must also have just one thing called "section" e.g.:
var whatever = {
"section" : {
"1": {
"question" : {
"1" : {
"id" : "1a",
"title" : "question1a"
},
"2" : {
"id" : "2a",
"title" : "question2a"
}
}
},
"2": {
"question" : {
"1" : {
"id" : "1a",
"title" : "aquestion1a"
},
"2" : {
"id" : "2a",
"title" : "aquestion2a"
}
}
}
}
}
console.log(whatever.section[1].question[1].title); //"question1a"
To get question, do something like this:
function loadQuestions(mySectionNum) {
$.getJSON('whatever.json', function(data){
var layeriwant = data.section[mySectionNum].question;
$.each(layeriwant, function(question, qMeta) {
var desired = '<div id="question-' +
qMeta.id +
'"' +
'>' +
'</div>';
$("#section").append(desired);
var quest = $("#question-" + qMeta.id);
quest.append('<div class="title">' + qMeta.title + '</div>');
//and so on for question content, answer choices, etc.
});
});
}
then something like this to actually get the questions:
function newQuestion(){
var myHTMLSecNum = $("#section").attr('data-section');
loadQuestions(myHTMLSecNum);
}
newQuestion();
//below is an example, to remove and then append new question:
$('#whatevernextbutton').on('click',function(){
var tmp = parseInt($("#section").attr('data-section'));
tmp++;
$("#section").attr('data-section', tmp);
$("#section").find('*').remove();
newQuestion();
});
Technically your getJSON function always retrieves the same data. Your code never compares the id given to the id you're extracting.
Your getJSON should look something like:
function loadQuestion( $section ) {
for (var i = 0; i < questions.section.length; i++) {
var item = questions.section[i];
if (item.id === $section) {
for (var j = 0; j < item.questions.length; j++) {
$('#questions').append('<li id="' +
item.questions[i].id + '">' +
item.questions[i].title +
' <button class="btn" data-response="a">A</button><button class="btn" data-response="b">B</button></li>'
);
}
}
}
}
Modify your JSON to:
var questions = {
section: [{
id: 1,
questions: [{
id: "1a",
title: "This is question1a"
},{
id: "2a",
title: "This is question2a"
}]},{
id: 2,
questions: [{
id: "1a",
title: "This is question1a"
},{
id: "2a"
title: "This is question2a"
}]
}]
};
Edit: your first parameter of getJSON is the URL of the JSON returning service.
You don't need getJSON at all if your JSON is already defined on the client. I have modified the code above.