CODEWITHSUNDEEP
javascriptjson
glln
glln

Reputation: 543

Switch between JSON array options on click

I'm trying to switch between the array options when clicking a button by changing the value of a variable. I cannot get it to work. Perhaps this isn't the best way to do it? I'm still learning this and I'm struggling to spot the issue.

Thanks in advance for your help

var json = {
  "content": [{
      "title": "Test 1",
    },
    {
      "title": "Test 2",
    }
  ]
};

var output = ""; //initialize it outside the loop
var maxAppend = 0;

var foo = json.content[0];

function first() {
  foo = json.content[0];
}

function second() {
  foo = json.content[1];
}

$.each(json.content[0], function() {
  if (maxAppend >= 1) return;

  output += '<h2>' + foo.title + '</h2>' +
    '<div><button onclick="second()">click</button></div>'

  maxAppend++;

});

$('.container').append(output);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

jsFiddle Link

Upvotes: 0

Views: 112

Answers (2)

Florent Giraud
Florent Giraud

Reputation: 225

I am not really sure about what you want to do.

here is an example i make for handle switch value

click here to watch

var Json = {
  "content": [{
    "title": "Test 1",
},
{
    "title": "Test 2",
 }]
 };

 var select = 0;
  var text = $("#text");

  var handleSwitch = function(){
  if (select === 0){
    $(text).html(Json.content[1].title);
    select = 1;
  }else if(select === 1){
     $(text).html(Json.content[0].title);
     select = 0;
  }
 }

 $('#button').on("click", function(event){
    handleSwitch();
 });

<div class="container">
  <button id="button">click</button>
  <p id="text">Test 1</p>
</div>

Upvotes: 0

Jai
Jai

Reputation: 74738

The way you have written your code that will work just for once and click event does not update the text as it has been put in the DOM. Because you have a variable foo and it has the reference to the object.

Yet you need to talk to the DOM to update it's text content. One way i have mentioned. Although you might want to go unobtrusive.

You have to pass this to the function: 

onclick="second(this)"

Now in the function: 

function second(el){
  $(el).parent().prev('h2').text(json.content[1]['title']);
}

You might add a event listener for your dynamic button in jquery with delegated event: 

$(document.body).on('click', 'button' second);
function second(){
    $(this).parent().prev('h2').text(json.content[1]['title']);
}


var json = {
  "content": [{"title": "Test 1",},{"title": "Test 2",}]
};
var output = ""; //initialize it outside the loop
var maxAppend = 0;
var foo = json.content[0];

function first() {
  foo = json.content[0];
}
function second(el) {
  $(el).parent().prev('h2').text(json.content[1]['title']);
}

$.each(json.content, function() {
    output += '<h2>' + foo.title + '</h2>' +
    '<div><button onclick="second(this)">click</button></div>'
  maxAppend++;
});

$('.container').append(output);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

Upvotes: 1

Related Questions