Unexpected token, expected “,” while looping through objects












0















I'm trying to map through collection of objects inside an object and access the color item, but i get an error Unexpected token, expected ",". This is how i'm trying to map through. Is this the right way to map objects to retrieve value from colors.



  {Object.keys(this.state.lists).map((item, i) => 
(this.state.lists[item].colors).map(item, i) =>
<li key={i}>{this.state.lists[item].colors[item]} </li>
)}


this.state.lists looks like this:



 {{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}









share|improve this question

























  • {{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}} is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do {this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}

    – inostia
    Nov 26 '18 at 0:22













  • but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}

    – Deke
    Nov 26 '18 at 0:26











  • What does typeof this.state.lists give you?

    – inostia
    Nov 26 '18 at 0:27











  • type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}

    – Deke
    Nov 26 '18 at 0:39
















0















I'm trying to map through collection of objects inside an object and access the color item, but i get an error Unexpected token, expected ",". This is how i'm trying to map through. Is this the right way to map objects to retrieve value from colors.



  {Object.keys(this.state.lists).map((item, i) => 
(this.state.lists[item].colors).map(item, i) =>
<li key={i}>{this.state.lists[item].colors[item]} </li>
)}


this.state.lists looks like this:



 {{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}









share|improve this question

























  • {{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}} is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do {this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}

    – inostia
    Nov 26 '18 at 0:22













  • but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}

    – Deke
    Nov 26 '18 at 0:26











  • What does typeof this.state.lists give you?

    – inostia
    Nov 26 '18 at 0:27











  • type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}

    – Deke
    Nov 26 '18 at 0:39














0












0








0








I'm trying to map through collection of objects inside an object and access the color item, but i get an error Unexpected token, expected ",". This is how i'm trying to map through. Is this the right way to map objects to retrieve value from colors.



  {Object.keys(this.state.lists).map((item, i) => 
(this.state.lists[item].colors).map(item, i) =>
<li key={i}>{this.state.lists[item].colors[item]} </li>
)}


this.state.lists looks like this:



 {{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}









share|improve this question
















I'm trying to map through collection of objects inside an object and access the color item, but i get an error Unexpected token, expected ",". This is how i'm trying to map through. Is this the right way to map objects to retrieve value from colors.



  {Object.keys(this.state.lists).map((item, i) => 
(this.state.lists[item].colors).map(item, i) =>
<li key={i}>{this.state.lists[item].colors[item]} </li>
)}


this.state.lists looks like this:



 {{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}






javascript reactjs ecmascript-6






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 18:11









inostia

3,08611624




3,08611624










asked Nov 26 '18 at 0:16









DekeDeke

1,39911223




1,39911223













  • {{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}} is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do {this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}

    – inostia
    Nov 26 '18 at 0:22













  • but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}

    – Deke
    Nov 26 '18 at 0:26











  • What does typeof this.state.lists give you?

    – inostia
    Nov 26 '18 at 0:27











  • type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}

    – Deke
    Nov 26 '18 at 0:39



















  • {{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}} is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do {this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}

    – inostia
    Nov 26 '18 at 0:22













  • but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}

    – Deke
    Nov 26 '18 at 0:26











  • What does typeof this.state.lists give you?

    – inostia
    Nov 26 '18 at 0:27











  • type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}

    – Deke
    Nov 26 '18 at 0:39

















{{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}} is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do {this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}

– inostia
Nov 26 '18 at 0:22







{{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}} is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do {this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}

– inostia
Nov 26 '18 at 0:22















but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}

– Deke
Nov 26 '18 at 0:26





but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}

– Deke
Nov 26 '18 at 0:26













What does typeof this.state.lists give you?

– inostia
Nov 26 '18 at 0:27





What does typeof this.state.lists give you?

– inostia
Nov 26 '18 at 0:27













type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}

– Deke
Nov 26 '18 at 0:39





type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}

– Deke
Nov 26 '18 at 0:39












2 Answers
2






active

oldest

votes


















1














You are not passing a callback function to your second map call, .map(item, i). Hence the syntax error. It should instead be something like .map((item, i) => ...).



Here's some cleaned up code that might make sense of this, though I haven't tested if it works with React:



const colors = Object.keys(this.state.lists).map(itemKey => {
return <li key={itemKey}>{this.state.lists[itemKey].colors[0]}</li>
})


And when you render,



<ul>{colors}</ul>





