Как получить объект и отобразить в HTML-JavaScript - PullRequest
Новая
       40

Как получить объект и отобразить в HTML-JavaScript

0 голосов
/ 24 мая 2019

Я хотел бы знать, как перебирать массив объектов в JavaScript.

У меня есть массив sample, в котором свойство options должно отображаться в подсвеченном HTML для каждого объекта 


var sample = [{
  "trans": [{
    "id": "trans",
    "fee": 20,
    "options": ["credit", "debit"]
  }],
  "insta": [{
    "id": "insta",
    "fee": 30,
    "options": ["bank", "credit"]
  }]
}]

render(){
  sample.map((r)=>{
   <select>
     r.options.map((e)=>
      return html`

          <option>${e.options}</option>
     `
     )
   </select>
  }
}

Ответы [ 3 ]

0 голосов
/ 24 мая 2019

Я думаю, что вам нужно вот что-то вроде этого (вы пропускаете возврат в функции рендеринга): 

var sample=[{
  "trans":[{
   "id": "trans",
   "fee": 20,
  "options": ["credit", "debit"]
 }],
  "insta":[{
   "id": "insta",
   "fee": 30,
   "options":["bank", "credit"]
}]
}]

render(){
   return sample.map((r)=>{
   <select>
     r.options.map((e)=>
      return html`

          <option>${e.options}</option>
     `
     )
   </select>
  }
}
0 голосов
/ 24 мая 2019

вы применяете Array.map к r.options, поэтому каждый элемент уже является отдельной опцией, поэтому вам нужно просто вызвать 

r.options.map( e => html`<option>${e}</option>`)
0 голосов
/ 24 мая 2019

e уже является значением элемента массива options, вам не нужно использовать e.options.Так что это должно быть просто 

<option>${e}</option>

Вам также нужно перебрать циклы r.trans.options и r.insta.options. 

render(){
  sample.map((r)=>{
   <select>
     r.trans.options.map((e)=>
      return html`

          <option>${e}</option>
     `
     )
   </select>
   <select>
     r.insta.options.map((e)=>
      return html`

          <option>${e}</option>
     `
     )
   </select>
  }
}
...