0

Сервер возвращает объект, который нужно распарсить в HTML. У меня возникла проблема с выводом вложенных ассоциативных объектов. Подскажите пожалуйста, как вывести данные?

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
            $(document).ready(function () {

                    $.getJSON("http://example.com/getList", function (data) {


            var items = [];
            $.each( data, function( key, val ) {

                items.push( "<div id='" + key + "'>" + val + "</div>");
            });

            $( "<section/>", {
                "class": "my-new-data",
                html: items.join( "" )
            }).appendTo( "body" );

        });
    })
</script>

JSON c сервера:

{
"list": [
  {
  "name": "First",
  "location": {
    "name": "Poland",
    "code": "PL"
  },
  "partners": [
    {
      "name": "Oloo",
      "value": 30
    },
    {
      "name": "Flashset",
      "value": 87
    }
  ]
 },
 {
  "name": "Second",
  "location": {
    "name": "United States",
    "code": "US"
  },
  "partners": [
   {
      "name": "Thoughtsphere",
      "value": 89
    },
    {
      "name": "Gabtune",
      "value": 6
    },
    {
      "name": "Meetz",
      "value": 59
    }
  ]
  }
],
"status": "OK"
}

мой код выводит в HTML следующие данные:

[object Object],[object Object] OK

нужно вывести данные в следующую разметку:

<div>
    <h2>First</h2>
<div>
    <p>location: Poland</p>
    <p>code: PL</p>
</div>
<div>
    <div>
        <p>Oloo</p>
        <p>value: 30</p>
    </div>
    <div>
        <p>Flashset</p>
        <p>value: 87</p>
    </div>
</div>

3
  • какой html вы хотите получи на выходе?
    – teran
    24 мая 2018 в 10:21
  • items.push( "<div id='" + key + "'>" + val + "</div>"); если key в данной строке это число, то val это объект. присодиняя объект к строке, вы получаете то, что получаете. Очевидно вам надо обратиться к полям данного объекта и сформировать разметку. Сама она не материализуется.
    – teran
    24 мая 2018 в 10:24
  • @teran , добавил разметку. Подскажите пожалуйста, как вывести данные из объекта?
    – Serge
    24 мая 2018 в 10:43

1 ответ 1

1

Если решать задачку на скорую руку то можно воспользоваться Шаблонными строками. Пример ниже.

Но я настоятельно рекомендую вместо копирования ответа изучить vie.js или angular (лучше свежий), или хотя бы любой из существующих client-side шаблонизаторов.

document.getElementById('x').innerHTML = {
    "list": [
        {
            "name": "First",
            "location": {"name": "Poland","code": "PL"},
            "partners": [
                {"name": "Oloo","value": 30},
                {"name": "Flashset","value": 87}
            ]
        },
        {
            "name": "Second",
            "location": {"name": "United States","code": "US"},
            "partners": [
                {"name": "Thoughtsphere","value": 89},
                {"name": "Gabtune","value": 6},
                {"name": "Meetz","value": 59}
            ]
        }
    ],
    "status": "OK"
}.list
.map(myStupidJSTemplating)
.join('');

function myStupidJSTemplating(x) {
    return `
        <div>
          <h2>${x.name}</h2>
          <div>
            <p>location: ${x.location.name}</p>
            <p>code: ${x.location.code}</p>
          </div>
          <div>
            ${(x.partners || []).map(p => `
                <div><p>${p.name}</p><p>value: ${p.value}</p></div>
            `).join('')}
          </div>
        </div>
    `;
}
<div id=x></div>

2
  • спасибо за подсказку, но задачу необходимо выполнить без использования фреймворков
    – Serge
    24 мая 2018 в 12:02
  • 1
    есть шаблонизаторы (более богатые и удобные, чем template strings), если нельзя фреймворки. ну и поставьте галку если ответ вам помог. 24 мая 2018 в 12:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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