Отображение данных из JSON в jquery

Question

Я пытаюсь вывести название и номер компании для каждой компании.Тогда я смогу отобразить в моем div в списке.Я не очень хорош в jquery, Ajax и Json, поэтому я немного растерялся из-за того, что я делаю.

Это код, который я написал до сих пор

function companywith(elem){

            var companyWithidList = '#companyWith#';

            var ajaxResponse = $.ajax({
                type: 'POST',
                url: '/mysite/com/mysite/agcharts.cfc',
                data: {method: 'getChartInfo', returnformat: 'json', company_idlist: companyWithidList},
                dataType: "json",
                success: function(response) {
                    console.log(response);
                    var json_obj = JSON.parse(JSON.stringify(response));


                }

            })

        }

Я возвращаюсьданные, которые я ожидал получить обратно, но я хочу отобразить эти данные.Я знаю, что мне нужно использовать вложенный цикл, так как у меня есть два массива.

Это пример данных, которые отображаются в моей консоли, но я просто не знаю, как получить к ним доступ, чтобы отображать их на своей веб-странице.

отображение консоли ----- >>>>>> {COLUMNS: Array (2), DATA: Array (155)} COLUMNS: (2) ["COMPANY_NO", "COMPANY_NAME"] DATA: Array (155) [0 ... 99] 0:(2) [69, «компания 1»] 1: (2) [41, «компания 2»] 2: (2) [130, «компания 3»]

Я добавил каждый цикл, но этотпросто отображается для первого массива, что неправильно, но я не уверен, как добавить во второй массив.

    $.each(json_obj, function(i, v) {
    console.log("key is " + i);
    console.log("value is " + v);
    // parse the option value from json into an object
    var obj = JSON.parse(v);

  })
console display ---->>>>>>
key is COLUMNS
value is COMPANY_NO,COMPANY_NAME

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.Заранее спасибо

Answer 1

Насколько я понимаю, ваш ответ выглядит следующим образом:

{
  COLUMNS : ["COMPANY_NO", "COMPANY_NAME"],
  DATA : [[69, "company 1"], [41, "company 2"] .....
}

Вместо того, чтобы использовать весь ответ, вы можете использовать часть ответа data, выполнить итерацию и использовать ее каквы считаете нужным, поэтому ваша функция обратного вызова будет выглядеть примерно так:

 success: function(response) {
                console.log(response);
                var json_obj = JSON.parse(JSON.stringify(response));
                $.each(json_obj["DATA"], function(i, v) { //you loop over the DATA part only
                  console.log("key is " + i);   //this would be index, say 0
                  console.log("value is " + v); //this would be [69, "company 1"]
                  // use the values
                  console.log("id: "+ v[0]);  // 69
                  console.log("name: "+ v[1]);// "company 1"
                });
            }

Тем не менее, обратите внимание, что отдельные записи (например, [69, "company 1"]) являются массивами.Их можно обрабатывать лучше, если бы они были объектами json (чтобы вы могли получить доступ по каждому имени свойства, а не по номеру позиции), и в этом случае ваш ответ будет содержать массив объектов, а не массив массивов, который он имеет сейчас.

РЕДАКТИРОВАТЬ: Вы также можете выполнить итерацию без jQuery следующим образом:

response["DATA"].forEach(function(element) {
  console.log(element);    //Array [ 69, "company 1" ]
  console.log(element[0]+","+element[1]); //69,company 1
});

Answer 2

Если вы хотите отобразить данные в таблицах, есть много плагинов для этого.Но одним из лучших является плагин datatables https://datatables.net/.

Или вы можете добавить этот способ либо, если ваш json находится в этом формате, а не массив объектов

[{ "COMPANY_NAME":"abc", "COMPANY_NO":"1224" }, { "COMPANY_NAME":"pac", "COMPANY_NO":"9224" }]

      <table id="output">

      </table> 

         success: function(data){ 
                        $.each(json_obj, function( index, value ) {
                           var row = $("<tr><td>" + value.COMPANY_NAME + "</td><td>" + value.COMPANY_NO + "</td></tr>");
                           $("#output").append(row);
                        });