CODEWITHSUNDEEP
javascriptjqueryhtml
user3063712
user3063712

Reputation: 23

Convert list of numbers to code

I get a list of 40 numbers that I have to convert to code. Here is an example of half of the list:

9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775

First I have to take each number and add it to this line of code (replacing the number for both the 'a' and 'img' tags)

<li>
  <a href="/book/9780143034759">
    <img src="http://images.booksense.com/images/759/034/9780143034759.jpg" />
  </a>

Then on the img tag I have to take the last 3 numbers and move them to the first position in the link then the 2nd three numbers from the end and replace the 2nd position in order for the img link to work.

Then for every 10 li's I have to wrap with:

<div class="book-cover-list">
    <ul>
    </ul>
</div>

My idea was to have an HTML document that I can paste the list of numbers into and then have a javascript or jquery script that will do all of the work for me. But, I don't really have any idea how to do it. So any help would be greatly appreciated.

This finished code looks like this:

<div class="book-cover-list">
    <ul>
        <li><a href="/book/9780143034759"><img src="http://images.booksense.com/images/759/034/9780143034759.jpg" /></a>
        <li><a href="/book/9781476728759"><img src="http://images.booksense.com/images/759/728/9781476728759.jpg" /></a>
        <li><a href="/book/9780143125471"><img src="http://images.booksense.com/images/471/125/9780143125471.jpg" /></a>
        <li><a href="/book/9780316017930"><img src="http://images.booksense.com/images/930/017/9780316017930.jpg" /></a>
        <li><a href="/book/9780307408877"><img src="http://images.booksense.com/images/877/408/9780307408877.jpg" /></a>
        <li><a href="/book/9781250092335"><img src="http://images.booksense.com/images/335/092/9781250092335.jpg" /></a>
        <li><a href="/book/9780316322423"><img src="http://images.booksense.com/images/423/322/9780316322423.jpg" /></a>
        <li><a href="/book/9780143109259"><img src="http://images.booksense.com/images/259/109/9780143109259.jpg" /></a>
        <li><a href="/book/9781451659177"><img src="http://images.booksense.com/images/177/659/9781451659177.jpg" /></a>
        <li><a href="/book/9780147515995"><img src="http://images.booksense.com/images/995/515/9780147515995.jpg" /></a>
    </ul>
</div>    

<div class="book-cover-list">
    <ul>
        <li><a href="/book/9780143034759"><img src="http://images.booksense.com/images/759/034/9780143034759.jpg" /></a>
        <li><a href="/book/9781476728759"><img src="http://images.booksense.com/images/759/728/9781476728759.jpg" /></a>
        <li><a href="/book/9780143125471"><img src="http://images.booksense.com/images/471/125/9780143125471.jpg" /></a>
        <li><a href="/book/9780316017930"><img src="http://images.booksense.com/images/930/017/9780316017930.jpg" /></a>
        <li><a href="/book/9780307408877"><img src="http://images.booksense.com/images/877/408/9780307408877.jpg" /></a>
        <li><a href="/book/9781250092335"><img src="http://images.booksense.com/images/335/092/9781250092335.jpg" /></a>
        <li><a href="/book/9780316322423"><img src="http://images.booksense.com/images/423/322/9780316322423.jpg" /></a>
        <li><a href="/book/9780143109259"><img src="http://images.booksense.com/images/259/109/9780143109259.jpg" /></a>
        <li><a href="/book/9781451659177"><img src="http://images.booksense.com/images/177/659/9781451659177.jpg" /></a>
        <li><a href="/book/9780147515995"><img src="http://images.booksense.com/images/995/515/9780147515995.jpg" /></a>
    </ul>
</div>

Upvotes: 1

Views: 95

Answers (6)

gaetanoM
gaetanoM

Reputation: 42054

UPDATE

How can i make just only 1 div and stop from creating new ones? May I limit to the first 4 or 5 numbers from the array?

You may limit the for loop only to the first elements you want. For the divs, you may create only one, outside the for loop.

The snippet:

var data = '9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775'.split(' ');


var eleToAppend = $('<div/>', {class: 'book-cover-list'}).append($('<ul/>'));
for(var index=0; index<5; index++) {
  var val = data[index];
  var newLi = $('<li/>').append($('<a/>', {href: '/book/' + val})
                                .append($('<img/>', {src: 'http://images.booksense.com/images/' + val.substr(val.length - 3) + '/' + val.substr(val.length - 6, 3) + '/' + val + '.jpg'})))
  eleToAppend.find('ul').append(newLi);
}
$(document.body).append(eleToAppend);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

For the first I suggest you to build the new dom element with jQuery-html-attributes like in:

$('<div/>', {class: 'book-cover-list'}).append($('<ul/>'))

