Цикл многомерного объекта в JavaScript - PullRequest
Новая
       1

Цикл многомерного объекта в JavaScript

0 голосов
/ 07 июня 2019

У меня есть следующий объект в JavaScript: 

{
  "123": {
    "room_name": "Apartment #12",
    "room_nights_nb": 1,
    "room_night_price": "110.00"
  },
  "124": {
    "room_name": "House #24",
    "room_nights_nb": 2,
    "room_night_price": "125.00"
  }
}

Из этого объекта мне нужно заполнить следующую таблицу: 

<table class="table">
    <thead>
        <tr>
            <th>Room name</th>
            <th>Night number</th>
            <th>Night price</th>
            <th>Total price</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Итак, желаемый результат должен быть (между <tbody> и </tbody>): 

<tr>
    <td>Apartment #12</td>
    <td>1</td>
    <td>110,00 $</td>
    <td>110,00 $</td>
</tr>
<tr>
    <td>House #24</td>
    <td>2</td>
    <td>125,00</td>
    <td>250,00 $</td>
</tr>

Итак, вот что я попробовал: 

for(var i = 0; i < objects.length; i++) {
    var object = objects[i];
    content += '<tr><td>object[room_name]</td><td>object[room_nights_nb]</td><td>object[room_night_price]</td><td>object[room_night_price] * object[room_nights_nb]</td></tr>';
}

$('table > tbody').html(content);

Но, к сожалению, это не работает.

Можетпожалуйста, помогите мне с этим?

Спасибо.

Ответы [ 4 ]

1 голос
/ 07 июня 2019

Вы не указали целевую платформу, но я рекомендую использовать Object.entries () для этого: 

const data = {
  "123": {
    "room_name": "Apartment #12",
    "room_nights_nb": 1,
    "room_night_price": "110.00"
  },
  "124": {
    "room_name": "House #24",
    "room_nights_nb": 2,
    "room_night_price": "125.00"
  }
};

const template = ({room_name, room_nights_nb, room_night_price}) => (
`<tr><td>${room_name}</td><td>${room_nights_nb}</td><td>${room_night_price}</td></tr>`
);


const content = Object.entries(data).map(([key, val]) => template(val));

console.log(content);

Теперь у вас будет массив со строками и ячейками таблицы внутри. Вы можете проходить через это и отображать содержимое по своему усмотрению. Просто измените шаблон функцию для ваших нужд.

0 голосов
/ 07 июня 2019

Вы можете использовать map(), а затем join()

const obj = {
  "123": {
    "room_name": "Apartment #12",
    "room_nights_nb": 1,
    "room_night_price": "110.00"
  },
  "124": {
    "room_name": "House #24",
    "room_nights_nb": 2,
    "room_night_price": "125.00"
  }
}

let res = Object.values(obj).map(a => {
  let arr = [...Object.values(a),a.room_nights_nb * a.room_night_price];
  return `<tr>${Object.values(a).map(x => `<td>${x}</td>`).join('')}</tr>`

})
console.log(res)
document.querySelector('table tbody').innerHTML = res.join('')
<table class="table">
    <thead>
        <tr>
            <th>Room name</th>
            <th>Night number</th>
            <th>Night price</th>
            <th>Total price</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
0 голосов
/ 07 июня 2019

Вот еще один способ сближения, 

var dictionary = {
    "123": {
      "room_name": "Apartment #12",
      "room_nights_nb": 1,
      "room_night_price": "110.00"
    },
    "124": {
      "room_name": "House #24",
      "room_nights_nb": 2,
      "room_night_price": "125.00"
    }
  };

var table = document.getElementById('tbody');
Object.values(dictionary).forEach((dict) => {
    var row = document.createElement('tr');
    Object.values(dict).forEach((rowc) => {
        var td = document.createElement('td');
        td.textContent = rowc;
        row.appendChild(td);
    })
    var total = dict['room_nights_nb'] * Number.parseInt(dict["room_night_price"], 10);
    var endtd = document.createElement('td');
    endtd.textContent = total;
    row.appendChild(endtd);
    table.appendChild(row);
});
<html>
    <head>
        <title>Prince</title>
    </head>
    <body>
        <table id = 'table'>
            <thead>
                <tr>
                        <th>Room name</th>
                        <th>Night number</th>
                        <th>Night price</th>
                        <th>Total price</th>
                </tr>
            </thead>
            <tbody id='tbody'>
            </tbody>
        </table>
    </body>
    <script src='./index.js'></script>
</html>
0 голосов
/ 07 июня 2019

objects.length не определено, потому что это объект, а не массив.Однако вы можете зациклить свойства вашего объекта следующим образом: 

var content = "";

for(var i in objects) {
    var currentObject = objects[i];
    var currentRow    = [
        currentObject[room_name],
        currentObject[room_nights_nb],
        currentObject[room_night_price],
        currentObject[room_night_price] * currentObject[room_nights_nb]
    ];

    content += "<tr><td>" + currentRow.join("</td><td>") + "</td></tr>";
}

$("table > tbody").html(content);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...