Parsing data from api in javascript

Question

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.

Please show at least something that you tried, and in what way(s) it did not work. — Scott Hunter
– Scott Hunter, Commented Sep 17, 2019 at 12:51
Hello, welcome to stackoverflow, please, take a look into minimal reproducible example first, and then feel free to edit your post, many people are there to help you, but please, do not expect anyone will do your homework :) You mentioned you tried many methods - for instance which approaches? maybe it was just some simply issue like typo, etc. Thanks in advance and good luck — xxxvodnikxxx
– xxxvodnikxxx, Commented Sep 17, 2019 at 12:55

Timo Pitt · Accepted Answer · 2019-09-17 13:03:34Z

1

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]
    }
}

answered Sep 17, 2019 at 13:03

Timo Pitt

513 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Prakash Poudel Over a year ago

Accepted, Thanks

Prakash Poudel Over a year ago

upvote please, I am no longer being able to ask a question

Prakash Poudel Over a year ago

hello bro can we do this using back tick?

Sudhir Ojha · Accepted Answer · 2019-09-17 13:19:21Z

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);

dibra · Accepted Answer · 2019-09-17 13:23:41Z

0

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
    }
}

answered Sep 17, 2019 at 13:23

dibra

3985 silver badges9 bronze badges

Comments

xxxvodnikxxx · Accepted Answer · 2019-09-17 13:27:46Z

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 :)

@PrakashPoudel done, be aware for next time, post only reasonable question with at least minimal effort shown, thank you

Collectives™ on Stack Overflow

Parsing data from api in javascript

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related