Your main steps are:

  • Use split to create an array from a string of numbers
  • Use forEach to iterate on array elements

The snippet:

var data = '9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775'.split(' ');

var eleToAppend = null;
data.forEach(function(val, index) {
  if ((index % 10) == 0) {
    if (eleToAppend != null) {
      $(document.body).append(eleToAppend);
    }
    eleToAppend = $('<div/>', {class: 'book-cover-list'}).append($('<ul/>'));
  }
  var newLi = $('<li/>').append($('<a/>', {href: '/book/' + val})
                      .append($('<img/>', {src: 'http://images.booksense.com/images/' + val.substr(val.length - 3) + '/' + val.substr(val.length - 6, 3)+ '/' + val + '.jpg'})))
  eleToAppend.find('ul').append( newLi);
})
if (eleToAppend != null) {
  $(document.body).append(eleToAppend);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386756

You could use an array and generate all tags with the appropriate values.

var isbn = '9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775',
    numbers = isbn.split(' '),
    div = document.createElement('div'),
    ul = document.createElement('ul');

div.appendChild(ul);
document.body.appendChild(div);

numbers.forEach(function (isbn, i) {
    var li = document.createElement('li'),
        a = document.createElement('a'),
        img = document.createElement('img');

    if (i && i % 10 === 0) {
        div = document.createElement('div');
        div.className = 'book-cover-list';
        ul = document.createElement('ul');
        div.appendChild(ul);
        document.body.appendChild(div);
    }
    img.src = 'http://images.booksense.com/images/' + isbn.slice(10, 13) + '/' + isbn.slice(7, 10) + '/' + isbn + '.jpg';
    a.href = '/book/' + isbn;
    a.appendChild(img);
    li.appendChild(a);
    ul.appendChild(li);
});

Upvotes: 3

manonthemat
manonthemat

Reputation: 6251

Since this is tagged as a javascript question, here's a quick node script that generates an output.html with your desired format. Save this to a file named stack.js and then run node stack.js on it to generate the output.html in your local directory.

'use strict';

const fs = require('fs');

const nums = '9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775'.split(' ');

const createList = num => {
    return `
        <li><a href="/book/${num}"><img src="http://images.booksense.com/images/759/034/${num}.jpg" /></a></li>
    `;
}

const createSnippet = nums => {
  let output = '';
  for (let i=0; i < nums.length; ++i) {
    if (i === 0 || i % 10 === 0) {
      output += '<div class="book-cover-list"><ul>';
    }
    output += createList(nums[i]);
    if (i === 0 || i % 10 === 9 || i === nums.length - 1) {
      output += '</ul></div>';
    }
  }
  return output;
}

fs.writeFileSync('output.html', createSnippet(nums));

Upvotes: 0

Marcel Dieterle
Marcel Dieterle

Reputation: 335

Here´s an example how you could achieve this:

$(document).ready(function(){
  displayNumbers($(".numbers").val());
  
  $(".numbers").change(function(){
  	displayNumbers($(this).val());
  })
});

function displayNumbers(rawNumbers){
	var numbers = rawNumbers.split(" ");
  $(".output").empty();
  for(i=0; i < numbers.length; i++){
  	$(".output").append("<li><a href='/book/" + numbers[i] + "'> img tag here with id: " + numbers[i] + " </a></li>");
  }
}
.numbers {
  width:100%;
  height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<textarea class="numbers">9781101987971 9780385349741 9780385542364 9781550022134 9781501132933 9780345531094 9780374280024 9780670026197 9781250069795 9780062297716 9781250075727 9781501139888 9780062300546 9780812988406 9780812993547 9781455539741 9780062363596 9781101982600 9781630060589 9780735220775
</textarea>

<ul class="output"></ul>

Upvotes: 0

adrield
adrield

Reputation: 625

You can start by setting these numbers as an array:

["9781101987971", "9780385349741", "9780385542364"]

Then, use a loop to generate the tags as you need it. Those 3 digit numbers you can get by using the substring method (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/substring)

Use the createElement method (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) to build the tags and the appendChild method (https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) to put it all together. Each 10 loops, you just create and append another wrapper element before the 'li', 'img' and 'a' tags.

Try solving the problem with using these concepts and if you get stuck again, we can help you to sort out the logic!

Upvotes: 0

zfj3ub94rf576hc4eegm
zfj3ub94rf576hc4eegm

Reputation: 1273

Put your numbers into an array like so:

var str = "9781101987971 9780385349741 9780385542364"; // et cetera
var arr = str.split(" ");

Then use a for loop to add elements programmatically. I would recommend using document.createElement() and element.appendChild().

Upvotes: 0

Related Questions