CODEWITHSUNDEEP
javascriptjqueryarraysjson
Dhanu
Dhanu

Reputation: 55

Populating data in a different table row from one array

I have the below code regarding populating the data in different table row from one array.

I want to display data in a different row and get language dynamically in language column (like below picture)

enter image description here

Object:

{
  "English Name": "English",
  "English Description": "English Description",
  "Hindi Name": "Hindi Name",
  "Hindi Description": "Hindi Description",
  "Marathi Name": "Marathi Name",
  "Marathi Description": "Marathi Description"
}

  $.ajax(settings).done(function(response) {
    var result = JSON.parse(response);

    var colName = [];
    for (var i = 0; i < result.data.length; i++) {
      for (var key in result.data[i]) {
        if (colName.indexOf(key) === -1) {
          colName.push(key);
        }
      }
    }

    console.log(colName);

    var showData = document.getElementById('showData');
    for (i = 0; i < result.data.length; i++) {
      var row = `<tr>
            <td>English</td>
            <td>${result.data[i].EnglishName}</td>
            <td>${result.data[i].EnglishDescription}</td>
        </tr>
        <tr>
            <td>Hindi</td>
            <td>${result.data[i].HindiName}</td>
            <td>${result.data[i].HindiDescription}</td>
        </tr>
        <tr>
            <td>Marathi</td>
            <td>${result.data[i].MarathiName}</td>
            <td>${result.data[i].MarathiDescription}</td>
        </tr>`;
      showData.innerHTML += row;
    }
  });
});

Upvotes: 0

Views: 54

Answers (1)

user3629892
user3629892

Reputation: 3046

My guess is that your JSON needs to look more like this:

{
  "data": [
    {
      "language": "English",
      "familyName": "English Name",
      "familyDescription": "English Description"
    },
    {
      "language": "Hindi",
      "familyName": "Hindi Name",
      "familyDescription": "Hindi Description"
    },
    {
      "language": "Marathi",
      "familyName": "Marathi Name",
      "familyDescription": "Marathi Description"
    }
  ]
}

And in your loop, a row should look like this, if result.data contains the arrays:

var row = `<tr>
        <td>${result.data[i].language}</td>
        <td>${result.data[i].familyName}</td>
        <td>${result.data[i].familyDescription}</td>
    </tr>`;

EDIT

If the JSON always has the same format, then you can access it by key, no need for a loop:

        <td>English</td>
        <td>result.data["English Name"]</td>
        <td>result.data["English Description"]</td>

Upvotes: 2

Related Questions