Array Formatting

[amcolash]

Got this in an email, making into an issue to track on Github.

Hello greetings from the Fareast,

I installed your wonderful MMM-json-feed which also shows on my MM however I am really really struggling

to format the returned Json to show the relevant data.

I have attached a print shot of my Magic Mirror, without any formatting. The data is all coming in but its all in a mess. I want to display all the busses that come as well as their arrival time in hours and minutes:

 No:10
 Next Time: 13:32
 No:13 
 Next Time…..

I tried with with StripName as well as values but only get config.js file error’s

I would very much appreciate if you could guide me to the right direction as I am not very good in programming.

This is part of my config.js script:

modules: [
   {
     module: 'MMM-json-feed',
     position: 'top_bar',
     config: {
       url: 'https://arrivelah.herokuapp.com/?id=94029',
       //stripName: msg.payload.services[0]
       values: ["services"]
     }  
  },
  ....
]

Cheers

Bjoern

[amcolash]

I had some time today to play around with a way of dealing with arrays in the module. I have made a new branch of the code that will allow you to specify a format such as:

{
  module: 'MMM-json-feed',
  position: 'top_bar',
  config: {
    url: 'https://arrivelah.herokuapp.com/?id=94029',
    arrayName: "services",
    values: ["no", "next.time"]
  }
}

This branch allows for better handling of array data in the module and loops through each of the pieces. Array Branch. You will need to run the following to switch to the arrays branch.

$ cd MagicMirror $ cd modules/MMM-json-feed $ git checkout arrays

In all honesty though, I think that what you really are going to want is some custom parsing for your json. It is really simple to do and I will provide the code that you can look at to see how I am parsing through the json when I get a chance.

[BGSputnik]

Hi and greetings from the Far East (Singapore), Firstly my honest thanks for your prompt support on my questions !! I am a guy who appreciates that. Allow me to give some feedback:

• I couldnt use the Git command to update my files, (has this todo with permission rights ? I dont know, I updated manually and it works.
• I am not sure what the file eslintrc.js is for, I created that file in the same dir (MMM_json_feed) but it seems not to be needed because when I rename it, the system still run.
• I am trying now the following: a) I need to trim the hour and minute out of the entire date/time string. I tried this with a slice function:

temp: arrayName (next.time).slice(-14) values: ["no", "temp"] //next.time).slice(-14).slice(0,5); but it doesnt work in this manner, can I do any formatting and array operations at the config.js at all or do I need to find a way in the MMM_JSON_FEED.js file ? I would also like to have probably two or three bus numbers with times horizontally and the remaining ones below as it takes a lot of space. Maybe you could help me with some advice

[amcolash]

The eslint.json file is just used for my dev purposes and not needed. I am surprised that the git command did not work to checkout the branch, you may have had local changes which would have prevented it.

Unfortunately all of what you are asking for is outside of the scope of this simple module, which is just supposed to display data as it is. All of what you are looking to do is best done inside MMM-json-feed.js but as an actual module dedicated to bus times. The config will not support any of what you put in there. I think this can be a good learning exercise for you, so I will provide some code when I get a chance and explain how the parsing works.

[amcolash]

I have made a new branch that demonstrates how one could parse through this specific data (which is much harder to do in a generic way). Please check out the bus_routes branch and look at the git page for more info about checking out branches. I think I forgot to mention that you need to run a pull or fetch first.

$ cd MagicMirror $ cd modules/MMM-json-feed $ git pull <----- This line $ git checkout bus_routes

I think it would be a good idea to look through the code that I added to MMM-json-feed.js, it is all commented and explains how I am parsing and dealing with things.

Here is the most important snippet:

// Make a table element to inject our data into
var tableElement = document.createElement("table");
wrapper.appendChild(tableElement);

// We care about the services array portion of the json
data = data.services;

// No busses today
if (data.services.length == 0) {
  tableElement.appendChild(this.addRow("No bus service today"));
  return wrapper;
}

// Make some variables to keep track of multiple rows
var counter = 0;
var row = "";

// Loop through the route data we got
for (var i = 0; i < data.length; i++) {
  // Parse the times from the data
  var time1 = new Date(data[i].next.time);
  var time2 = new Date(data[i].subsequent.time);

  // Append the route number and times to the current row
  row += "#" + data[i].no + ": " + this.getTime(time1) + ", " + this.getTime(time2);

  // Increment our counter keeping track of how many routes in the current row
  counter++;

  // Some special logic to keep track of our separator character "|", but could be whatever you want
  if (counter <= 2 && i < data.length - 1) {
    row += " | ";
  }

  // After 3 routes, make the row and start again
  if (counter == 3) {
    console.log(row)

    // Append a row to the html table
    tableElement.appendChild(this.addRow(row));

    // Reset counter and string
    row = "";
    counter = 0;
  }
}

// If we have less than 3 items in the last row, add the remaining row
if (row.length > 0) {
  tableElement.appendChild(this.addRow(row));
}

[amcolash]

Please note, most options are now disabled and will do nothing if added to the config.js file, since this is a custom use case. Hope this helps and teaches you a bit about coding! Cheers :grin:

[BGSputnik]

All working, thank you very much Andrew !!

[amcolash]

Just an update for those who are interested, I added in a new feature for array support 7eb7c882a05f73dd351d8fdbf87b2149739d5d51 due to #12. Cheers!