Ilja February 2016

Switch statement to return result only when item type changes

I have an array of content that when simplified looks like this:

[
 { content_type: 1, content_body: "some text" },

 { content_type: 1, content_body: "some text" },

 { content_type: 2, content_body: "media link" },

 { content_type: 1, content_body: "some text" }
]

I now need to map through this array and have a switch statement checking content_type and rendering HTML based on it, so something like (note below syntax uses jsx, so it might look different from vanila JavaScript, but it is pretty self explanatory).

switch(item.content_type) {
 case 1:
   render (
     <div class="text_content">
       <p>{item.content_body}</p>
     </div>

   )
  case 2:
   render (
     <div class="text_media">
       <div>{item.content_body}</div>
     </div>

   )
}

Now the issue, If same content type follows one after another in the array (so first 2 entries with content_type 1 for example), I want their content_bodies to be rendered inside one div, so

<div class="text_content">
  <p>{item.content_body}</p>
  <p>{item.content_body}</p>
</div>

and then continue on if next content_type is different. (This can be repeated several times in the app, also this is only repeated for content_type 1).

What would be an approach for this? Bear in mind I can't manipulate array to do things like nest those contents inside an object.

Answers


dchayka February 2016

If I understood your approach correctly then this should work just fine. http://codepen.io/anon/pen/zrMEjz - working example

Code included below. Logic is that on each iteration it will check if an element exists then new element is inserted inside, if not, create that element and add element inside. (Note: jQuery included as a library, you can get away with using base JS but I wanted to show you the idea with slightly less code)

// sample array 
var arr = [
  {content_type: 1, content_body: "some text"},
  {content_type: 1, content_body: "some text"},
  {content_type: 2, content_body: "media link"},
  {content_type: 1, content_body: "some text"}
  ];

for(var i = 0; i < arr.length; i++) {
  var currentElement = arr[i]; console.log(currentElement.content_body);
  
  switch(currentElement.content_type) {
    case 1:
      var el = jQuery('.text_content');
      
      if(el.length) {
        el.append('<p>' + currentElement.content_body + '</p>');
      } else {
        var el = jQuery('<div class="text_content"></div>')
        el.append('<p>' + currentElement.content_body + '</p>');
        jQuery('body').append(el);
      }
      break;
    case 2:
      var el = jQuery('.text_media');
      
      if(el.length) {
        el.append('<div>' + currentElement.content_body + '</div>');
      } else {
        var el = jQuery('<div class="text_media"></div>');
        el.append('<p>' + currentElement.content_body + '</p>');
        jQuery('body').append(el);
      }
      break;
  }
}
.text_content {
  border: 1px solid black;
}

.text_content p {
  bor 

Post Status

Asked in February 2016
Viewed 1,396 times
Voted 5
Answered 1 times

Search




Leave an answer