JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<h2>Input (csv):</h2>
<textarea id="input" name="" id="" cols="30" rows="5">
text,title,url
link, zelda, https://google.com
link1, zelda1, https://google.com?link=1
link2, zelda2, https://google.com?link=2
link3, zelda3, https://google.com?link=3
</textarea>

<div id="output">
  
</div>

CSS

html { margin: 10px; }

body {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

h2 {
  font-size: 20px;
}

textarea { padding: 10px; margin-bottom: 10px; }

ul {
  margin: 20px;
  border: 1px solid #e1e1e1;
}

ul li {
  display: inline-block;
  padding: 4px;
}

JavaScript

function makeNav( data ) {

	console.log( data );
  
	var nav = [];
	$.each( data, function( rowIndex, row ) {
    // Each list item
    nav.push( '<li><a href="'+ row.url +'" title="'+ row.title +'">'+ row.text +'</a></li>' );
  });

  // Divider
  nav = nav.join('<li class="divider">|</li>');

  // Navigation wrapper
  var wrapper = $('<ul>', {
    id: 'nav',
    html: nav
  });
  wrapper.appendTo('#output');
  
}


$('#input').on("change", function() {
	
  $('#output').html('');
  
	var csvString = $(this).val().trim();
  var object = Papa.parse( csvString, {
		header: true,
  });
  
	makeNav( object.data );
  
}).trigger('change');