Reputation: 443

Parsing data from api in javascript

I am trying to parse data from a wordpress json api to my ionic app, Data from api is coming as:

{
"event_0_date_from":["20191015"],
"event_0_date_to":["20190926"],
"event_0_event":["Winter Vacation"],
"event_0_description":["Winter vacation"],

"event_1_date_from":["20190917"],
"event_1_date_to":["20190930"],
"event_1_event":["Dashain Vacation"],
"event_1_description":["--some-data--"],

"event_2_date_from":["--some-data--"],
"event_2_date_to":["--some-data--"],
"event_2_event":["--some-data--"],
"event_2_description":["--some-data--"],

---------------
-------------
--------------
-------------

"event":["3"] this shows total number of events
}

Using javascript, how would I format the above data and save it to some variable so that I can render it easily?

  events:[
        {
         "date_from":"20191015",
         "date_to":"20190926",
         "event":"Winter Vacation",
         "description":"Winter vacation"
        },
        {
          "date_from":"20191015",
          "date_to":"20190926",
          "event":"Winter Vacation",
          "description":"Winter vacation"
         },
         {
          "date_from":"--some-data--",
          "date_to":"--some-data--",
          "event":"--some-data--",
          "description":"--some-data--"
          },
          ---------------
          -------------
          --------------
          -------------
         ]

I tried so many methods but none are working.

Upvotes: 0

Answers (4)

xxxvodnikxxx

Reputation: 1277

Withing 20 minutes with Googling (+ few minutes for proper adjustment of counters) ... (wrote JS few times in whole life)

I was not sure how to load it into String and did not wanted to escape whole string, so I am loading it from a text file

Input data:

{
"event_0_date_from":["20191015"],
"event_0_date_to":["20190926"],
"event_0_event":["Winter Vacation"],
"event_0_description":["Winter vacation"],

"event_1_date_from":["20190917"],
"event_1_date_to":["20190930"],
"event_1_event":["Dashain Vacation"],
"event_1_description":["--some-data--"],

"event_2_date_from":["--some-data--"],
"event_2_date_to":["--some-data--"],
"event_2_event":["--some-data--"],
"event_2_description":["--some-data--"]
}

Page and script:

<!DOCTYPE HTML>
<html>

<body>
<input type="file" id="upload">


  <script>
 document.getElementById('upload').addEventListener('change', readFileAsString)
function readFileAsString() {
    var files = this.files;
    if (files.length === 0) {
        console.log('No file is selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        //console.log('File content:', event.target.result);

        var inputStr = event.target.result;
        //console.log(inputStr);

        var obj = JSON.parse(inputStr);
        //console.log(obj);


        var hasNext=true;
        var counter = 0;

        while(hasNext){
          var properties =["date_from","date_to","event","description"];
          var propertyPrefix = "event_"

          var prop = propertyPrefix + counter + "_" + properties[0];
          if(obj.hasOwnProperty(prop)){
            console.log("element #" + counter + ": ")
            for(var i = 0; i< properties.length;i++){
              var propToPrint = propertyPrefix + counter + "_" + properties[i];
              //console.log("loading: " + propToPrint)
              console.log(" " + obj[propToPrint]);
            }
            counter++;
          }else{
            hasNext = false;
          }
        }


    };
    reader.readAsText(files[0]);
}

  </script>

</body>
</html>

Result:

element #0: 
 20191015
 20190926
 Winter Vacation
 Winter vacation
element #1: 
 20190917
 20190930
 Dashain Vacation
 --some-data--
element #2: 
 --some-data--
 --some-data--
 --some-data--
 --some-data--

So, eg. this way its possible :)

Upvotes: -1

dibra

Reputation: 388

Try this code, it will include all event attributes in a dynamic way

var output = [];

for(var key in datas){

    // parse key
    var keyParts = key.split('_');
    var value = datas[key];

    // ignore "event" total
    if(keyParts.length > 1){
        var key = keyParts.slice(2).join('_'); // generate correct key from parts
        var index = keyParts[1]; // indexes : 0, 1, 2, etc.

        // initialize in first call
        if(output.hasOwnProperty(index) === false){
            output[index] = {} 
        }

        // append to output
        output[index][key] = value
    }
}

Upvotes: 0

Sudhir Ojha

Reputation: 3305

You just need to iterate over your json object. Within each iteration create a new map and push this newly created map into an array. Following is working snippet.

 let data = {
    "event_0_date_from":["20191015"],
    "event_0_date_to":["20190926"],
    "event_0_event":["Winter Vacation"],
    "event_0_description":["Winter vacation"],
    "event_1_date_from":["20190917"],
    "event_1_date_to":["20190930"],
    "event_1_event":["Dashain Vacation"],
    "event_1_description":["--some-data--"],
    "event_2_date_from":["--some-data--"],
    "event_2_date_to":["--some-data--"],
    "event_2_event":["--some-data--"],
    "event_2_description":["--some-data--"],
    "event":["3"]
    }
    let array = [];// Initialize an array
    let index = data.event[0];// Number of events
    for(let i=0;i<index;i++){
        let map = {};//Initialize a new map in each iteration.
        map.date_from = data["event_"+i+"_date_from"][0];
        map.date_to = data["event_"+i+"_date_to"][0];
        map.event = data["event_"+i+"_event"][0];
        map.description = data["event_"+i+"_description"][0]
        array.push(map);// finally push map into array
    }
    console.log(array);

Upvotes: 1

Timo Pitt

Reputation: 51

I think your just should take "yourObjekt.event[0]" for a counter like:

var newObjekt = [];
for (var i=0; i<yourObjekt.event[0]; i++) {
    newObjekt[i] = {
        date_from: yourObjekt["event_"+i+"_date_from"][0],
        date_to: yourObjekt["event_"+i+"_date_to"][0],
        event: yourObjekt["event_"+i+"_event"][0],
        description: yourObjekt["event_"+i+"_description"][0]
    }
}

Upvotes: 1

Parsing data from api in javascript

Answers (4)

Related Questions