2

С помощью такого ajax запроса получаю json:

$(document).ready(function() {
       var idFrom = 1;
       var idTo = 2;

       $.ajax({
           url: '/index.php',
           type: 'POST',
           dataType:'json',
           data: {action: 'showMessage', 'idFrom': idFrom, 'idTo': idTo},
           success: function (data) {
              data = JSON.parse(data);

                       ?????

           }
        });
      });

Результат в файле index.php {"user1":"testeste"}{"user1":"test2"}. И как теперь мне вывести результат в таблицу?

<table class="table">
  <thead>
   <tr>
     <th>Отправитель:</th>
     <th>Текст:</th>
  </tr>
  </thead>
  <tbody>
  <tr class="myTr">
      <td class="userName"></td>
      <td class="textMessage"></td>
  </tr>
  </tbody>
</table>

Чтобы в результате была таблица; Отправитель: user1, Текст:testeste?

3
  • Разделите задачу на несколько мелких частей, например, как я понял (может и неправильно, я в вебе не шарю) - 1. Парсинг JSON массива 2. Составление таблицы.
    – user194625
    28 мая 2017 в 11:36
  • 1
    У вас уже в хтмл есть таблица и вам надо из js скрипта добавить в нее данные из json? Тогда задачу можно разделить так: достаем все json обьекты из json массива, берем у каждого ключ и значение, потом ищем элемент таблицы, и циклом вставляем данные в нее
    – user194625
    28 мая 2017 в 11:39
  • @Flippy, идею я примерно понимаю, но как это реализовать?
    – r.mcreal
    28 мая 2017 в 11:45

2 ответа 2

2
console.log(data);
for (var i = 0; i < data.length; i++) {
  for (var key in data[i]) {
    $("table.table tbody").append("<tr class='myTr'>" +
      "<td class='userName'>" + key + "</td>" +
      "<td class='textMessage'>" + data[i][key] + "</td>" +
      "</tr>");
    break;
  }
}
1
  • спасибо за отклик. Но почему-то не работает, не могу понять почему. Выводится только Отправитель: ,Текст
    – r.mcreal
    28 мая 2017 в 13:01
1

Момент с разбором JSON-а опустил, суть метода: перебираем массив объектов и обращаемся к каждому свойству-значению, вставляем построчно в таблицу.

var data = {
  "users": [{
    "username": "Vasya",
    "userid": 1
  }, {
    "username": "Petya",
    "userid": 10
  }, {
    "username": "Kolya",
    "userid": 15
  }, {
    "username": "Natashya",
    "userid": 13
  }]
};

$(data.users).each(function(index, item) {
  $('#table').append('<tr><td>' + item.username + '</td><td>' + item.userid + '</td></tr>');
});
table,
td,
th {
  border: 1px solid;
}

td,
th {
  padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <th>Username</th>
    <th>UserID</th>
  </tr>
</table>

5
  • json у меня формируется на сервере таким образом echo json_encode(array($userName => $row['message'])); т.е. нет никаких "username" или "userid", а просто {'user1':'Hello'}, {'user2'}:{'Привет'}. Пытался как сделать как писал предыдущий комментатор, т.е. for (var i = 0; i < data.length; i++) { for (var key in data[i]) { $("table.table tbody").append("<tr class='myTr'>" + "<td class='userName'>" + key + "</td>" + "<td class='textMessage'>" + data[i][key] + "</td>" + "</tr>"); break; } } Пройти по всем элементам и попутно выводить, но не работает
    – r.mcreal
    28 мая 2017 в 13:13
  • покажите что-нибудь кроме кусочка {'user1':'Hello'}, {'user2'}:{'Привет'} о вашем json-е, мне пока что непонятно как разобрать его. свой код я для примера написал, естественно к вас не будет такого же :-) 28 мая 2017 в 13:27
  • На сервере получаю данные из бд и в цикле добавляю while ($row = $q->fetch_assoc()) { $fromMessage = ($row['fromMessage']); $userName = getUserName($fromMessage, $mysqli); echo json_encode(array($userName => $row['message'])); } . В консоли разработчика браузера echo выводит {'user1':'Hello'}, {'user2'}:{'Привет'}. Наверное все что могу сказать о своем json
    – r.mcreal
    28 мая 2017 в 14:35
  • {'user1':'Hello'}, {'user2'}:{'Привет'} ???
    – user176262
    28 мая 2017 в 14:55
  • @Igor, т.е. echo json_encode(array($userName => $row['message'])); возвращает {'user1':'Hello'}, {'user2'}:{'Привет'} (имя отправителя и текст сообщения). Надеюсь я понятно объясняю)
    – r.mcreal
    28 мая 2017 в 15:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.