Skip to content

Why split after new line is not returning single array using JavaScript?

I have a string text after fetching an API with a for loop, that returns me a list of names, each name separated by a new line. When I use the code in the snippet, it returns me each name in an individual array, instead of a single array. Is there anything wrong with the RegEx? Could someone please tell me what is wrong? Thank you very much for the help.

function loadMagicItems() {
    fetch('https://api.open5e.com/magicitems/?fields=slug,name,desc,type,rarity&limit=1000'
    ).then(function (responses) {
        return responses.json();
    }).then(function (data) {
        displayMagicItems(data);
    });
};

function displayMagicItems(data) {
    for (let i = 0; i < data.results.length; i++) {
        const magicItemsName = data.results[i].name.split(/n/);
        console.log(magicItemsName);
    };
};
<body onload="loadMagicItems()">
</body>

Answer

Your JSON data is an array of items. Not all items as one string seperated by a newline character.

The easiest way to get the names of the items, is to use a map and return the name of the item.

function loadMagicItems() {
  fetch('https://api.open5e.com/magicitems/?fields=slug,name,desc,type,rarity&limit=1000').then(function(responses) {
    return responses.json();
  }).then(function(data) {
    displayMagicItems(data.results);
  });
};

function displayMagicItems(items) {
  items = items.map(({name}) => name);
  console.log(items);
};
<body onload="loadMagicItems()" />