Split & Join Strings

📝 We continue in the same project folder throughout this section.

What we will be doing

We have set the current pizza name in the kitchen, and now we are going to display the method inside of the method section. The method includes the steps needed to create each pizza, and we have this at the top of the JavaScript file, inside of the pizzas array:

const pizzas = [
  {
    name: 'Margherita',
    // split string to list steps
    method:
      '1/ Roll the dough base to the required thickness and shape. 2/ Add sauce to the base. 3/ Top with cheese.',
    requiredSteps: ['ROLL DOUGH', 'PIZZA SAUCE', 'CHEESE'],
  },
  //

This example Margherita method has three steps:

Roll the dough base to the required thickness and shape.
Add sauce to the base.
Top with cheese.

We will validate the chef has completed these steps later, using the requiredSteps, but for now we will focus on displaying the method.

As you can see this method is one string of text, but we can split up each of these steps and display them in the browser.

Creating our function

For this, we could add this into the setCurrentPizza function, but to keep things cleaner we can create a new function at the bottom of the file:

// index.js

// takes in pizzaName so we know which method to get
function displayMethod(pizzaName) {}

And we call this function each time we set the current pizza:

function setCurrentPizza(e) {
  const pizzaName = e.target.innerText;
  document.querySelector('#current_pizza').innerText = pizzaName;
  // Call function and pass in pizzaName:
  displayMethod(pizzaName);
}

Over to the HTML file:

<!-- index.html -->
<section id="method">
  <h3>Method: <span id="pizza_name"></span></h3>
  <ul id="pizza_method"></ul>
</section>

Above is the section we are working with. We will be setting the selected pizza name in the span, and each method stage in the unordered list.

Set the pizza name

Beginning with the pizza name:

function displayMethod(pizzaName) {
  // set pizza name in section heading
  document.querySelector('#pizza_name').innerText = pizzaName;
}

Select the correct method

Next, select the current method from the pizzas array. We can use the array find method, to get only the pizza object we need:

function displayMethod(pizzaName) {
  document.querySelector('#pizza_name').innerText = pizzaName;
  // 1. get currently selected pizza object:
  const selectedPizza = pizzas.find((pizza) => pizza.name === pizzaName);
  console.log(selectedPizza.method);

The console should show the selected pizza method:

1/ Roll the dough base to the required thickness and shape. 2/ Add sauce to the base. 3/ Top with cheese. 4/ Add 12 pieces of ham. 5/ Add 12 pieces of pineapple

This returns one long string of text.

Split the string

We need to split up this string and display each step as a list item. For this, JavaScript has a built-in string method called split, which strings inherit through the prototype chain. This method will take our single string, split it up at a point which we specify, and return an array containing all of these substrings.

This is how it looks:

function displayMethod(pizzaName) {
  document.querySelector('#pizza_name').innerText = pizzaName;
  const selectedPizza = pizzas.find((pizza) => pizza.name === pizzaName);
  console.log(selectedPizza.method);

  // 1. call split method on our string, splitting the string at the full stop, and store returned array into a variable:
  const methodSteps = selectedPizza.method.split('.');

  // 2. log array:
  console.log(methodSteps);
}

Joining strings

We can also do the opposite and that is to take an array of values and convert them into a string. We do this with the join method. Here are some examples which are not needed for our project:

// joins array values as one string, separated by a default comma:
console.log(methodSteps.join());

// or we can change the comma to be another separator:
console.log(methodSteps.join('-'));

Creating the method list

We know that we can loop through arrays and do something with each value. In the HTML, we have already set the selected pizza name. Next, we can set each array value to the empty unordered list:

<section id="method">
  <h3>Method: <span id="pizza_name"></span></h3>
  <ul id="pizza_method"></ul>
</section>

First, clear this unordered list in case a method is already set:

function displayMethod(pizzaName) {
  document.querySelector('#pizza_name').innerText = pizzaName;
  const selectedPizza = pizzas.find((pizza) => pizza.name === pizzaName);
  const methodSteps = selectedPizza.method.split('.');

  // 1. if a method is already set, clear it:
  document.querySelector('#pizza_method').innerHTML = '';

  // 2. list steps
  methodSteps.forEach(function (method) {
    const element = document.createElement('p');
    const text = document.createTextNode(method);
    element.appendChild(text);
    // set each list item to ul wrapper:
    document.querySelector('#pizza_method').appendChild(element);
  });
}

The selected pizza should now have the method displaying in the method section. And we can also refactor using the buildElement helper function we created:

function displayMethod(pizzaName) {
    document.querySelector("#pizza_name").innerHTML = pizzaName;
    const selectedPizza = pizzas.find((pizza) => pizza.name === pizzaName);
    const methodSteps = selectedPizza.method.split(".");
    document.querySelector("#pizza_method").innerHTML = "";
    methodSteps.forEach(function (method) {
        // 1. remove these 3 lines:
        // const element = document.createElement('p');
        // const text = document.createTextNode(method);
        // element.appendChild(text);

        // 2. replace with helper function:
        const element = buildElement("p", method);

        document.querySelector("#pizza_method").appendChild(element);
    });
}

This is another good step completed for our project. If you are a beginner, I know there is a lot going on. But the important thing to remember is we have already covered the majority of what we are doing here.

It is just a case of breaking it down to smaller tasks and making sure each step works along the way.

What we will be doing
Creating our function
Set the pizza name
Select the correct method
Split the string
Joining strings
Creating the method list