Looping Array which is inside an object

Question

I have an object named myInfo

var myInfo = {
            skills: ['PHP', 'Java', 'JavaScript', 'HTML', 'CSS', 'jQuery'],
            languages: ['English', 'German']
            }

And I want to loop over the strings inside the skills array which is inside the myInfo object. I've tried this but doesn't seem to work

        var mySkills = '';
        for (i=0, i < myInfo.skills.length, i++) {
          mySkills += 'li' + myInfo.skills + 'li';
        }
        document.write(mySkills);

Any help will be appreciated. Maybe I went wrong somewhere in the code.

Three errors. Firstly for uses `;` in between the options instead of `,`. Second, you're not using the i, so isntead of `myInfo.skills` should be `myInfo.skills[i]`. Thirdly, if you want to use strings to create new `li` do `<'li>' + myInfo.skills + '' — A. L, Mar 22 '17 at 04:11
`var mySkills = myInfo.skills.map(skill => 'li' + skill + 'li')` will produce: ["liPHPli","liJavali"...]. _Since this was marked as duplicate, I couldn't post an answer. Also, note that "[Arrow Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)," the `(skill) => 'li' + skill + 'li'` part (short for `function(skill){ return 'li'+skill+'li' }`) won't work in IE (of course), but will work in Edge, for what it's worth._ — Travis Heeter, Apr 19 '17 at 13:31

score 2 · Answer 1 · answered Mar 22 '17 at 04:17

I would write a routine which creates an li:

function li(content) {
  const elt = document.createElement('li');
  elt.innerHTML = content;
  return elt;
}

Now, create a document fragment to put all those lis into, based on an array:

function makeLis(contents) {
  const frag = document.createDocumentFragment();

  contents.forEach(content => frag.appendChild(li(content));
  return frag;
}

Write a function to create a ul element to put the li's into:

function makeUl(contents) {
  const ul = document.createElement('ul');

  ul.appendChild(makeLis(contents));
  return ul;
}

Now you can write that into your document:

document.getElementById('target').appendChild(makeUl(contents));

Chinito · Answer 2 · 2017-03-22T04:03:08.933

1

get the values of skills through index

var mySkills = '';
for(i=0; i < myInfo.skills.length; i++) {
    mySkills += '<li>' + myInfo.skills[i] + '</li>';
}
document.write(mySkills);

edited Mar 22 '17 at 04:03

answered Mar 22 '17 at 03:54

Chinito

1,085
1
9
11

That seems to be one of the few errors i have in the code. Still outputs an error when i tried logging it to a console. – Kautilya Kondragunta Mar 22 '17 at 03:58
what's the error? – Chinito Mar 22 '17 at 04:00
3

@Chinito Use `;` in `for(i=0, i < myInfo.skills.length, i++) {` instead of `,`. – Tushar Mar 22 '17 at 04:01
oh. yeah. maybe that's your error. use semicolon instead of a comma. i just copied your code though. thanks @Tushar – Chinito Mar 22 '17 at 04:02
Yeah that was the error , works now . Thanks! – Kautilya Kondragunta Mar 22 '17 at 04:30

Ryan Dooley · Answer 3 · 2017-03-22T04:05:45.547

1

You can access an individual object in the Object Array through index []. The objects are 0 index based.

skills: ['PHP', 'Java', 'JavaScript', 'HTML', 'CSS', 'jQuery'],

PHP is the start of the object array, at position 0

mySkills += '<li>' + myInfo.skills[i] + '</li>';

i will increment for every pass until,

for(i=0; i < myInfo.skills.length, i++) {

i is greater then the length of the array, 0,1,2,3,4,5.

a semi-colon is required when initializing the variable.

edited Mar 22 '17 at 04:05

answered Mar 22 '17 at 04:03

Ryan Dooley

224
1
3
16

[Repeating same mistake](https://stackoverflow.com/questions/42942437/looping-array-which-is-inside-an-object#comment72981483_42942454) – Tushar Mar 22 '17 at 04:03

A. L · Accepted Answer · 2017-03-22T04:46:15.390

0

Unless you need to access the index as well, you can use for.. of

var myInfo = {
            skills: ['PHP', 'Java', 'JavaScript', 'HTML', 'CSS', 'jQuery'],
            languages: ['English', 'German']
            }
            
for (let skill of myInfo.skills)
{
  console.log(skill);
}

If you do need to access the index and you don't want to write a long i=0; i < length; i++ you can use for... in instead

var myInfo = {
            skills: ['PHP', 'Java', 'JavaScript', 'HTML', 'CSS', 'jQuery'],
            languages: ['English', 'German']
            }
            
for (let index in myInfo.skills)
{
  console.log(myInfo.skills[index], "at index", index);
}

edited Mar 22 '17 at 04:46

answered Mar 22 '17 at 04:04

A. L

11,695
23
85
163

OP appears to be attempting to concatenate an `html` string. – guest271314 Mar 22 '17 at 04:08
@guest271314 that's true, and there's a problem there as well – A. L Mar 22 '17 at 04:12
Easiest Approach! I used the let of loop worked fine. But do you have any idea why it outputs so make dots? http://prntscr.com/emy0uh for (let skill of myInfo.skills) { document.write('
' + skill + '
'); }

Kautilya Kondragunta

Mar 22 '17 at 04:26

@KautilyaKondragunta Because it's an li. It will default to dots unless you apply a css to them, see: http://stackoverflow.com/questions/1027354/need-an-unordered-list-without-any-bullets Also, why use `li` if you don't want the dotting? – A. L Mar 22 '17 at 04:45

Looping Array which is inside an object

4 Answers4