Capture Json Array with Javascript

Asked

Viewed 72 times

3

Good morning Galera,

I know that the statement of the question is similar to many others, but the problem becomes a little different.

I have a controller where filter the information that comes from my BD by a Foreach to align the dates iguas, and bring the lines in a single array for each date, to be able to put each table with its date and reports.

Controller:

public function get()
{
    $user = $_SESSION['nome'];


    $this->load->model('trackerModel');
    $query = $this->trackerModel->get($user)->result_array();


    foreach($query as $element){
        $result[$element['date']][] = $element;
    }

Then I pull him with my Ajax, until there quiet... However I can not extract what is inside each data array.

JSON:

 {
"20-08-2019":[
  {
    "id":"4",
    "hrStart":"09:00",
    "hrEnd":"12:05",
    "hrWork":"03:05",
    "nome_user":"Diego ",
    "date":"20-08-2019",
    "cliente":"Carlos",
    "projeto":"TimeSheet",
    "pacote":"TimeTrack",
    "type":"","descri":""
  },
  {
    "id":"5",
    "hrStart":"13:30",
    "hrEnd":"14:30",
    "hrWork":"01:00",
    "nome_user":"Diego ",
    "date":"20-08-2019",
    "cliente":"Carlos",
    "projeto":"TimeSheet",
    "pacote":"Pacote",
    "type":"",
    "descri":""
  }
],
"08-08-2019":[
  {
    "id":"3",
    "hrStart":"04:00",
    "hrEnd":"07:00",
    "hrWork":"03:00",
    "nome_user":"Diego ",
    "date":"08-08-2019",
    "cliente":"Marcelo",
    "projeto":"TimeSheet",
    "pacote":"Dashboard",
    "type":"","descri":""
  }
]

}

I tried several ways with the for.

JS:

 $.ajax({
    url: 'tracker/get',
    type: 'POST',
    dataType: "json",
    success: function(data){

        for (var dataIndex in data) {
            console.log(dataIndex);
            $("#table").append(`<table id="table${dataIndex}">`);
            for (j = 0; j < data[dataIndex].length; j++) {
              $(`#table${dataIndex}`).append(`
                  <tr>
                    <td>${data[dataIndex][j].hrStart}</td>
                    <td>${data[dataIndex][j].hrEnd}</td>
                    <td>${data[dataIndex][j].hrWork}</td>
                    <td>${data[dataIndex][j].nome_user}</td>
                    <td>${data[dataIndex][j].date}</td>
                  </tr>
                `);
            }
          }
          $("#exampleTable").append(`</table>`);

    },
    error: function(data){
        console.log(data);
    }
});

I’m grateful if you can help!

php javascript html5 json

  • I could post the reproduced html here and for this ok: https://jsfiddle.net/vladwoguer/aL7oyc31/2/

  • I tried to use this way that you reproduced there, my code is like this, but no information is sent.

  • One thing I saw is that this method would not be a GET instead of a POST?

  • I pull him from the bench friend... What would be the difference ?

  • The difference would just be semantics anyway. https://answall.com/questions/118213/quando-devo-usar-fun%C3%A7%C3%A3o-get-e-when-should-use-fun%C3%A7%C3%A3o-post Regarding your question, your for is correct for the json you passed. Could you include in the question the html you are using? (could be just the id="table" component). Thank you

1 answer

3


I advise you to improve your json, in the javascript every associative array is an object so it gets a little complicated to treat the information the way you set up the json, it’s possible but it’s kind of boring.

Just a second foreach to organize your json as follows.

$data = [];
foreach($result as $key => $value) {
    $data[] = [
        'date' => $key,
        'items' => $value
    ];
}

Format of the new json.

[{"date":"20-08-2019","items":[{"id":"4","hrStart":"09 => 00","hrEnd":"12 => 05","hrWork":"03 => 05","nome_user":"Diego ","date":"20-08-2019","cliente":"Carlos","projeto":"TimeSheet","pacote":"TimeTrack","type":"","descri":""},{"id":"5","hrStart":"13 => 30","hrEnd":"14 => 30","hrWork":"01 => 00","nome_user":"Diego ","date":"20-08-2019","cliente":"Carlos","projeto":"TimeSheet","pacote":"Pacote","type":"","descri":""}]},{"date":"08-08-2019","items":[{"id":"3","hrStart":"04 => 00","hrEnd":"07 => 00","hrWork":"03 => 00","nome_user":"Diego ","date":"08-08-2019","cliente":"Marcelo","projeto":"TimeSheet","pacote":"Dashboard","type":"","descri":""}]}]

Browser other questions tagged php javascript html5 json

You are not signed in. Login or sign up in order to post.