share|improve this answer


























  • I wanted to output the result like this: {Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}

    – Deke
    Nov 26 '18 at 1:19











  • Oh... you just want the first color. Ok see my updated answer

    – inostia
    Nov 26 '18 at 1:22











  • I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this: {this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}

    – Deke
    Nov 26 '18 at 17:59



















1














When using ES6 functions, you can omit the () of the parameters, only if you use 1 parameter. What you've done is actually closed your map before you even got to the fat arrow (=>). Your error is saying it doesn't understand the , in map(item, i), since map doesn't accept a second parameter. Here's a bit of a break-down, followed by some optimized code for your problem.



A basic ES6 function is () => {}, where the parameters go between the () braces, and the code goes between the {}.



Here's a basic sum function: (a, b) => { return a+b }. Since this only has one line, and it's the return value, you can omit the {} brackets. i.e., (a, b) => a+b



Here's a hello function: (name) => { return 'hello ' + name }. Since it only has 1 parameter, you can use name => { return 'hello ' + name }. Or even using the above rule: name => 'hello ' + name.



These shortcuts can make code easier to write, but perhaps more difficult to understand. If in doubt, just always keep the () braces to avoid confusion.






const obj = {
1: {id: 1, colors:["red", "blue"]},
2: {id: 2, colors:["green", "yellow"]}
}

for (key in obj) {
const item = obj[key];
item.colors.map((color, i) => {
console.log( `<li key=${item.id}-${i}>${color}</li>`)
// Below lines are commented out because StackOverflow
// does not process JSX tags. Just uncomment and remove
// the console.log above

// return (
// <li key={item.id}-${i}>{color}</li>
// )
});
}





NOTES: Instead of using Object.keys to get an array of keys, I just use a for...in loop to accomplish the same thing.



Documentation



https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in






share|improve this answer

























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473316%2funexpected-token-expected-while-looping-through-objects%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    You are not passing a callback function to your second map call, .map(item, i). Hence the syntax error. It should instead be something like .map((item, i) => ...).



    Here's some cleaned up code that might make sense of this, though I haven't tested if it works with React:



    const colors = Object.keys(this.state.lists).map(itemKey => {
    return <li key={itemKey}>{this.state.lists[itemKey].colors[0]}</li>
    })


    And when you render,



    <ul>{colors}</ul>





    share|improve this answer


























    • I wanted to output the result like this: {Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}

      – Deke
      Nov 26 '18 at 1:19











    • Oh... you just want the first color. Ok see my updated answer

      – inostia
      Nov 26 '18 at 1:22











    • I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this: {this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}

      – Deke
      Nov 26 '18 at 17:59
















    1














    You are not passing a callback function to your second map call, .map(item, i). Hence the syntax error. It should instead be something like .map((item, i) => ...).



    Here's some cleaned up code that might make sense of this, though I haven't tested if it works with React:



    const colors = Object.keys(this.state.lists).map(itemKey => {
    return <li key={itemKey}>{this.state.lists[itemKey].colors[0]}</li>
    })


    And when you render,



    <ul>{colors}</ul>





    share|improve this answer


























    • I wanted to output the result like this: {Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}

      – Deke
      Nov 26 '18 at 1:19











    • Oh... you just want the first color. Ok see my updated answer

      – inostia
      Nov 26 '18 at 1:22











    • I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this: {this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}

      – Deke
      Nov 26 '18 at 17:59














    1












    1








    1







    You are not passing a callback function to your second map call, .map(item, i). Hence the syntax error. It should instead be something like .map((item, i) => ...).



    Here's some cleaned up code that might make sense of this, though I haven't tested if it works with React:



    const colors = Object.keys(this.state.lists).map(itemKey => {
    return <li key={itemKey}>{this.state.lists[itemKey].colors[0]}</li>
    })


    And when you render,



    <ul>{colors}</ul>





    share|improve this answer















    You are not passing a callback function to your second map call, .map(item, i). Hence the syntax error. It should instead be something like .map((item, i) => ...).



    Here's some cleaned up code that might make sense of this, though I haven't tested if it works with React:



    const colors = Object.keys(this.state.lists).map(itemKey => {
    return <li key={itemKey}>{this.state.lists[itemKey].colors[0]}</li>
    })


    And when you render,



    <ul>{colors}</ul>






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 26 '18 at 1:54

























    answered Nov 26 '18 at 0:51









    inostiainostia

    3,08611624




    3,08611624













    • I wanted to output the result like this: {Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}

      – Deke
      Nov 26 '18 at 1:19











    • Oh... you just want the first color. Ok see my updated answer

      – inostia
      Nov 26 '18 at 1:22











    • I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this: {this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}

      – Deke
      Nov 26 '18 at 17:59



















    • I wanted to output the result like this: {Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}

      – Deke
      Nov 26 '18 at 1:19











    • Oh... you just want the first color. Ok see my updated answer

      – inostia
      Nov 26 '18 at 1:22











    • I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this: {this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}

      – Deke
      Nov 26 '18 at 17:59

















    I wanted to output the result like this: {Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}

    – Deke
    Nov 26 '18 at 1:19





    I wanted to output the result like this: {Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}

    – Deke
    Nov 26 '18 at 1:19













    Oh... you just want the first color. Ok see my updated answer

    – inostia
    Nov 26 '18 at 1:22





    Oh... you just want the first color. Ok see my updated answer

    – inostia
    Nov 26 '18 at 1:22













    I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this: {this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}

    – Deke
    Nov 26 '18 at 17:59





    I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this: {this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}

    – Deke
    Nov 26 '18 at 17:59













    1














    When using ES6 functions, you can omit the () of the parameters, only if you use 1 parameter. What you've done is actually closed your map before you even got to the fat arrow (=>). Your error is saying it doesn't understand the , in map(item, i), since map doesn't accept a second parameter. Here's a bit of a break-down, followed by some optimized code for your problem.



    A basic ES6 function is () => {}, where the parameters go between the () braces, and the code goes between the {}.



    Here's a basic sum function: (a, b) => { return a+b }. Since this only has one line, and it's the return value, you can omit the {} brackets. i.e., (a, b) => a+b



    Here's a hello function: (name) => { return 'hello ' + name }. Since it only has 1 parameter, you can use name => { return 'hello ' + name }. Or even using the above rule: name => 'hello ' + name.



    These shortcuts can make code easier to write, but perhaps more difficult to understand. If in doubt, just always keep the () braces to avoid confusion.






    const obj = {
    1: {id: 1, colors:["red", "blue"]},
    2: {id: 2, colors:["green", "yellow"]}
    }

    for (key in obj) {
    const item = obj[key];
    item.colors.map((color, i) => {
    console.log( `<li key=${item.id}-${i}>${color}</li>`)
    // Below lines are commented out because StackOverflow
    // does not process JSX tags. Just uncomment and remove
    // the console.log above

    // return (
    // <li key={item.id}-${i}>{color}</li>
    // )
    });
    }





    NOTES: Instead of using Object.keys to get an array of keys, I just use a for...in loop to accomplish the same thing.



    Documentation



    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in






    share|improve this answer






























      1














      When using ES6 functions, you can omit the () of the parameters, only if you use 1 parameter. What you've done is actually closed your map before you even got to the fat arrow (=>). Your error is saying it doesn't understand the , in map(item, i), since map doesn't accept a second parameter. Here's a bit of a break-down, followed by some optimized code for your problem.



      A basic ES6 function is () => {}, where the parameters go between the () braces, and the code goes between the {}.



      Here's a basic sum function: (a, b) => { return a+b }. Since this only has one line, and it's the return value, you can omit the {} brackets. i.e., (a, b) => a+b



      Here's a hello function: (name) => { return 'hello ' + name }. Since it only has 1 parameter, you can use name => { return 'hello ' + name }. Or even using the above rule: name => 'hello ' + name.



      These shortcuts can make code easier to write, but perhaps more difficult to understand. If in doubt, just always keep the () braces to avoid confusion.






      const obj = {
      1: {id: 1, colors:["red", "blue"]},
      2: {id: 2, colors:["green", "yellow"]}
      }

      for (key in obj) {
      const item = obj[key];
      item.colors.map((color, i) => {
      console.log( `<li key=${item.id}-${i}>${color}</li>`)
      // Below lines are commented out because StackOverflow
      // does not process JSX tags. Just uncomment and remove
      // the console.log above

      // return (
      // <li key={item.id}-${i}>{color}</li>
      // )
      });
      }





      NOTES: Instead of using Object.keys to get an array of keys, I just use a for...in loop to accomplish the same thing.



      Documentation



      https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
      https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in






      share|improve this answer




























        1












        1








        1







        When using ES6 functions, you can omit the () of the parameters, only if you use 1 parameter. What you've done is actually closed your map before you even got to the fat arrow (=>). Your error is saying it doesn't understand the , in map(item, i), since map doesn't accept a second parameter. Here's a bit of a break-down, followed by some optimized code for your problem.



        A basic ES6 function is () => {}, where the parameters go between the () braces, and the code goes between the {}.



        Here's a basic sum function: (a, b) => { return a+b }. Since this only has one line, and it's the return value, you can omit the {} brackets. i.e., (a, b) => a+b



        Here's a hello function: (name) => { return 'hello ' + name }. Since it only has 1 parameter, you can use name => { return 'hello ' + name }. Or even using the above rule: name => 'hello ' + name.



        These shortcuts can make code easier to write, but perhaps more difficult to understand. If in doubt, just always keep the () braces to avoid confusion.






        const obj = {
        1: {id: 1, colors:["red", "blue"]},
        2: {id: 2, colors:["green", "yellow"]}
        }

        for (key in obj) {
        const item = obj[key];
        item.colors.map((color, i) => {
        console.log( `<li key=${item.id}-${i}>${color}</li>`)
        // Below lines are commented out because StackOverflow
        // does not process JSX tags. Just uncomment and remove
        // the console.log above

        // return (
        // <li key={item.id}-${i}>{color}</li>
        // )
        });
        }





        NOTES: Instead of using Object.keys to get an array of keys, I just use a for...in loop to accomplish the same thing.



        Documentation



        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in






        share|improve this answer















        When using ES6 functions, you can omit the () of the parameters, only if you use 1 parameter. What you've done is actually closed your map before you even got to the fat arrow (=>). Your error is saying it doesn't understand the , in map(item, i), since map doesn't accept a second parameter. Here's a bit of a break-down, followed by some optimized code for your problem.



        A basic ES6 function is () => {}, where the parameters go between the () braces, and the code goes between the {}.



        Here's a basic sum function: (a, b) => { return a+b }. Since this only has one line, and it's the return value, you can omit the {} brackets. i.e., (a, b) => a+b



        Here's a hello function: (name) => { return 'hello ' + name }. Since it only has 1 parameter, you can use name => { return 'hello ' + name }. Or even using the above rule: name => 'hello ' + name.



        These shortcuts can make code easier to write, but perhaps more difficult to understand. If in doubt, just always keep the () braces to avoid confusion.






        const obj = {
        1: {id: 1, colors:["red", "blue"]},
        2: {id: 2, colors:["green", "yellow"]}
        }

        for (key in obj) {
        const item = obj[key];
        item.colors.map((color, i) => {
        console.log( `<li key=${item.id}-${i}>${color}</li>`)
        // Below lines are commented out because StackOverflow
        // does not process JSX tags. Just uncomment and remove
        // the console.log above

        // return (
        // <li key={item.id}-${i}>{color}</li>
        // )
        });
        }





        NOTES: Instead of using Object.keys to get an array of keys, I just use a for...in loop to accomplish the same thing.



        Documentation



        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in






        const obj = {
        1: {id: 1, colors:["red", "blue"]},
        2: {id: 2, colors:["green", "yellow"]}
        }

        for (key in obj) {
        const item = obj[key];
        item.colors.map((color, i) => {
        console.log( `<li key=${item.id}-${i}>${color}</li>`)
        // Below lines are commented out because StackOverflow
        // does not process JSX tags. Just uncomment and remove
        // the console.log above

        // return (
        // <li key={item.id}-${i}>{color}</li>
        // )
        });
        }





        const obj = {
        1: {id: 1, colors:["red", "blue"]},
        2: {id: 2, colors:["green", "yellow"]}
        }

        for (key in obj) {
        const item = obj[key];
        item.colors.map((color, i) => {
        console.log( `<li key=${item.id}-${i}>${color}</li>`)
        // Below lines are commented out because StackOverflow
        // does not process JSX tags. Just uncomment and remove
        // the console.log above

        // return (
        // <li key={item.id}-${i}>{color}</li>
        // )
        });
        }






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 26 '18 at 4:35

























        answered Nov 26 '18 at 1:21









        AnonymousSBAnonymousSB

        2,229221




        2,229221






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473316%2funexpected-token-expected-while-looping-through-objects%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            404 Error Contact Form 7 ajax form submitting

            How to know if a Active Directory user can login interactively

            TypeError: fit_transform() missing 1 required positional argument: 'X'